Theme Axis

Contents

1. Introduction
   1.1 Screenshots of theme Axis
   1.2 Description of theme Axis

2. The theme configuration options

3. Reset properties of theme

4. The theme in practice: tips
   4.1 New background image and location
   4.2 Different backgrounds for sections and pages
   4.3 How to change the position of the menu
   4.4 Printer friendly style sheet
   4.5 For visually impaired

1. Introduction

Axis is an 'image' 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 Axis 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 Axis

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

Example of theme Axis:

[ theme axis example ]
themes_axis_example.png

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

1.2 Description of theme Axis

At first glance, it seems that Axis is built as three vertical columns. On the left side of the screen is an image, taking about 1/3 of the screen width. In the middle is a small column in which, from top to bottom ,three images and the menu pane are visible. The third column, taking about half the sreen width is the content.
In fact, there is only one image, containing one big image and three small images and a lot of white space for the content. In paragraph 4. The theme in action: tips we will discuss the details.

2. The theme configuration options

[ axis: theme properties ]
themes_axis_configure.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 ]
configurationmanager_area_theme_reset.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.

(top)

4. The theme in action: tips

In this paragraph we discuss some particuar tips that appy to this theme. We assume you have read about the concept of Bazaar Style Style in the Viewpoints chapter, paragraph 4.1 Cascading Style Sheets. And we assume you have studied the practical side of BSS in the Configuration manager chapter, paragraph 3.4 Configure theme 'Theme Name' for area n.
To create images, chapter Theme Sophia, paragraph 4.2 Creating stencil files gives some hints when using free programs and how to create an image.

4.1 New background image and location

In theme Axis, two backgrounds are available:
[ axis: background image ]
themes_axis_axis_gif.gif
   [ axis theme image ]
themes_axis_blanco.jpg

The image blanco.jpg can be used to create your own image. It's size is 955x600 pixels. You are free to do whatever you like.

In the stylesheet style.css the image and its location are defined in:

#page {
  margin:               auto;
  width:                955px;
  height:               600px;
  background-image:     url('blanco.jpg');
  background-repeat:    no-repeat;
}

As you can see in the 'Extra style at area level' field, the image is overruled by:

#page {
  background-image:
  url('http://exemplum.eu/program/themes/axis/axis.gif');
}

When you upload your background image to the exemplum Area, the path, as example, could be:

#page {
  background-image:
  url('http://exemplum.eu/file.php/areas/exemplum/EPSbackground.png');
}

Notice that file.php is used. This program is necessary because the image is not located under the program direcory but in the data directory.

4.2 Different backgrounds for sections and pages

So far extra style has been added at Area level. That means every section and page in the Area gets the smae background. It's possible to overrule this Area wide background by adding different background images, for example, to all pages in a section or even add a different background to one page.

The procedure is quite simple:

Save your work and see that all pages in that section have the same background, or that a particualer page has its own bakcground image.

4.3 How to change the position of the menu

In order to align the menu with your beautiful background, it can be necessary to put the menu in a certain position in the image. Below are the relevant code snippets. Some of htem must be overruled in the style.css file
#page {
  margin:               auto;
  width:                955px;
  height:               600px;
  background-image:     url('blanco.jpg');
  background-repeat:    no-repeat;
}

#header {
  width:                338px;
  height:               580px;
  float:                left;
}

#menu {
  width:                96px;
  margin:               350px 8px 0px 0px;
  height:               230px;
  float:                left;
  font-size:            0.7em;
}

As you can see in the stylesheet, the page width is 955 pixels, the header width is 338 pixels and the menu is 92 pixels wide with a margin in the menu of 8 pixels.
When we remove the menu we have to fill the 'gap' by enlaring the header width to 338+96+8=442 pixels.
And finally we have to position the menu somewhere on in the image. This is one way to do the trick:

/* Make header wider to fill gap */
#header {
width: 442px;
}

/* No margin, no float, absolute postion */
#menu {
  width:                96px;
  margin:               0px 0px 0px 0px;
  height:               230px;
  float:                none;
  position:             absolute;
  top:                  150px;
  left:                 150px;
  font-size:            0.7em;
}

We have overruled the margin to 0 pixels.The margin value functions as follows:


                      top   right bottom left
margin:               350px 8px   0px    0px;

The 'float' property is set to value 'none'. With the property 'position' we set the desired position of hte menu. The upper left corner of the menu is 150 pixels from the left and top sides of the browser window.

4.4 Printer friendly style sheet

If you want to change the content of the printed page, you can change tye stylesheet yourself. The stylesheet can be found at:
http://exemplum.eu/program/themes/<themename>/print.css
You can save the file, for example as print2.css, change its content and put it in another place, for example in:
/areas/exemplum and change the file path in de printer friendly field to:
/file.php/areas/exemplum/print2.css. Observe the leading slash!

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