Theme Schoolyard

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

1. Introduction

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

1.1 Screenshots of theme Schoolyard

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

Example of theme Schoolyard:

[ theme Schoolyard example ]
themes_schoolyard_example.png

For an up-to-date overview of example sites, please see Website@School sites.

1.2 Description of theme Schoolyard

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.

2. The theme configuration options

[ edit theme properties top ] [ edit theme properties bottom ]
themes_schoolyard_configuere-top.png
theme_schoolyard_configure-bottom.png
Bazaar Style Style configuration options, see Configuration Manager, paragraph 3.4.1 Bazaar Style Style at area level.

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 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