Theme Rosalina

Contents

1. Introduction
   1.1 Screenshot of theme Rosalina
   1.2 Description of theme Rosalina

2. The Theme configuration options

3. Reset properties of theme

4. The theme in practice: tips
   4.1 Hotspots
   4.2 Image maps
   4.3 For visually impaired

1. Introduction

Rosalina is a theme based on Ger Versluys' HV-Menu. He made a very powerful, however complicated menu, based on Javascript, that has over 40 (!) configuration options. Rosalina is a theme for experienced Javascript kiddies. That's why we just supply the HV-men manuals. le.
The general configuration options are treated in chapter Theme Frugal.
The Bazaar Style Style features are discussed in the chapter Configuration Manager, paragraph 3.4.1 Bazaar Style Style at area level

1.1 Screenshots of theme Rosalina

Screenshot of theme Rosalina in its basic configuration in Website@School:
[ theme axis ]
themes_rosalina.png

Example of theme Rosalina

[ theme rosalina example ]
themes_rosalina_example.png

For an up-to-date overview of example sites, please see Website@School sites. The 6 small colored rectangles in the center of the header are clickable hotspots to: 1. A help form, 2, Website@School login, 3. TV screen in the schools entrance, 4. Under construction, 5. Intranet login, 6 Webmail.

1.2 Description of theme Rosalina

The header, taking about 20 % of the vertical screen space, has the Website@School logo on the left side. The logo is a clickable map with 6 hotspots. At the right side of the header are the toplinks 'about', 'contact' and under them the Area jumper dropdown menu. Under the logo and the jumper are the breadcrumb trail and the sections menu. The sections (like Welcome, School info, News, , Search and Mypage are expanded by hovering with the mouse over the section titles. Left clicking opens the selected (sub)section or page.
The content is displayed full screen width.
In the footer, taking about 5 % of the screen hight, a small bar contains, from left to right, the bottom links 'disclaimer', 'login', the 'Powered by Website@School' logo, pipe symbol as separator, 'Last updated yyyy-mm-dd, pipe, Copyright symbol, Exemplum Primary School.

2. The theme configuration options

[ configuration options, top ]
[ configuration options, middle1 ]
[ configuration options, middle2 ]
[ configuration options, middle3 ]
[ configuration options, bottom ]

themes_rosalina-top.png
themes_rosalina-middle1.png
themes_rosalina-middle2.png
themes_rosalina-middle3.png
themes_rosalina-bottom.png
NOTICE:
The Bazaar Style Style configuration options, i.e. Static style sheet usage, Static style sheet, Extra style usage (area), Extra style at area level and Extra style usage (node) are discussed in Configuration Manager, paragraph 3.4.1 Bazaar Style Style at area level. For most other configuration options, pleaase see the Frugal theme chapter.

Below are the HV-menu manual pages: config.html, example.html, install-frames.html.

(top)

3. Reset properties of theme

[ reset theme properties ]
configurationmanager_area_theme_reset.png

NOTICE:
Please take notie of this topic, discussed in chapter Configuration Manager, paragraph3.5 Reset properties of theme themename for area n (Area Name).

4. The theme in practice: tips

In this paragraph we discuss some particuar tips that appy to this theme. We assume you have read about the concept of Bazaar Style Style in the Viewpoints chapter, paragraph 4.1 Cascading Style Sheets. And we assume you have studied the practical side of BSS in the Configuration manager chapter, paragraph 3.4 Configure theme 'Theme Name' for area n.
To create images, chapter Theme Sophia, paragraph 4.2 Creating stencil files gives some hints when using free programs and how to create an image.

4.1 Hotspots

As you can see in the configuration options, the hotspots for the Website@School logo image are defined in 2 places, i.e. the number of hotspots you want to use and the actual hotspot(s) with a maximum of 8. A hotspot is defined as: poly(gon) or rect(angle) or circle, its coordinates, the URL the hotspot links to and an URL title tha tis shown when overing over the hotspot. The items are separated wiht a semicolon ';'. Examples:
rect;53,17,157,58;http://exemplum.eu/index.php;Home

circle;173,36,15;http://exemplum.eu/index.php?node=19;How to contact us

poly;0,0,37,37,52,22,52,0;http://exemplum.eu/admin.php;Website@School (admin.php)

-A rectangle is defined by top,left (53 pixels from left side of the image and 17 pixels from top side), bottom right (157 pixels from the left side of the picture and 58 pixels from top side).
-A circle is defined by. center (137,36) and radius (13).
- A polygon is defined by the points that form the polygon. Please figure it out yourself and you will find some kind of triangle.

4.2 Image maps

"In HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination)." Source: Wikipedia

The Website@School logo is mapped to certain areas. If you have patience and a screen ruler in pixels, you can define the coordinates yourself.
In Linux you can use the Pinta panit program which has a pixel ruler, or use GIMP (Gnu Image Manipulation Program). Many how-to's for GIMP can be found on the Internet that explain creating an image map.
In Windows you can use 'Image Mapper 1.0' from TomaWeb http://tomaweb.com/image-mapper.asp. It has excellent documentation. In both GIMP as well as in Image Mapper, you copy the coordinates in the Hotspot.

4.3 For visually impaired

In all themes almost anything in the style can easily be adapted with Bazaar Style Style. This includes, among many other style elements, several kinds of text input fields and their labels, all kinds of buttons, check boxes and radio buttons.
For visually impaired website visitors this feature might be helpful to improve visibility in modules that require input from the visitor. See the Mailpage module as an example.
For the code, please see chapter Theme Frugal, paragraph 4.1 For visually impaired.

(top)

Author: Dirk Schouten <schoutdi (at) knoware (dot) nl>
Last updated: 2013-07-11