2. The theme configuration options
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
![[ Theme Cornelia with 3 c0oluumn static stylesheet ]](themes/themes_cornelia_stylesheet_static.png)
style.css static
stylesheet. The banner picture rotates.
![[ Theme Cornelia with 2 column stylesheet ]](themes/themes_cornelia_stylesheet_2.png)
style2.css additional
stylesheet. Also notice the changed banner picture.
Example of theme Cornelia:
![[ Example of theme Cornelia ]](themes/themes_cornelia_example.png)
For an up-to-date overview of example sites, please see Website@School sites.
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.
![[ Cornelia: theme properties top ]](themes/themes_cornelia_configure_top.png)
![[ Cornelia: theme properties middle ]](themes/themes_cornelia_configure_middle.png)
![[ Cornelia: theme properties bottom ]](themes/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.
program/themes/cornelia/style2.cssprogram/themes/cornelia/print.css
|
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.
<span style="background-color: #FFFF00;">Welcome to
our website</span>program/themes/cornelia/bannersPlease also see the tips paragraph 4.3 Banners and rotation
3<img
src="http://exemplum.eu/program/themes/cornelia/origanum.jpg"
width="120" height="90"
alt="">.
|
8,0,5,0,-.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.0 indicates that
nothing is displayed in the right column between the HTML header and
the HTML footer.5 is displayed in the
right column. Same as in 1.- indictates 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 4.5 Comma delimited list of pages to display in sidebar.
<b><a
href="mailto:a.cackle@exemplum.eu">principal: Amelia
Cackle</a></b>. Here also HTML markup languiage can be
used.![[ reset theme properties ]](themes/themes_all_reset_defaults.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.
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:
|
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.
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:
|
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: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
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:
|
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!
|
#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:
|
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.
0,0,0,0,0 and a grey inmage.
http://exemplum.eu/program/themes/cornelia/style.css (replace
with your own URL) reveals:
|
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.