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:

themes_ruta.png

1.1.2 Regular screen with 2-columns

Screenshot of theme Ruta with a 2-column layout:

themes_ruta_two_columns.png

1.1.3 Medium screen

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

themes_ruta_medium.png

1.1.4 Small screen

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

themes_ruta_small.png

1.1.5 Wide screen

Screenshot of theme Ruta on a wide screen:

themes_ruta_wide.png

1.1.6 Example

An example of theme Ruta:

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:

• a block with configurable HTML field (an image is displayed in the screenshot),
• the menu (in the Welcome section are no pages and sections, thus empty space in the screenshot), and
• another block with configurable HTML field (the Exemplum Primary School address is displayed in the screenshot).

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:

• a block with configurable HTML (some text ('Lorem ipsum ...') is displayed in the screenshot),
• the contents of 0, 1 or more pages on a light-gray background (in this case nothing is displayed in the screenshot), and
• another block with configurable HTML (some text ('Ut enim ...') is displayed in the screenshot).

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:

• a line of configurable HTML text ('webmaster@exemplum.eu' in the screenshot),
• the permanent links 'disclaimer' and 'login', and
• 'Powered by Website@School'.

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 configurable additional text ('Welcome to our website') is suppressed,
• an extra menu button (hamburger button) is added to the navigation bar,
• the breadcrumb trail is suppressed,
• the first column (on the left hand side) is now displayed above the content,
• clicking the hamburger button shows the submenu instead of the first column; clicking it again hides the menu and shows the first column again,
• the sidebar on the right hand side is now displayed below the content,
• the information in the footer is now displayed vertically instead of horizontally

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 website Area title ('Exemplum Primary School') is now also suppressed,
• all items in the navigation bar are suppressed, except the menu button (hamburger button) and the first regular item ('Welcome'),
• the permanent links ('about', 'contact') are suppressed,
• clicking the hamburger button shows both the submenu and the navigation instead of the first column; clicking it again hides the menu and the navigation and shows the first column again.

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

themes_ruta_configuration_1.png

Explanation:

• Quicklinks section top: Enter the section number that contains the top row of clickable links ('about', 'contact'). Enter 0 (zero) to suppress the quicklinks at the top. Default: 0. See section 2.2 Theme configuration in chapter Theme Frugal for a recipe to create toplinks.
• Quicklinks section bottom: Enter the section number that contains the bottom row of clickable links ('disclaimer', 'login'). Enter 0 (zero) to suppress the quicklinks at the bottom. Default: 0.
• Logo: Enter the path to the logo image. Default: 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.
• Logo width: Enter the width of the logo image expressed in pixels. Default: 284.
• Logo height: Enter the height of the logo image expressed in pixels. Default: 71.
• Breadcrumb trail: Check the box to enable a breadcrumb trail in the theme. Default: checked.

themes_ruta_configuration_2.png

Explanation (continued):

• Static style sheet usage: Check the box to use the static style sheet (defined in the next option). Default: checked.
• Static style sheet: Enter the path to the static style sheet to use. Default: 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.
• Additional stylesheet for 2-columns: Enter the path to the static style sheet to use for a 2-column layout. Default: program/themes/ruta/style2.css
  Note that this stylesheet is additional, i.e. in a 2-column layout both the regular stylesheet and this additional stylesheet are loaded. See also section 3.3 Additional stylesheet for 2-columns below.
• Extra style usage (area): Check the box to use the additional style information defined in the next option. Default: checked.
• Extra style at area level: Enter the style information you want to apply to all pages and sections in this area. This information overrules the corresponding styling that was already specified in the static stylesheet(s) specified above. Default: empty.
• Extra style usage (node): Check the box to use the additional style information defined in individual pages and sections. Default: checked. 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.

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.

themes_ruta_configuration_3.png

Explanation (continued):

• Additional text in header: Enter text in this field (e.g. 'Welcome to our website') and it will be added to the header on a regular screen. It will be suppressed on medium-sized and small screens. Default: empty.
• Tipping points: Enter the tipping points (in pixels) where the switch beteen small and medium-sized screens (default 650 pixels) and the switch between medium-sized and regular screens (default 980 pixels) happen, in the form of a comma-delimited list. Default: 650,980.
• Paths to banner directories (one per line): Enter the paths to three directories which hold the rotating banners for small, medium and regular screens. Default:
  program/themes/ruta/banners/small
program/themes/ruta/banners/medium
program/themes/ruta/banners/large
  See section 3.1 Banners and rotation below for details.
• Banner rotate interval in minutes (0 = no banners at all): Enter a duration here to automatically select different banners after that duration. Default: 3. The exact banner that is displayed depends on both the time of day and the currently selected item in the main navigation. See section 3.1 Banners and rotation below for details.
• Additional HTML before menu: Enter HTML-text in this field. This will be displayed above the menu in the left hand column on every page. See section 3.4 Additional HTML below for details. Default: empty.
• Additional HTML after menu: Enter HTML-text in this field. This will be displayed below the menu in the left hand column on every page. See section 3.4 Additional HTML below for details. Default: empty.

themes_ruta_configuration_4.png

Explanation (continued):

• Comma-delimited list of pages to display in sidebar: Enter a page or section number or a dash ('-') for each of the items in the main navigation bar. This controls the visibility of the third column and, if it is visible, the contents of the third column between the two blocks of additional HTML. See section 3.2 Comma-delimited list of pages to display in sidebar below for details. Default: empty.
• Additional HTML at top of sidebar: Enter HTML-text in this field. This will be displayed at the top of the third column on every page. See section 3.4 Additional HTML below for details. Default: empty.
• Additional HTML at bottom of sidebar: Enter HTML-text in this field. This will be displayed at the bottom of the third column on every page. See section 3.4 Additional HTML below for details. Default: empty.
• Additional text in footer: Enter HTML-text in this field (e.g. <a href="webmaster@exemplum.eu">webmaster@exemplum.eu<a>). This will be displayed on the left hand side of the footer. Default: empty.
• [Save], [Done], [Cancel]: see section 2.3.3 Save, Done and Cancel in the chapter Basic procedures for beginners.

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

1. calendula.jpg
2. mentha.jpg
3. nepeta.jpg
4. origanum.jpg

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.

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.

3.4 Additional HTML

The Ruta theme can accomodate four blocks of additional HTML:

• Additional HTML before menu (identifier #leftmargin_top)
• Additional HTML after menu (identifier #leftmargin_bottom)
• Additional HTML at top of sidebar (identifier #rightmargin_top)
• Additional HTML at bottom of sidebar (identifier #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:

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.

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

(top)