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
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
Screenshot of theme Rosalina in its basic configuration in
Website@School:
![[ theme axis ]](themes/themes_rosalina.png)
themes_rosalina.png
Example of theme Rosalina
![[ theme rosalina example ]](themes/themes_rosalina_example.png)
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.
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.
- The blue jigsaw is a clickable link to the admin.php page.
- The grey 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 jumer your private Areas become
accessible.
B. When you were already logged in, you can use the grey jigsaw to log out.
Private areas komen beschikbaar, zie uitklap menu.
- The red jigsaw is a link to the Website@School project site.
- 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
School).
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.
![[ configuration options, top ]](themes/themes_rosalina_configure-top.png)
![[ configuration options, middle1 ]](themes/themes_rosalina_configure-middle1.png)
![[ configuration options, middle2 ]](themes/themes_rosalina_configure-middle2.png)
![[ configuration options, middle3 ]](themes/themes_rosalina_configure-middle3.png)
![[ configuration options, bottom ]](themes/themes_rosalina_configure-bottom.png)
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)
![[ reset theme properties ]](themes/themes_all_reset_defaults.png)
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).
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.
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.
"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.
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