Under
construction!!
Contents
1. Introduction
1.1 Screenshot of theme Sophia
1.2 Description of theme Sophia
2. The theme configuration options
3. Reset properties of theme
4. The theme in practice: tips
4.1 Changing background colors
4.2 Crecating stencil files
4.3 Different stencils
4.4 The path to your own stencil
files
4.5 For visually impaired
Sophia is a joyful theme
with many options to change what the visitor of a website will perceive. This
is archieved with the theme configuration options and the Bazaar Style
Style.
Only the specific Sophia 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
Screenshot of theme Sophia in its basic configuration in
Website@School:
![[ theme axis ]](themes/themes_sophia.png)
themes_sophia.png
Example of theme Sophia:
![[ theme sophia ]](themes/themes_sophia_example.png)
themes_sophia_example.png
For an up-to-date overview of example sites, please see Website@School
sites.
A short,
general description: an 'inverted L' theme. That is, the character
'L' turned 90 degrees clockwise. In that way, the long side of the L
is the header showing the sections, while the short side shows the items,
selected in the header.
Long description:
In the header, from left to right: a logo, the sections 'Welcome',
'School info', 'News', 'Search' and 'My Page'
These section names are embedded in configurable (default ellipse) colored
shapes. Above the sections are a configurable text and the top links.
Below the header is the breadcrumb trail.
Below the breadcrumb trail are the menu and content panes. The menu pane,
taking about 20 % of the screen width, is a vertical pane (the short side of
the inverted L), containing a configurable space (default a demo picture) and
below that the content of the selected section, i.e. pages and/or
sub-sections. At the bottom of the menu pane is a configurable text, in the
demo it contains the address of the Exemplum Primary School and the nema of
its principal. The remaining 80 % at the right side of the menu pane is page
content.
The footer contains a configurable line (now an e-mail-address), the bottom
links and the 'Powered by Website@School' link.
(top)
![[ sophia theme properties top ]](themes/themes_sophia_configure-top.png)
![[ sophia theme properties top ]](themes/themes_sophia_configure-middle.png)
![[ sophia theme properties top ]](themes/themes_sophia_configure-bottom.png)
themes_sophia_configure-top.png
themes_sophia_configure-middle.png
themes_sophia_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
Frugal theme chapter.
Special in this theme is the 'printer friendly stylesheet':
- Additional text in header: The text is
alighned right. Default: Exemplum Primary School
-
Aditional HTML before menu: Default is an
image:
<img src="http://exemplum.eu/program/themes/sophia/calendula.jpg" width="120" height="90" alt="">
|
'Anything' can be put here, text with HTML markup,
images, etc.
-
Additional HTML after menu: Same
possibilities as as above. Default:
<div style="margin-bottom: 30px;">
Exemplum Primary School<br>
1, Rock Bottom street<br>
Gummersbach<br>
Principal: Amelia Cackle
</div>
|
- Additional text in footer: Default the
reply-to address from the webmaster is shown here. Any address or text can
be entered here, beautified with HTML.
(top)
![[ reset theme properties ]](themes/themes_all_reset_defaults.png)
themes_all_reset_defaults.png
NOTICE:
Please take note of this topic, discussed in chapter Configuration Manager,
paragraph3.5 Reset
properties of theme themename for area n (Area Name).
(top)
Remember
the BSS code snippet in Extra style at area level:
#navigation ul li { background-image: url('http://exemplum.eu/program/themes/sophia/stencil0.png'); }
#navigation ul li.navigation_button5 { background-color: #FF3399; }
|
Now take a look in the style sheet by navigating to
http://exemplum.eu/program/styles/sophia/style.css. Look for this part:
/* Customised colours for navigation buttons (default #666666) */
#navigation ul li.navigation_button1 { background-color: #FF0000; }
#navigation ul li.navigation_button2 { background-color: #3333FF; }
#navigation ul li.navigation_button3 { background-color: #FF9933; }
#navigation ul li.navigation_button4 { background-color: #66CC66; }
#navigation ul li.navigation_button5 { background-color: #9933FF; }
#navigation ul li.navigation_button6 { background-color: #FF3399; }
|
Now you can see it's a piece of cake to change the background
colors of the buttons, for example, add:
#navigation ul li.navigation_button1 { background-color: #FF0000; }
|
Maybe it's a nice exercise to get rid of the 'Welcome to our
website' text and make a bigger, fancier and beautiful header.
We will now
play with this piece of BSS in the 'Extra style at area level' field:
#navigation ul li { background-image: url('http://exemplum.eu/program/themes/sophia/stencil0.png'); }
#navigation ul li.navigation_button5 { background-color: #FF3399; }
|
The 'background-image' is in fact an image that has the same
color as the header background color. But the image has a transparent
'hole' in which the section text is visible on a colored background.
The 'hole' is the stencil file. Three stencils are available:
- stencil0.png: Default, an ellipse button (looks like a tubled 0)
- stencil6.png: a hexagon button (six angles)
- stencil8.png: a drum shped button
By selecting one of the stencil files the shape can be altered.
It's not difficult to create your own stencil image. What is needed is
a paint program with which you can create .gif images and can make parts of
it transparent. Ultimate Paint is a simple freeware paint program that can do
this work effectively. It can be found at http://www.ultimatepaint.com/download.php/.
Look for: Ultimate Paint Standard 2.88 LE (Freeware Edition). A citation from
the blurb: "Can be used without any limitations. No catch, it does not
contain any adware or spyware! Download, uninstall the previous version,
unzip the archive and start setup.exe. Size: 1734 kB".
In Linux, Mac and Windows the free GIMP (GNU Image Manipulation Program) can
be used, or as a simple alternative in Linux: Pinta. A Pinta manual: http://www.howtoforge.com/editing-images-with-pinta
Stencil file with Unlimited Paint
Proceed as follows to make a stencil file:
Steps taken from http://www.seabreezecomputers.com/tips/ultimate.htm.
![[ theme sophia, different stencils ]](themes/themes_sophia_different_stencils.png)
themes_sophia_different_stencils.png
Notice the stencils in 'MyPage' and 'Top Menu'. These
stencils were created with stencil6.png and
stencil8.png.
/* Change the stencil for each section */
#navigation ul li.navigation_button4 { background-image:
url('http://exemplum.eu/program/themes/sophia/stencil6.png'); }
#navigation ul li.navigation_button4 { background-color: #FF0000; }
#navigation ul li.navigation_button5 { background-image:
url('http://exemplum.eu/program/themes/sophia/stencil8.png'); }
#navigation ul li.navigation_button5 { background-color: #FF3399; }
|
Most times you will have no direct access to the place
where the stencil and image files, belonging to theme, are located, i.e. for
Sophia in the themes directory, visible at
http://exemplum.eu/program/themes/sophia/. Please take a peek at its
contents on your schools site.
Your own created files can best be put in the directory for the created
Area. Use the File manager and navigate to /areas/<yourarea>
and upload your stencil file(s) and logo file there.
In 'Extra style at area level', use a path like this to a
stencil:
/* Path to a stencil in the area Exemplum Inactive */
#navigation ul li { background-image:
url('http://exemplum.eu/file.php/areas/inactive/themes_sophia_110x70g.gif');
#navigation ul li.navigation_button5 { background-color: #FF3399;
}
|
See also the chapter File Manager,
paragraph 5. Using files: file paths for
the logo file.
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