Theme Ruta

Contents

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

1. Introduction

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.

1.1 Screenshots of theme Ruta

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.

1.1.1 Regular screen

Screenshot of theme Ruta in the basic configuration with demonstration data:

[ theme ruta with three columns ]
themes_ruta.png

1.1.2 Regular screen with 2-columns

Screenshot of theme Ruta with a 2-column layout:

[ theme ruta with two columns ]
themes_ruta_two_columns.png

1.1.3 Medium screen

Screenshot of theme Ruta on a medium size screen, e.g. a tablet computer:

[ theme ruta on a medium size screen ]
themes_ruta_medium.png

1.1.4 Small screen

Screenshot of theme Ruta on a small screen, e.g. a smart telephone:

[ theme ruta on a small screen ]
themes_ruta_small.png

1.1.5 Wide screen

Screenshot of theme Ruta on a wide screen:

[ theme ruta on a wide screen ]
themes_ruta_wide.png

1.1.6 Example

An example of theme Ruta:

[ theme ruta example ]
themes_ruta_example.png

1.2 Description 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.

1.2.1 Extended description (regular screen)

(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:

1.2.2 Changes on a medium-sized screen

(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.

1.2.3 Changes on a small screen

(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.

1.2.4 Changes on a wide screen

(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.

(top)

2. The theme configuration

2.1 Basic properties

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.

2.2 Theme configuration

[ theme ruta configuration part one ]
themes_ruta_configuration_1.png

Explanation:

[ theme ruta configuration part two ]
themes_ruta_configuration_2.png

Explanation (continued):

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.

[ theme ruta configuration part three ]
themes_ruta_configuration_3.png

Explanation (continued):

[ theme ruta configuration part four ]
themes_ruta_configuration_4.png

Explanation (continued):

2.3 Reset theme

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.

(top)

3. The theme in practice: tips

3.1 Banners and rotation

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

  1. Welcome
  2. School info
  3. News
  4. Search
  5. MyPage
and there are 4 images in the banner directory program/themes/ruta/banners/large:
  1. calendula.jpg
  2. mentha.jpg
  3. nepeta.jpg
  4. origanum.jpg
and the Banner rotate interval in minutes is set to 3 (default). Then the background image of the header will change according to the table below.

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

3.2 Comma-delimited list of pages to display in sidebar

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.

  1. 'Welcome' is associated with number 9
  2. 'School info' is associated with number 0
  3. 'News' is associated with number 5
  4. 'Search' is associated with number 0
  5. 'MyPage' is not associated with any number, indicated by a dash ('-')

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.

3.3 Additional stylesheet for 2-columns

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 [Ctrl-U] in Firefox to display the source code.

<link rel="stylesheet" type="text/css" href="/program/themes/ruta/style.css"> <link rel="stylesheet" type="text/css" href="/program/themes/ruta/style2.css">

The essence of style2.css is captured in the code snippet below.

@media only screen and (min-width: 980px) { #content_middle { width: 76%; } #rightmargin { display: none; } }

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.

3.4 Additional HTML

The Ruta theme can accomodate four blocks of additional HTML:

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.

#leftmargin_top { background-color: #99FF00; } #leftmargin_bottom { background-color: #00FF99; } #rightmargin_top { background-color: #66CC00; } #rightmargin_bottom { background-color: #009933; }

The result is that all four blocks with HTML now have backgrounds in different shades of green:

[ theme ruta with four green HTML blocks ]
themes_ruta_green_html_blocks.png

3.5 Change transparency

A peek in the stylesheet style.css reveals the following styling associated with the logo in the top left corner of the page.

#logo { float: left; background-color: #FFFFFF; height: 71px; display: inline-block; opacity: 0.8; }

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%.

#logo { opacity: 0.5; }

(top)

Author: Peter Fokker <peter (at) websiteatschool (dot) eu>
Last updated: 2016-07-05