Website@School Users' Guide
Prev		Next

Theme Cornelia

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:

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

themes_cornelia_configure_top.png

themes_cornelia_configure_middle.png

themes_cornelia_configure_bottom.png

Additional stylesheet for 2-columns: Default path: program/themes/cornelia/style2.css
This option operates in conjunction with the configuration option Comma-delimited list of pages to display in sidebar, discussed below. See also the tips paragraph 3.1 Additional stylesheet for 2 columns.
Printer friendly stylesheet: Default: program/themes/cornelia/print.css
This stylesheet defines the page layout for printed pages. See also the tips paragraph 3.2 Printer friendly stylesheet.
Extra style at area level: Default:
#leftmargin { min-height: 300px; } #rightmargin { min-height: 300px; }
The left and right margin heights range from the breadcrumb trail to the footer. In this case the BSS code snippet keeps the footer on a nice place, even when there is little content.

For more information on 'min-height', please see the excellent W3Schools.com site on: CSS min-height Property.
Static style sheet usage, Static style sheet, Extra style usage (area), Extra style at area level, Extra style usage (node): These Bazaar Style Style options are the same for every theme and are extensively discussed in chapter Bazaar Style Style, paragraph 3. BSS at Area level.
Additional text in header: Default: <span style="background-color: #FFFF00;">Welcome to our website</span>
The example speaks for itself. HTML markup can be used here.
Path to directory containing banner image files: Default: program/themes/cornelia/banners
The directory contains default 4 banner pictures.
Please also see the tips paragraph 3.3 Banners and rotation
Banner rotate interval in minutes (0 = no banners at all): Default: 3
On each section menu item or quicklink in the header a different banner picutere can be displayed, which rotates after n minutes. When n = 0 a gray background is displayed. There are a fixed number of banners, i.e. the number of images in a directory.
Please also see the tips paragraph 3.3 Banners and rotation
Additional HTML before menu: Default is an image: <img src="http://exemplum.eu/program/themes/cornelia/origanum.jpg" width="120" height="90" alt="">.
HTML markup can be used. See also the tips paragraph 3.4 Additional HTML.

Additional HTML after menu: Default is text:

<div style="margin-bottom: 30px;">
Exemplum Primary School<br>
1, Rock Bottom street<br>
Gummersbach<br>
Principal: Amelia Cackle
</div>

HTML markup can be used. See also the tips paragraph 3.4 Additional HTML.

Comma-delimited list of pages to display in sidebar: Default: 8,0,5,0,-.
The comma-delimited list uses the node numbers of the items in the header menu bar. These items can either be sections or HTML-pages. In this standard configuration there are 5 items in the menu bar:
1. Page 'Welcome'. Number 8 is the page node number. This page is displayed in the right column of the 3-column style sheet, between the HTML header and the HTML footer. The page has a light-gray background.
2. Section 'School info'. Number 0 indicates that nothing is displayed in the right column between the HTML header and the HTML footer.
3. Section 'News'. Page 5 is displayed in the right column. Same as in 1.
4. Section 'Search'. No page is displayed in the right column. Same as in 2.
5. Page 'MyPage'. The dash - indicates that there is no right column. By using the dash in the comma separated list, the second style sheet is used in which the space to display page content is enlarged.
See also the tips paragraph 3.5 Comma delimited list of pages to display in sidebar.
Additional HTML at top of sidebar: Default: just plain text.
See also paragraph 3.4 Additional HTML.
Additional HTML at bottom of sidebar: Default: just plain text.
See also the tips paragraph 3.4 Additional HTML.
Additional text in footer: Default:
<b><a href="mailto:a.cackle@exemplum.eu">principal: Amelia Cackle</a></b>. Here also HTML markup age can be used.
Save, Done, Cancel: Please see Save, Done, Cancel in the Basic procedures for beginners.

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:

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.

Study the BSS sheet: When you take a peek at http://<yourschool.org>/program/themes/cornelia/style.css. Observe these snippets:
#page { width: 980px; ... #leftmargin { float: left; width: 200px; ... #rightmargin { float: right; width: 200px;
The total width of the page is 980 pixels, divided in the left margin (200 pixels), the content (580 pixels) and the right margin (200 pixels).
Create background image: With mtPaint, create a background image of 980 x 1 (one) pixels. Make it as follows:
- 200 pixels transparent (pixel 0 to 199)
- 580 pixels white (pixel 200 to 779)
- 200 pixels transparent (pixel 780 to 980)
Save the file, for example as bar-200-580-200.png and upload it to the right Area folder.

Bazaar Style Style adaptions: Go to the Area's Theme Configuration and enter the following snippets.


/* Image in complete content and */
/* complete background color light gray */
/* enlarge image to minimal 720px */
#content { 
 background-image: url('/file.php/areas/websiteatschool/bar-200-580-200.png.png'); 
 background-color: #E9E9E9;  
  min-height: 720px;
}

/* The middle part gets white for pages with less than 720 pxiels hight
#content_inside { 
 background-color: #FFFFFF; 
 min-height: 720px;
 padding: 0px 0px 0px 10px;
}

/* The left and right transparencies are filled with light gray */
#leftmargin { background-color: #E9E9E9; }
#rightmargin { background-color: #E9E9E9; }

About:

Padding

From: W3SChools.com
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

Padding - Shorthand property

To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property. The shorthand property for all the padding properties is "padding".

The padding property can have from one to four values.

padding:25px 50px 75px 100px;
- top padding is 25px
- right padding is 50px
- bottom padding is 75px
- left padding is 100px
padding:25px 50px 75px;
- top padding is 25px
- right and left paddings are 50px
- bottom padding is 75px
padding:25px 50px;
- top and bottom paddings are 25px
- right and left paddings are 50px
padding:25px;
- all four paddings are 25px

(top)

Prev	Home	Next
TV Show		Theme Frugal

Author: Dirk Schouten <dirk (at) websiteatschool (dot) eu>

Last updated: 2014-09-06

Contents

Padding

Padding - Shorthand property