1. Introduction
1.1 Screenshots of theme Ruta
1.1.1 Regular screen
1.1.2 Regular screen with 2-columns
1.1.3 Medium screen
1.1.4 Small screen
1.1.5 Wide screen
1.1.6 Example
1.2 Description of theme Ruta
1.2.1 Extended description (regular screen)
1.2.2 Changes on a medium-sized screen
1.2.3 Changes on a small screen
1.2.4 Changes 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 Banners and rotation
3.2 Comma-delimited list of pages to display in sidebar
3.3 Additional stylesheet for 2-columns
3.4 Additional HTML
3.5 Change transparency
Ruta is a rich theme, with many configurable options to change what the visitor of this website will perceive. For its features, please see section 2.2 Theme configuration below. Tips and tricks for this theme are discussed in section 3. The theme in practice: tips.
In this chapter we only discuss the features that are specific for this theme. The general features that apply to most themes are discussed section 2.2 Theme configuration in chapter Theme Frugal. Please also check out sections 3. The theme in practice: tips and 3.1 For visually impaired in that same chapter. More Bazaar Style Style features can be found in chapter Bazaar Style Style.
Theme Ruta is a so-called resonsive theme. That means that the layout of a page adapts to the available width of the physical screen. The default tipping points are 650 pixels wide and 980 pixels wide. The maximum width of the page is limited to 1440 pixels.
The various screenshots below illustrate the layout of the theme as seen on screens of different width.
Screenshot of theme Ruta in the basic configuration with demonstration data:
Screenshot of theme Ruta with a 2-column layout:
Screenshot of theme Ruta on a medium size screen, e.g. a tablet computer:
Screenshot of theme Ruta on a small screen, e.g. a smart telephone:
Screenshot of theme Ruta on a wide screen:
An example of theme Ruta:
On a regular screen, theme Ruta has a header spanning the full width of the available space, followed by two or three columns. The page ends with a full width footer.
On a medium sized screen the first and the third column are displayed above and below the middle column instead of left and right. The submenu is replaced with a clickable rectangle with three horizontal lines (also known as a hamburger button). Clicking this menu button shows the submenu, clicking it again hides the submenu.
On a small screen the navigation bar is shortened to two items: the menu button and the first link of the regular navigation menu.
On a wide screen the layout is the same as on a regular screen, be it that the width is limited to 1440 pixels.
(see screenshot in section 1.1.1 Regular screen)
On the left hand side the header has a slightly transparent Website@School logo taking up about 25% of the screen width. The full available width is used to show a rotating banner picture. The image shines through the transparent white of the logo. In the banner image are the website Area title ('Exemplum Primary School') and a configurable additional text ('Welcome to our website'). Below the background image is the navigation bar ('Welcome', 'School info', 'News', 'Search' and 'MyPage'). Below this navigation bar on the right hand side are permanent links 'about' and 'contact', followed by the breadcrumb trail on the left hand side. The total height of the header takes about 20 % of the screen height.
The area with the actual content is divided into either 3 or 2 columns. This is configurable per navigation bar item. The left column, taking about 20% of the screen width, consists of:
In 3-column mode the column in the middle takes about 58% of the screen width and displays the actual content of a page (the welcome text is displayed in the screenshot). The column at the right hand side, taking about 20% of the screen width, consists of:
In 2-column mode the third column (also called sidebar) does not exist, freeing up space for the column with the actual page content. The width of that column increases from 58% to 76% of the available width. (see screenshot in section 1.1.2 Regular screen with 2-columns)
The small footer of the page, taking about 3% of the screen height and the full screen width, consists of:
(see screenshot in section 1.1.3 Medium screen)
Compared to the regular screen, the following changes on a medium-sized screen:
The default tipping point between regular and medium is a width of 980 pixels.
(see screenshot in section 1.1.4 Small screen)
Compared to the medium-sized screen, the following changes on a small screen:
The default tipping point between medium and small is a width of 650 pixels.
(see screenshot in section 1.1.5 Wide screen)
On a wide screen, the width of the page is limited to 1440 pixels. Apart from that the layout is the same as the regular layout.
The basic configuration is the same for all themes. It is discussed in section 3.3 Edit basic properties of this area in chapter Configuration Manager.
Explanation:
program/graphics/waslogo-284x71.png
.
Leave this field blank to suppress a logo. See section 2.2 Theme configuration in chapter
Theme Frugal for a discussion of the various ways
you can specify a path.Explanation (continued):
program/themes/ruta/style.css
. See section 2.2 Theme configuration in chapter
Theme Frugal for a discussion of the various ways
you can specify a path.program/themes/ruta/style2.css
NOTICE:
Most of the options mentioned above are available in other themes too. Please refer to
section 4.1 BSS at Area level in chapter
Bazaar Style Style for an exentsive discussion of
Bazaar Style Stylesheets at area level and more details.
Explanation (continued):
program/themes/ruta/banners/small
program/themes/ruta/banners/medium
program/themes/ruta/banners/large
Explanation (continued):
The procedure is the same for every theme. Please see section 3.5 Reset properties of theme themename for area n (Area Name) in chapter Configuration Manager for details.
The default theme design is based on banner images with the following dimensions in pixels: 720x120 (small screen), 1080x180 (medium-sized screen) and 1440x240 (regular screen). The aspect ratio is 6:1 for all banners. See section 2.2 Theme configuration in chapter Theme Frugal for a discussion of the various ways you can specify a path.
These banners are displayed in the header of the page. The particular banner that is displayed at any time depends on the time of the day and the currently selected main navigation item. The current screen width also plays a part.
Example
Suppose there are 5 items in the navigation bar
program/themes/ruta/banners/large
:
Elapsed time (minutes) |
Selected item | ||||
---|---|---|---|---|---|
Welcome | School info | News | Search | MyPage | |
0:00 | calendula.jpg | mentha.jpg | nepeta.jpg | origanum.jpg | calendula.jpg |
3:00 | mentha.jpg | nepeta.jpg | origanum.jpg | calendula.jpg | mentha.jpg |
6:00 | nepeta.jpg | origanum.jpg | calendula.jpg | mentha.jpg | nepeta.jpg |
9:00 | origanum.jpg | calendula.jpg | mentha.jpg | nepeta.jpg | origanum.jpg |
12:00 | ... | ... | ... | ... | ... |
The resulting effect is a seemingly ever rotating banner that changes without drawing too much attention.
The size of the screen also plays a part: the banner rotating function looks in the different directories specified in Paths to banner directories (one per line) for the banners to show, depending on the screen size in relation to the Tipping points that were specified.
In the demonstration data, small screens (width < 650 pixels) show
banners from program/themes/ruta/banners/small
, medium
screens (650 < width < 980 pixels) use program/themes/ruta/banners/medium
and the others use banners from program/themes/ruta/banners/large
.
An example upload path for regular banners would be
/areas/exemplum/banners/regular
. Note the leading slash! See section
2.2 Theme configuration in
chapter Theme Frugal for a discussion
of the various ways you can specify a path.
NOTICE:
The reason to work with different directories for different banners is
that it would be a waste to send a large image (1440x240) to a device
that has a screen of only 640x480. Using small images for small
devices saves download time and bandwidth
Each entry in this comma-delimited list (e.g. 9,0,5,0,-
)
corresponds with an item in the main navigation menu. In the example given
the relations are as follows.
Whenever the page 'Welcome' is selected from the main navigation, the theme looks for page or section 9. If there is a page 9 and it is a plain HTML page (module 'htmlpage'), the contents of that page is displayed between the Additional HTML at top of sidebar and the Additional HTML at bottom of sidebar. If there is a section 9, the contents of all plain HTML pages in that section are displayed in the sidebar. If the page is not a plain HTML page (as is the case in this example), no additional page is displayed in the sidebar. The sidebar itself remains visible, including the two blocks of additional HTML.
Whenever one of the sections 'School info' or 'Search' are selected, the '0' indicates that no addtional page will be displayed in the sidebar. However, the sidebar itself remains visible, including the two blocks of additional HTML.
Whenever the section 'News' is selected, the contents of page 5 (which is a plain HTML page) is displayed in the third column, sandwiched between the two blocks of additional HTML. (See the example in section 3.4 Additional HTML for a screenshot showing the 'News' section.)
Finally, whenever the section 'MyPage' is selected, the sidebar is suppressed completely, effectively forcing the page into a two-column layout. This result is achieved by loading an additional stylesheet, see section 3.3 Additional stylesheet for 2-columns below.
NOTICE
An empty field or a missing number is equivalent to a '0' (zero).
The effect is that the sidebar is displayed, but without the contents
of an additional page.
When you add, for example a sixth section in the main menu, and you want
to display some page in the sidebar column, you have to add the corresponding
page number to the list. When you do not add a page number, i.e. do nothing
or forgot to add it, it is as if you added a 0 (zero) to the list. If you
have no entries at all in the list, it will be the same as
0,0,0,0,0,0
.
If an entry in the navigation bar is associated with a dash in the
Comma-delimited list of pages to display in the sidebar,
e.g. 'MyPage', the Additional stylesheet for 2-columns,
e.g. style2.css
, is used together with the Static
stylesheet, e.g. style.css
.
In reality, entries in style.css
(which is loaded first) are
overruled by entries in style2.css
(which is loaded
next). You can see this by examining the source code of the page
'MyPage'. Use in Firefox to display the
source code.
The essence of style2.css
is captured in the code snippet below.
This code instructs the browser to set the width of the middle column to
76%, overruling the 58% that was specified earlier in style.css
.
If you want to overrule the styling from style.css
or
style2.css
, you can use BSSS either at area level (in the field
Extra style at area level discussed above) or at section or
page level. See also the discussion of Extra style at page/section
level in sections 3.3 Advanced: Edit
advanced properties of page nn and 4.3
Advanced: Edit advanced properties of section nn in chapter Page manager.
The Ruta theme can accomodate four blocks of additional HTML:
#leftmargin_top
)#leftmargin_bottom
)#rightmargin_top
)#rightmargin_bottom
)You are free to enter any raw HTML code into these four fields. In the
demonstration data the block before the menu contains an image
origanum.jpg
, just for fun. The block after the menu contains
the address of the Exemplum Primary School while the two blocks in the
sidebar are just filled with text.
These blocks are visible on every page and can be used to convey important information such as an address, a motto, an image of the headmaster or whatever else you can think of. You might even be able to embed a link to a third party page counter if you want; the possibilities are endless.
Subsequently you can change the styling of these elements by adding to one of the BSSS fields, e.g. the field Extra style at area level discussed above.
Example
Enter the following code to the Extra style at area level field.
The result is that all four blocks with HTML now have backgrounds in different shades of green:
A peek in the stylesheet style.css
reveals the following
styling associated with the logo in the top left corner of the page.
By overruling the opacity
in your BSSS code, e.g. in the
Extra style at area level field, you can change the logo
background that is set to be 80% opaque (non-transparent) to be more opaque
by setting the value to say 0.9
or more transparent by setting
the value to say 0.6
. Opacity 0 is fully transparent, opacity
100% or 1.0 is non-transparent. Below is an example of an opacity of
40%.