Theme Schoolyard


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

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

1. Introduction

Schoolyard is a classic theme, however with many options to change what the visitor of a website will perceive. 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 Schoolyard

Screenshot of theme Schoolyard in its basic configuration with demonstration data: configuration in Website@School:

[ theme schoolyard ]

Example of theme Schoolyard:

[ theme Schoolyard example ]

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 breadcrumb 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' dropdown 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

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

[ edit theme properties top ] [ edit theme properties bottom ]

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.

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.


Author: Dirk Schouten <dirk (at) websiteatschool (dot) eu>
Last updated: 2014-09-06