Theme Sophia

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

1. Introduction

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

1.1 Screenshots of theme Sophia

Screenshot of theme Sophia in its basic configuration in Website@School:
[ theme axis ]
themes_sophia.png

Example of theme Sophia:

[ theme sophia ]
themes_sophia_example.png

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

1.2 Description of theme Sophia

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)

2. The theme configuration options

[ sophia theme properties top ]
[ sophia theme properties top ]
[ sophia theme properties top ]
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':

(top)

3. Reset properties of theme

[ reset theme properties ]
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)

4. The theme in practice: tips

4.1 Changing background colors

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.

4.2 Creating stencil files

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.

4.3 Different stencils

[ theme sophia, different stencils ]
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; }

4.4 The path to your own stencil & image files

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.

4.5 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