Theme Frugal

Contents

1. Introduction
   1.1 Screenshots of theme Frugal
   1.2 Description of theme Frugal

2. The theme configuration options

3. Reset properties of theme

4. The theme in practice: tips
   4.1 For visually impaired
      4.1.1 Styling: labels, input fields and buttons
      4.1.2 Styling: input field details
      4.1.3 Styling: buttons details

1. Introduction

Frugal is the basic Website@School 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.
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 Frugal

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

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

[ theme frugal ]
themes_frugal_example.png

1.2 Description of theme Frugal

The header of the theme takes about 20 percent of the screens top horizontal space. In the header are, on the left side the Website@School logo, in the middle the Area title 'Exemplum Primary School' and, in the upper right corner, two top links 'about' and 'contact' are located. At the bottom of the header is the breadcrumb trail.
Below the header are the menu, the content and the Area jumper dropdown menu. The menu takes about 20 % of screen space and contains the section titles: 'Welcome', 'School Info', 'News', 'Search' and 'MyPage'. The content takes about 60 % of screen space and the Area jumper dropdown menu the remaining 20 %.
The footer of the theme is a horizontal bar of about 5 percent of the screen hight. In it are the centered Website@School logo, and right from the logo, the bottom links 'disclaimer' and 'login'.

2. The theme configuration options

[ edit theme properties top ] [ edit theme properties bottom ]
themes_frugal_configuere_theme-top.png
theme_frugal_configure_theme-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.

3. Reset properties of theme

[ reset theme properties ]
configurationmanager_area_theme_reset.png

Resetting the theme properties restores the properties as they were set during the installatoin of the theme.

NOTICE: Take care! It is a good idea to copy and paste complex style information to a safe location before resetting a teme.

(top)

4. The theme in action: 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

All themes have excellent possibilities to style all visual elements with Bazaar Style Style. Style elements like hotkeys for labels, indication of non-editable fields, failing input validation, editable fields, styling for elements like checkboxes and radiobuttons and generic buttons like [OK] or [Sava] can all be styed in BSS.

The styling of the theme can be found in the Static stylesheet. For theme Frugal it's located at program/styles/base.css. You can read it by visiting http://yourschool.org/program/styles/style.css. For all other themes, you find the style.css in http://yourschool.org/program/themes/<themename>.

4.1.1 Styling: labels, input filelds and buttons

NOTICE:
The hexadecimal color values in the code below, i.e. #RRGGBB, have to be adjusted to the schools taste.

/* visual indication of the hotkey in a label is done via a U within a LABEL */
label u {
  font-weight: bold;
  text-decoration: underline;
}
/* visual indication of the non-editable fields by 'dimming' the corresponding label */
label.viewonly {
  color: #RRGGBB;
}
/* visual indication of an input field that didn't pass validation */
.error {
  color: #RRGGBB;
}
/* visual indication of editable fields using a slightly contrasting background colour */
input,
select,
textarea {
  background-color: #RRGGBB;
}
option {
  font-family: mono;
}

4.1.2 Styling: input fileld details

Below is the code for individual input fields. Currently it is unused.

/* individual styling for different input elements (currently unused) */
input.textfield {
}
input.passwordfield {
}
label.checkboxfield {
}
input.checkboxfield {
}
label.radiofield {
}
input.radiofield {
}
input.filefield {
}

4.1.3 Styling: button details

Below is the code for the buttons.

/* generic button style; individual background images follow */
input.button {
  background-color: #RRGGBB;
  background-repeat: no-repeat;
  margin-right: 30px;
  font-weight: bold;
}
input.button_save {
  padding-left: 20px;
  background-image: url(../graphics/button_save.gif);
}
input.button_cancel {
  padding-left: 20px;
  background-image: url(../graphics/button_cancel.gif);
}
input.button_delete {
  padding-left: 20px;
  background-image: url(../graphics/button_delete.gif);
}
input.button_previous {
  padding-left: 20px;
  background-image: url(../graphics/button_previous.gif);
}
input.button_next {
  padding-left: 20px;
  background-image: url(../graphics/button_next.gif);
}
input.button_ok {
  padding-left: 20px;
  background-image: url(../graphics/button_ok.gif);
}
input.button_edit {
  padding-left: 20px;
  background-image: url(../graphics/button_edit.gif);
}

(top)

Author: Dirk Schouten <schoutdi (at) knoware (dot) nl> Last updated: 2013-07-11