Contents
1. Introduction
1.1 Screenshot of theme Schoolyard
1.2 Description of theme Schoolyard
2. The theme configuration options
3. Reset properties of theme
4. The theme in practice: tips
4.1 For visually impaired
Schoolyard is a classic
theme, however with many options to change what the visitor of a website will
perceive. This is archieved with the theme configuration options and the
Bazaar Style Style.
Only the specific Schoolyard theme configuration is discussed here. 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 Schoolyard in its basic configuration
in Website@School:
![[ theme axis ]](themes/themes_schoolyard.png)
themes_schoolyard.png
Example of theme Schoolyard:
![[ theme Schoolyard example ]](themes/themes_schoolyard_example.png)
themes_schoolyard_example.png
For an up-to-date overview of example sites, please see Website@School
sites.
Schoolyard is an 'inverted L' theme. That is, the
character 'L' turned clockwise for 90 degrees. In that way, the long
side of the L is the header, the short side the selectable sections and
pages.
Long description:
The header of the theme takes about 10 percent of the screens top horizontal
space. In the header are, on the left side the Website@School logo, in the
middle is the centered Area title 'Exemplum Primary School'.
Below the header is the navigation bar with the section titles:
'Welcome', 'School Info', 'News', 'Search'
and 'MyPage'.
Below the navigation bar, from left to right, a thin colored bar of about 10
pixels high.
Under the thin colored bar is, directly starting from the left side, the
'You are here:' breadcrumb trail.
Under the breadcrum trail, the space is divided in two parts. On the left
side is a vertical space of about 15 percent of the screen width. It contains
from top to bottom the page(s) and (sub)sections and the 'Select
Area' dropdon menu.
The remainder of the screen width, about 85 percent is page content.
At the bottom of the theme is a horizontal bar of about 5 percent of the
screen hight with several items, separated by the pipe symbol '|'.
From left to right: The bottom links 'disclaimer' | 'contact'
| 'Powered by Website@School' logo | © <yyyy-yyyy-yyy> |
Exemplum Primary School | 'print' link.
![[ edit theme properties bottom ]](themes/themes_schoolyard_configure-bottom.png)
themes_schoolyard_configuere-top.png
theme_schoolyard_configure-bottom.png
- Printer friendly stylesheet: Default:
program/styles/schoolyard/print.css The print link produces a printer
friendly version of the page. That is, only page content and the 'Last
updated <yyy-mm-dd<' line.
Bazaar Style Style configuration options, see Configuration Manager,
paragraph 3.4.1
Bazaar Style Style at area level.
![[ 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.
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