Theme Axis

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 New background image and location
   3.2 Different backgrounds for sections and pages
   3.3 How to change the position of the menu
   3.4 Printer friendly style sheet

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 Axis

themes_axis.png

Example of theme Axis:

themes_axis_example.png

1.2 Description of theme Axis

2. The theme configuration

2.1 Basic properties

2.2 Theme configuration

themes_axis_configure.png

• Printer friendly stylesheet: This stylesheet defines the page layout for printed texts. Default: program/themes/axis/print.css
• Extra style at area level:

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

  The extra style information shows the location of one image axis.png that is used for this theme. Please see also section 4. The theme in action: tips on how to use Bazaar Style Style.

• 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 the same for every theme and are extensively discussed in chapter Bazaar Style Style, paragraph 3.1 BSS at Area level.
• Save, Done, Cancel: Please see Save, Done, Cancel in the Basic procedures for beginners.

2.3 Reset theme

(top)

3. The theme in action: tips

3.1 New background image and location

themes_axis_axis_gif.gif

themes_axis_blanco.jpg

The image 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:
http://yourschool.org/program/themes/axis/
If, for example you want to create an image with the same size as the green area, you can take the following steps:

• 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:

#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 directory but in the data directory.

3.2 Different backgrounds for sections and pages

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 Extra style at page/section level enter, as example:

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

3.3 How to change the position of the menu

#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 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 */
#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 the menu. The upper left corner of the menu is 150 pixels from the left and top sides of the browser window.

3.4 Printer friendly style sheet

(top)