Theme Cornelia

Contents

1. Introduction
   1.1 Screenshots of theme Cornelia
   1.2 Description of theme Cornelia

2. The theme configuration options

3. Reset properties of theme

4. The theme in practice: tips
   4.1 Additional stylesheet for 2-columns
   4.2 Printer friendly stylesheet
   4.3 Banners and rotation
   4.4 Additional HTML
   4.5 Comma-delimited list of pages to display in sidebar
   4.6 Change transparancy
   4.7 For visually impaired

1. Introduction

Cornelia is a fascinating rich theme, with many configurable options to change what the visitor of this website will perceive. This is archieved with two stylesheets, the theme configuration options and the Bazaar Style Style.
Only the specific Cornelia theme configuration is discussed here. The general configuration options are treated in chapter Theme Frugal.
The Bazaar Style Style features are discussed in the chapter Configuration Manager, paragraph 3.4.1 Bazaar Style Style at area level

1.1 Screenshots of theme Cornelia

Screenshots of theme Cornelia in its basic configuration in Website@School:
[ Theme Cornelia with 3 c0oluumn static stylesheet ]
themes_cornelia_stylesheet_static.png
NOTICE:
The above screenshot uses the 3-column style.css static stylesheet. The banner picture rotates.
[ Theme Cornelia with 2 column stylesheet ]
themes_cornelia_stylesheet_2.png
NOTICE:
The above screenshot uses the 2-column style2.css additional stylesheet. Also notice the changed banner picture.

Example of theme Cornelia:

[ Example of theme Cornelia ]
themes_cornelia_example.png

For an up-to-date overview of example sites, please see Website@School sites.

1.2 Description of theme Cornelia

Briefly, the theme has a header over the full width of the screen. Under the header are three or two columns, depending on the stylesheet. The small footer is also over the screens full width.

Extended description:
The header has, on the left side, a slightly transparant Webiste@School logo taking about 30 % of the screen width. The full screen width is taken by a rotating banner picture. The image is slightly visible in the transparant white of the logo. In the banner image are the website Area title and a configurable additional text. Below the background image is the sections menu bar. Below the sections bar are the left centered breadcrumb trail and the right centerend quicklinks 'about', 'contact' and 'print'. The total height of the header takes about 20 % of the screen height.
The content is divided in 3 or 2 (configurable) columns. In 3 column mode the left column, taking about 20 % of the screen width, consists from top to bottom of: a configurablle HTML field (now an image), the menu (in the Welcome section are no pages and sections, thus empty space now) and below the empty menu space a configurable HTML field (now the Exemplum Primary School address). The middle column takes about 60 % of the screen width and displays the welcome text. The right column takes about 20 % of the screen width and consists, from top to bottom of a configurable HTML field (now some 'Lorem ipsum' text), the content of a page on a light-gray background and a HTML configurable field (now 'Lorem ipsum' text). In 2 coumn mode the right column does not exist, thus the space for content becomes about 80 % of the screen width.
The small footer of the site, taking about 3 % of the screen height and the full screen width, consists of a configurable HTML text, a disclaimer and the 'login' and 'Powered by Website@School' links.

(top)

2. The theme configuration options

[ Cornelia: theme properties top ]
[ Cornelia: theme properties middle ]
[ Cornelia: theme properties bottom ]
themes_cornelia_configure_top.png
themes_cornelia_configure_middle.png
themes_cornelia_configure_bottom.png

NOTICE:
The Bazaar Style Style configuration options, i.e. Static style sheet usage, Static style sheet, Extra style usage (area), Extra style at area level and Extra style usage (node) are discussed in Configuration Manager, paragraph 3.4.1 Bazaar Style Style at area level. For most other configuration options, pleaase see the chapter Frugal theme.

(top)

3. Reset properties of theme

[ reset theme properties ]
configurationmanager_area_theme_reset.png

Resetting the theme properties restores the properties as they were set during the installatoin of the theme.

NOTICE: Take care! It is a good idea to copy and paste complex style information to a safe location before resetting a teme.

4. The theme in action: tips

4.1 Additional stylesheet for 2-columns

If, in the field 'Comma delimited list of pages to display in siedebar', the dash '-' is set (indicating that the two column stylesheet is to be used for an item in the main menu), then stylesheet style2.css is used in stead of style.css. In reality, style.css is overruled by style2.css as can be seen in this code snippet (line 11 and 12) from the MyPage page source. Use [Ctrl+U] in Firefox to display the source:
<link rel="stylesheet" type="text/css" href="/program/themes/cornelia/style.css">
<link rel="stylesheet" type="text/css" href="/program/themes/cornelia/style2.css">
To overrule style eleents of the 2-column stylesheet, you can use BSS in the Advanced properties of MyPage (node 16).
When the 2-column stylesheet is used on a section, all underlaying pages will have 2-column style. If you want to change the style of one or more pages in that section, again use BSS, but now at node (page) level. Now you can overrule the prefiously defined style elements of style.css or style2.css and BSS at Area and section level. This is an illustration of the power and almost enless possibilities of BSS for the user. Please see also the next item.

