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
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
Screenshot
of theme Axis in its basic configuration in Website@School:
![[ theme axis ]](themes/themes_axis.png)
themes_axis.png
Example of theme Axis:
![[ theme axis example ]](themes/themes_axis_example.png)
themes_axis_example.png
For an up-to-date overview of example sites, please see Website@School
sites.
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.
![[ axis: theme properties ]](themes/themes_axis_configure.png)
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)
![[ reset theme properties ]](themes/themes_all_reset_defaults.png)
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)
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.
In
theme Axis, two backgrounds are available:
![[ axis: background image ]](themes/themes_axis_axis_gif.gif)
themes_axis_axis_gif.gif
|
|
![[ axis theme image ]](themes/themes_axis_blanco.jpg)
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.
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:
- Go to the Page Manager. In the Page
Manager, click on the section name or page name or its pencil
icon. The Edit basic properties of page/section nn
dialogue opens.
- In the Menu, click Advanced.
The Edit advanced properties of section/page nn dialogue
opens.
- In the field Extry style at page/section
level enter, as example:
#page {
background-image:
url('http://exemplum.eu/program/themes/axis/blanco.jpg');
}
|
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.
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.
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!
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