Theme Sophia

Contents

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

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:

themes_sophia.png

Example of theme Sophia:

themes_sophia_example.png

1.2 Description of theme Sophia

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

2.2 Theme configuration

themes_sophia_configure-top.png

themes_sophia_configure-middle.png

themes_sophia_configure-bottom.png

• For most configuration options, please see chapter Theme Frugal, paragraph 2.2 Theme configuration.
• Printer friendly stylesheet: Please see chapter <"themes_axis.html" target="_blank">, paragraphs <"themes_axis.html#2.2" target="_blank">2.2 Theme Configuration and <"themes_axis.html#3.4" target="_blank">3.4 Printer friendly style sheet.
• 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 Style Style options are the same for every theme and are extensively discussed in chapter Bazaar Style Style, paragraph 4.1 BSS at Area level.
• Additional text in header: The text is aligned 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.

2.3 Reset theme

(top)

(top)

3. The theme in practice: tips

3.1 Changing background colors

#navigation ul li { background-image:  url('http://exemplum.eu/program/themes/sophia/stencil0.png'); }
#navigation ul li.navigation_button5 { background-color: #FF3399; 
}

/* 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; 
}

#navigation ul li.navigation_button1 { background-color: #FF0000; 
}

3.2 Creating stencil files

#navigation ul li { background-image:  url('http://exemplum.eu/program/themes/sophia/stencil0.png'); }
#navigation ul li.navigation_button5 { background-color: #FF3399; 
}

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:

• Create a canvass:Open mtPaint. Go: Menu > File > New > Window: New image opens. Set: Size Wide: 110 pixels, Height: 70 pixels. Set Colors to 256, check 24 bit RGB. Click [create]:
  

  themes_sophia_mtp_0.png
• Enlarge the small canvas by setting zoom value rfom 100 % to 300% so you can see what you are doing:
  

  themes_sophia_mtp_1.png
• Paint the stencil shape
  

  themes_sophia_mtp_2.png

  Take the following steps which you know from every paint program:

  • Select the desired color of the stencil, i.e. the non-transparent color. Use the left bar to click the color. In this case it's white.
  • With the bucket tool fill the canvass with the desired stencil color. The complete canvass becomes white.
  • Change the color to pure black (#000000) by picking color 255 from the colors bar.
  • With the paint tool (most left icon in the tools bar) draw the outline of your stencil. If necessary, use [Ctrl + Z] to undo. Let both ends of your line meet so that filling the shape will not leak.
  • With the bucket tool, fill the inner part of the shape.
  • You could have created something like this:
    

    themes_sophia_mtp_3.png
• Save your work
  

  themes_sophia_mtp_4.png

  Set the file format to PNG, the Transparency index to 0 (zero) and the PNG compression to 9. Give the file a name and click [OK], where upon you return to the canvass:

  

  themes_sophia_mtp_5.png

  'Checkered' means 'transparent'.

• If necessary set the permissions world readable. Upload the file with the File Manager to a suitable directory and set the path in the BSS Extra style at are level field by following 4.4 The path to your own stencil and image files. Admire the result:
  

  themes_sophia_jigsaw.png

3.3 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

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)