4.2 Printer friendly stylesheet

The printed page stylesheet print.css is used to change the markup of printed pages, for example without menu's or with a different lay-out. In fact print2.css overrules other stylesheets, as can be seen when selecting to print the MyPage page (click the 'print' link) and observe the page source on line 11, 12 and 13. Use Ctrl+U in Firefox:
<link rel="stylesheet" type="text/css" href="/program/themes/cornelia/style.css">
<link rel="stylesheet" type="text/css" href="/program/themes/cornelia/style2.css">
&ltlink rel="stylesheet" type="text/css" href="/program/themes/cornelia/print.css">
The stylesheet print.css cannot be treated with BSS. You can change the markup of a printed page by changing the the print.css stylesheet yourself. The stylesheet can be found at:
http://exemplum.eu/program/themes/cornelia/print.css
Save the file, for example as print2.css, change its content with a plain text editor and, with the File Manager, upload it to, for example:
/areas/exemplum and change the file path in the field 'Printer friendly stylesheet'. to:
/areas/exemplum/print2.css. Observe the leading slash!

Bug after uploading CSS:

*  Error: mismatch between filename ('print.css') and filetype ('text/x-c; charset=us-ascii'); file skipped. Rename the file (e.g. to 'print') and try again.
*  Files added: 0, files ignored: 1 

4.3 Banners and rotation

A banner image can best be created with a size of 950 x 170 pixels in .png or .jpg format. Larger image sizes, both in dimensions and bits, take longer to download and make the website 'slow'.

The following example explains the banner rotation
Suppose we have 5 menu items and 1 toplink: a, b, c, d, e and f. We have 7 banner picutres: 1, 2, 3, 4, 5, 6, 7. The rotations is set to every 3 minutes. This results in:


Sections + link: a b c d e f  
First 3 minutes: 1 2 3 4 5 6
After 3 minutes: 2 3 4 5 6 7
After 3 minutes: 3 4 5 6 7 1
et cetera

The result is a seemingly ever rotating banner that changes without drawing too much attention.

An upload path to enter in 'Path to directory containing banner image' could be:
/areas/exemplum/bannerpics/. Note the leading slash!

4.4 Additional HTML

The left- and right columns' top and bottom have an interesting code snippet in the style sheet. As example the left top margin:
#leftmargin_top {
  margin: 15px;
}
The other margins are named #rightmargin_bottom et cetera. It means that even if nothing is entered in the 'Additional HTML...'field, there still is a margin.

A small experiment: remove the picture and put a 'non breakable space':   in the 'Additional HTML ...' field. Make the space visible by giving it a color and let's have no margin. In the BSS field, enter for example:

#leftmargin_top {
background-color:#FF00FF;
margin: 0px;
}
Observe the result: a nice purple bar. Add some height with height: 100px;; result even nicer. All kinds of tricks are possible here. W3Schools is your friend.

NOTICE:
The trick to colorise a certain element is useful in making viible the space affected by the element.

4.5 Comma-delimited list of pages to display in sidebar

When you add, for example a sixth section in the main menu, and you want to display some page in the right column, you have to add the page node number to the list. When you do not add the node number, i.e. do nothing or forgot to add it, it is as if you added a 0 (zero) to the list and you get a grey image. If you have no entries at all in the list, it will be the same as 0,0,0,0,0 and a grey inmage.

4.6 Change transparency

A peek in the stylesheet on http://exemplum.eu/program/themes/cornelia/style.css (replace with your own URL) reveals:
#logo {
  float: left;
  height: 145px;
  background-color: #FFFFFF;
  filter: alpha(opacity=80);
  opacity: 0.8;
  -moz-opacity:0.8;
}

It is the background color (white in this case) that is made 80 % opaque (non-transparant) or 0.8. Keep the three values equal, they are for different browsers.
Opacity 0 is fully transparant, opacity 100 % or 1 is non-transparant.

For more info, please see the excellent W3Schools.com site on: CSS3 opacity Property.

4.7 For visually impaired

In all themes almost anything in the style can easily be adapted with Bazaar Style Style. This includes, among many other style elements, several kinds of text input fields and their labels, all kinds of buttons, check boxes and radio buttons.
For visually impaired website visitors this feature might be helpful to improve visibility in modules that require input from the visitor. See the Mailpage module as an example.
For the code, please see chapter Theme Frugal, paragraph 4.1 For visually impaired.

(top)

Author: Dirk Schouten <schoutdi (at) knoware (dot) nl>
Last updated: 2013-07-11