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
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
Screenshot of theme Frugal in its basic configuration in
Website@School:
![[ theme axis ]](themes/themes_frugal.png)
themes_frugal.png
For an up-to-date overview of example sites, please see Website@School
sites.
![[ theme frugal ]](themes/themes_frugal_example.png)
themes_frugal_example.png
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'.
![[ edit theme properties bottom ]](themes/themes_frugal_configure-bottom.png)
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.
![[ reset theme properties ]](themes/themes_all_reset_defaults.png)
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)
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.
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>.
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;
}
|
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 {
}
|
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