1.1 Screenshot of theme
1.2 Description of theme
2. The theme configuration
2.1 Basic properties
2.2 Theme configuration
2.3 Reset theme
3. The theme in practice: tips
Rosalina is a theme based on
Ger Versluys' HV-Menu. He made a very powerful, however
(BSS). It has over 40 (!) configuration options. Rosalina is a
supply the HV-menu manuals. For its features, please see
paragraph 2.2 Theme configuration. Tips for this
theme are discussed in 3. The theme in practice:tips.
3.2 Image maps
In this chapter we only discuss the features that are specific
for this theme. The general features that apply to most themes
are treated in chapter Theme Frugal, paragraph 2.2 Theme configuration.
Please also check The module in practice and For
visually impaired. More Bazaar Style Style features can be
found in chapter Bazaar Style Style.
Screenshot of theme Rosalina in its basic configuration in
Example of theme Rosalina
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.
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
- The blue jigsaw is a clickable link to the admin.php
- The gray jigsaw is a clickable link to:.
A. When you are not logged in, you can log in via the jigsaw.
You stay on the website, and in the Area jumper your private
Areas become accessible.
B. When you were already logged in, you can use the gray jigsaw
to log out. Private areas become available, please see the
- The red jigsaw is a link to the Website@School project
- The logo text Website@School
has 3 hotspots:
- 'Website' links to Home (Exemplum Primary School)
- '@' links to 'How to contact us' and
- 'School' links to 'Area 1 (Exemplum Primary
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.
The basic properties,
i.e. Edit basic properties of this area are
discussed in chapter Configuration Manager,
paragraph 3.3 Edit
basic properties of this area.
Static style sheet usage, Static style sheet, Extra
style usage (area), Extra style at area level, Extra style usage
(node): These Bazaar Style Style options are Style Style options
are the same for every theme and are extensively discussed in
chapter Bazaar Style Style, paragraph 4.1 BSS at Area level.
Below are the HV-menu manual pages: config.html,
procedure is the same for every theme. Please see Configuration Manager, paragraph 3.5 Reset properties of theme
themename for area n (Area Name) for
In this paragraph we discuss
some particular tips that apply 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
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.
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 that is shown when overing over the
hotspot. The items are separated with a semicolon ';'.
circle;173,36,15;http://exemplum.eu/index.php?node=19;How to contact us
-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
"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
-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
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 paint 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.
Author: Dirk Schouten <dirk (at) websiteatschool (dot) eu>
Last updated: 2014-09-06