1.1 Screenshots of theme
1.2 Description of theme Axis
2. The theme configuration
2.1 Basic properties
2.2 Theme configuration
2.3 Reset theme
3. The theme in practice: tips
Axis is an images
theme, i.e. well suited for presenting visual material. For
its features, please see paragraph 2.2 Theme
configuration. Tips for this theme are discussed in
3. The theme in practice:tips.
3.1 New background image and
3.2 Different backgrounds for
sections and pages
3.3 How to change the position of
3.4 Printer friendly style sheet
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.
Screenshot of theme Axis in its basic configuration with the
Example of theme Axis:
glance, it seems that Axis is built as three vertical columns.
On the left side of the screen is an image, taking about 1/3rd
of the screen width. In the middle is a small vertical column,
taking about 1/6th of the screen width in which, from top to
bottom ,three images and a vertical menu bar are visible. The
third column, taking about half the screen width is used for
In fact, there is only one image, created with one big image,
three small images and a lot of white space for the content. In
paragraph 3. The theme in action: tips we will
discuss the details.
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.
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.
In this paragraph
we discuss some particular tips that apply 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,
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.
theme Axis, two backgrounds are available:
blanco.jpg can be used to create your
own image. It's size is 955x600 pixels. You can find the picture
by downloading it at:
If, for example you want to create an image with the same size as
the green area, you can take the following steps:
The described operations may differ in the different paint
programs. We used mtPaint.
- Use blanco.jpg or create a canvass of 955x600
pixels. Save it in your preferred background color as .png
file. A good paint program is mtPaint by Mark Taylor, please
see notices in Theme Sophia, paragraph 4.2 Creating stencil files.
- With a screen ruler measure the size of the picture in
the picture of 955x600 pixels. For example, the green
vertical image is 332x600 pixels.
- Create a new canvass, for example of 332x600 pixels, or
find an image of that size, or with a screenshot program cut a
part from an image. Save it as .png file.
- Open the small image in the paint program, select all and
copy. Next open the 955x600 image and pate the small image in
it. Save your work.
In the stylesheet style.css the image and its
location are defined in:
As you can see in the 'Extra style at area level' field, the
image is overruled by:
When you upload your background image to the exemplum
Area, the path, as example, could be:
Notice that file.php is used. This program is
necessary because the image is not located under the
program directory 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 same
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
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 them must be overruled in the style.css file:
- 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 Extra style at
page/section level enter, as example:
margin: 350px 8px 0px 0px;
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 enlarging
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 */
/* No margin, no float, absolute postion */
margin: 0px 0px 0px 0px;
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 the 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 the
stylesheet yourself. The stylesheet can be found at:
You can save the file, for example as
change its content and put it in another place, for example
/areas/exemplum and change the file path in the printer
friendly field to:
/file.php/areas/exemplum/print2.css. Observe the leading
Author: Dirk Schouten <dirk (at) websiteatschool (dot) eu>
Last updated: 2014-09-06