![[ theme frugal ]](themes/themes_frugal.png)
themes_frugal.png
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
Please also check The module in practice and For visually impaired. More Bazaar Style Style features can be found in chapter Bazaar Style Style.
Screenshot of theme Frugal in its basic configuration with demonstration data:
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/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/themes_frugal_wide.png)
An example of theme Frugal:
![[ theme frugal ]](themes/themes_frugal_example.png)
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.
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'.
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.
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.
![[ theme frugal edit properties upper half ]](themes/themes_frugal_configure-top.png)
![[ theme frugal edit properties lower half ]](themes/themes_frugal_configure-bottom.png)
Explanation:
To create the toplinks, proceed as follows:
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.
/* 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;
}
/* individual styling for different input elements (currently unused) */
input.textfield {
}
input.passwordfield {
}
label.checkboxfield {
}
input.checkboxfield {
}
label.radiofield {
}
input.radiofield {
}
input.filefield {
}
/* 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);
}
/* 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!
#quickbottom {
height: 20px;
background-color: #DDD;
text-align: center;
font-size: 0.95em;
}