Website@School Users' Guide
Prev		Next

Theme Rosalina

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

2. The theme configuration
   2.1 Basic properties
   2.2 Theme configuration
   2.3 Reset theme

3. The theme in practice: tips
3.1 Hotspots
3.2 Image maps

1. Introduction

Rosalina is a theme based on Ger Versluys' HV-Menu. He made a very powerful, however complicated menu, based on Javascript and Bazaar Style Style (BSS). It has over 40 (!) configuration options. Rosalina is a theme for experienced Javascript kiddies. That's why we just 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.

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.

1.1 Screenshots of theme Rosalina

Screenshot of theme Rosalina in its basic configuration in Website@School:

themes_rosalina.png

Example of theme Rosalina

themes_rosalina_example.png

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.

The blue jigsaw is a clickable link to the admin.php page.
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 dropdown 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.

2. The theme configuration

2.1 Basic properties

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.

2.2 Theme configuration

themes_rosalina-top.png

themes_rosalina-middle1.png

themes_rosalina-middle2.png

themes_rosalina-middle3.png

themes_rosalina-bottom.png

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 3.1 BSS at Area level.

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

2.3 Reset theme

The 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 details.

(top)

4. The theme in practice: tips

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 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 that is shown when overing over the hotspot. The items are separated with 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 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.

(top)

Prev	Home	Next
Theme Frugal		Theme Schoolyard

Author: Dirk Schouten <dirk (at) websiteatschool (dot) eu>

Last updated: 2014-09-06

Contents