Theme Frugal

Contents

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

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

themes_frugal.png

An example of theme Frugal:

themes_frugal_example.png

1.2 Description of theme Frugal

2. The theme configuration

2.1 Basic properties

2.2 Theme configuration

themes_frugal_configuere_theme-top.png

theme_frugal_configure_theme-bottom.png

• Quicklinks section top: Enter the section number that contains the top row of clickable links (about, contact). Default: 17. When entering 0 (zero) you have no quicklinks in the top of the theme.

  To create the toplinks, proceed as follows:

  • In the Page Manager, create a section with a descriptive name, for example quicklinks (top).
  • Make the section invisible if you do not want the section name to appear in the section bar.
  • Find the section number by hovering over the section name.
  • Enter that section number in the themes top links entry field.
  • Create the top link titles. The 'about' and 'contact' are in fact page names. All page properties, basic, advanced and content apply to the toplink pages. You can have as many toplinks as you want.
• Quicklinks section bottom: Same as above for bottom links. Default: 20
• Logo: The path to the logo image. Default: program/graphics/waslogo-284x71.png. The path to this image an be set in three ways:
  • From the CMS program folder, which is: program/graphics/waslogo. No leading slash!
  • From CMS data folder. Use the fileroot program as prefix for the path to the image, for example: /file.php/areas/grade8/basics_pupils_heads.png.

    By the way, this is also the path to the image file as described in the Basic procedures for beginners, paragraph 3.3.3 Insert the image into the web page.

  • From an URL, for example: http://exemplum.eu/oldstuff/schools/school17.png.
• Logowidth: in pixels. Default: 284. The Width defines the width of the image. For 'normal' screens 1024 pixels is a good choice.
  For best results, make the picture the same size. Do not use a .bpm picture. Due to their size, it takes long to download. A better format is .png.
• Logoheight: in pixels. Default: 71.
• Breadcrumb trail [ ] Show breadcrumb trail: Check to have a breadcrumb trail in the theme. Default: checked.
• 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 3.1BSS at Area level.
• Save, Done, Cancel: Please see Save, Done, Cancel in the Basic procedures for beginners.

2.3 Reset theme

(top)

3. The theme in action: tips

3.1 For visually impaired

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

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

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

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

/* 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 Adapt the footer

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

(top)