Theme Cornelia

Contents

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

2. The theme configuration
   2.1 Basic properties
   2.2 Theme configuration
   2.3 Reset theme

3. The theme in practice: tips
   3.1 Additional stylesheet for 2-columns
   3.2 Printer friendly stylesheet
   3.3 Banners and rotation
   3.4 Additional HTML
   3.5 Comma-delimited list of pages to display in sidebar
   3.6 Change transparency
   3.7 Colored sidebars (under construction)

1. Introduction

Cornelia is a fascinating rich theme, with many configurable options to change what the visitor of this website will perceive. For its features, please see paragraph 2.2 Theme configuration. Tips for this theme are discussed in 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 treated in chapter Theme Frugal, paragraph 2.2 Theme configuration.
Please also check The module in practice and For visually impaired. More Bazaar Style Style features can be found in chapter Bazaar Style Style.

1.1 Screenshots of theme Cornelia

Screenshots of theme Cornelia in its basic configuration with demonstration data:

[ 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_2columns.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

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 transparent 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 transparent 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 centered 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 configurable 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 column 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

2.1 Basic properties

The basic properties, i.e. Edit basic properties of this area are discussed in chapter Configuration Manager, paragraph 3.3 Edit basic properties of this area.

2.2 Theme configuration

[ 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

2.3 Reset properties

The procedure is the same for every theme. Please see Configuration Manager, paragraph 3.5 Reset properties of theme themename for area n (Area Name) for details.

(top)

3. The theme in action: tips

3.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 elements 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 previously 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 endless possibilities of BSS for the user. Please see also the next item.

3.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 file type ('text/x-c; charset=us-ascii'); file skipped. Rename the file (e.g. to 'print') and try again.
*  Files added: 0, files ignored: 1 

3.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 pictures: 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!

3.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 colorize a certain element is useful in making visible the space affected by the element.

3.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 gray image. If you have no entries at all in the list, it will be the same as 0,0,0,0,0 and a gray inmage.

3.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-transparent) or 0.8. Keep the three values equal, they are for different browsers.
Opacity 0 is fully transparent, opacity 100 % or 1 is non-transparent.

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

3.7 Colored sidebars

This is our min site, the sidebars are light gray:
[ theme cornelia colored sidebars ]
themes_cornelia_colored_sidebars1.png
This effect is created with a background image and some BSS (Bazaar Style Style). The only extra program needed is a paint program. A good choise is mtPaint. For details of this program, please see Theme Sophia, paragraph 3.2 Creating stencil files for details about mtPaint.
Below we describe how you can make colored backgrounds.

(top)

Author: Dirk Schouten <dirk (at) websiteatschool (dot) eu>
Last updated: 2014-09-06