Theme Sophia

Under construction!!

Contents

1. Introduction
   1.1 Screenshot of theme Sophia
   1.2 Description of theme Sophia

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

3. The theme in practice: tips
   3.1 Changing background colors
   3.2 Creating stencil files
   3.3 Different stencils
   3.4 The path to your own stencil files

1. Introduction

Sophia is a joyful theme with many options to change what the visitor of a 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 Sophia

Screenshot of theme Sophia in its basic configuration with demonstration data:

[ theme sophia ]
themes_sophia.png

Example of theme Sophia:

[ theme sophia ]
themes_sophia_example.png

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 name 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

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

[ 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

2.3 Reset theme

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)

(top)

3. The theme in practice: tips

3.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.

3.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 shaped button
By selecting one of the stencil files the shape can be altered.

It's not difficult to create your own stencil file. What is needed is a paint program with which you can create images with transparent parts. We highly recommend mtPaint. From the blurb:
"mtPaint is a painting program which Mark Tyler developed from scratch so he could easily create pixel art and manipulate digital photos. [...] and runs on PC's via the GNU/Linux or Windows operating systems. Due to its efficient design it can run on older PC hardware. [...] mtPaint is free software, which means you are able to freely use, modify and distribute it according to the GNU General Public License." mtPaint is available in many languages and has an excellent manual.

In Linux, Mac and Windows the free GIMP (GNU Image Manipulation Program) can be used.

Stencil file with mtPaint

Proceed as follows to make a stencil file:

3.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;
}

3.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_110x70.png');
#navigation ul li.navigation_button5 { background-color: #FF3399;
}

See also the chapter File Manager, paragraph 5. Using files: file paths for the logo file.

(top)

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