Theme Frugal

Contents

1. Introduction
   1.1 Screenshots of theme Frugal
   1.2 Description of theme Frugal
      1.2.1 Theme Frugal on a regular screen
      1.2.2 Theme Frugal on a small screen
      1.2.3 Theme Frugal on a wide screen

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

3. The theme in practice: tips
   3.1 For visually impaired
      3.1.1 Styling: labels, input fields and buttons
      3.1.2 Styling: input field details
      3.1.3 Styling: buttons details
   3.2 Replace the Website@Schoool logo
   3.3 Adapting the footer

1. Introduction

Frugal is the basic Website@School theme. For its features, please see paragraph 2.2 Theme configuration. In theme Frugal many options that apply to other themes are discussed. Tips are discussed in 3. The theme in practice:tips.

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 Frugal

Screenshot of theme Frugal in its basic configuration with demonstration data:

[ theme frugal ]
themes_frugal.png

Screenshot of theme Frugal in its basic configuration with demonstration data, displayed on a smaller screen, e.g. a smart telephone:

[ theme frugal on a smaller screen ]
themes_frugal_small.png

Screenshot of theme Frugal in its basic configuration with demonstration data, displayed on a wide screen, e.g. a a wide screen computer monitor:

[ theme frugal on a wide screen ]
themes_frugal_wide.png

An example of theme Frugal:

[ theme frugal ]
themes_frugal_example.png

1.2 Description of theme Frugal

Theme Frugal is a so-called responsive theme. That means that the layout of a page adapts to the available width of the physical screen. The default tipping points are 700 pixels wide and 1200 pixels wide.

1.2.1 Theme Frugal on a regular screen

For screens with a width between 700 and 1200 pixels the Frugal theme looks as follows.

The header of the theme takes about 20 percent of the screens top horizontal space. In the header area, on the left side is the Website@School logo, in the middle the Area title 'Exemplum Primary School' and, in the upper righthand 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 height. In it are the centered Website@School logo, and to the right of the logo, the bottom links 'disclaimer' and 'login'.

1.2.2 Theme Frugal on a small screen

For screens smaller than 700 pixels, the layout changes as follows.

The page begins with the Website@School logo, followed by the the Area title 'Exemplum Primary School'. The main menu items ('Welcome', 'School Info', 'News', 'Search' and 'MyPage') have been replaced by a clickable blue rectangle with three horizontal lines. This icon is also known as a hamburger button. Clicking the menu button scrolls the page to the menu at the bottom of the page, see below. This menu button is followed by the actual content of the page and the Area jumper dropdown menu.

The main menu is displayed near the bottom of the screen. The currently selected item is blue. If there is a submenu (not in the case of the screenshot above), it is displayed under the main menu. The currently selected submenu item is colored red.

The page ends with the 'Powered by Website@School' link, followed by the links 'disclaimer' and 'login'.

The basic idea of this design is to present the information from top to bottom rather than from left to right, in order to keep the content readable. Also, the content is presented near the top of the page as much as possible to prevent unnecessary vertical scrolling. Note that it is possible (via the blue 'hamburger button') to navigate to any page via the menus near the bottom of the page.

NOTICE:
The links at the top of the page ('about' and 'contact') have been sacrificed in order to create more space for the content. If these links are really important, you may want to move them to the links at the bottom (next to 'disclaimer' and 'login') because those links are always available.

1.2.3 Theme Frugal on a wide screen

On a wide screen, with more than 1200 pixels, the page stops growing sideways. The width of the header, the menu, the content area and the footer is limited to 1200 pixels. The remaining space on the wide screen is shown as a grid of jigsaw pieces. This is done to limit the width of the lines to a length that is still readable, even on a wide screen.

(top)

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

[ theme frugal edit properties upper half ]
[ theme frugal edit properties lower half ]
themes_frugal_configure-bottom.png
themes_frugal_configure-top.png

Explanation:

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.

(top)

3. The theme in action: tips

In this paragraph we discuss some particluar tips that apply to this theme. We assume you have read about the concept of Bazaar Style Style in the Viewpoints chapter, paragraph 3.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 3.2 Creating stencil files gives some hints when using free programs and how to create an image.

3.1 For visually impaired

In all themes almost anything in their 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. For example the Mailpage , the Althing (weblog) and the Confab (chat) modules.

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

3.1.1 Styling: labels, input fields 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 color */
input,
select,
textarea {
  background-color: #RRGGBB;
}
option {
  font-family: mono;
}

3.1.2 Styling: input field 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 {
}

3.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);
}

3.2 Replace the Website@School logo

Below is the example to replace the Website@School logo with the one of your class. You can copy and paste it on the area of your class. Adjust the path and file name of the picture. Go: Configuration Manager > Areas > pencil (class area) > Theme configuration > Extra style at area level.
/* Do not display the Website@School logo */
#logo {
display: none;
}

/* The code below:
/* Sets the background image path, */
/* do not repaeat it */
/* and positions the image 40 pixels from left and 20 px from the top */ 
#header {
background-image: url('http://exemplum.eu/file.php/areas/seniors/basics_pupils_heads.png');
background-repeat: no-repeat;
background-position: 40px 20px;
}

NOTE: Keep the image the same size as the Website@School logo, i.e. 284x71 pixels. Or enlarge it. Experiment!

3.3 Adapting the footer

#quickbottom {
   height: 20px;
   background-color: #DDD;
   text-align: center;
   font-size: 0.95em;
}

(top)

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