Tips & Tricks

Contents

1. Introduction

2. Editing Bazaar Style Style Sheets

3. Examples
    3.1 Override an element
    3.2 Page Manager: vertical lines

4. Concluding remarks

1. Introduction

On tips and tricks

(top)

2. Editing Bazaar Style Style Sheets

One of the best features are the Bazar Style Style Sheets (BSS). These permit endless variations in style, manageable by the Area, section and page masters. Below is a short intro.
  1. Go: Configuration Manager > Areas > Select Area > Click Pencil icon. You are at Theme Configuration of the chosen Area.
  2. UNcheck Static stylesheet usage [ ] Use static stylesheet file.
  3. Take notice of the existence of Static stylesheet. It will be used later on.
  4. Check Extra style usage (area) [ ] Use extra style at area level to enable extra style if it is not checked (default).
  5. Make the static style sheet visible. Check the Static stylesheet field for its location.
    Example: program/styles/base.css. It can be accessed with your browser:

    http://yourschoolurl.org/program/styles/base.css

    Now proceed as follows:

  6. Cut and paste the content of base.css in the Extra style at area level in the empty field.
  7. Adjust to taste and save.
  8. Check your results.
  9. Repeat from step 3 until the result are what you aimed or.

In this way, the complet styleseet is used in the Extra style at area level field. Onother way of woarking is described below>

  1. Check Static Stylesheet usage [ ] Use static stylesheet file. This is the defaullt setting.
  2. Overrule exisint style instructionss from base.css in the Extra style at area level field. See an example below for entries in this field.
  3. Adjust to taser and save.
  4. Check the result.
  5. Repeat till the result is satisfying.
  6. If the style is what you want, you can make your chanbges 'permanent' in a (copy) of the downloaded base.css file. Assume we name this copy my.css. This file contains all the changes you have made in the Extra Style at area Level field.
  7. With the File Manager, upload my.css to areas/intranet_title/style/my.css, as example.
  8. At 'Static stylesheet enter:
    /file.php/areas/intranet_title/my.css

(top)

3. Examples

3.1 Override an element

For example, we want to change the font size in the content. In base.css, search for:

#content {
  min-width: 300px;
  margin-left: 210px;
  margin-right: 210px;
  background-color: #EEE;
  padding: 20px 20px 10px 30px;
  font-size: 0.9em;
  text-align: justify;
}

There you see among other lines: font-size: 0.9em;.

To override this font size, you can add in thenoemde 'Extra Style at area level' for example:

/* Larger fonts: 1.5em i.s.o 0.9em */
#content {
  font-size: 1.5em;
}

/* Larger fonts: 1.5em i.s.o 0.9em */ is the comment line. Do not forget to add this line, your easily forget your changes.

It's also possible to add an element with the content:

#content {
  font-weight: bold;
}

Or do them in one time together:

/* Larger fonts: 1.5em i.s.o. 0.9em and always bold */
#content {
  font-size: 1.5em;
  font-weight: bold;
}

If the result suits you, you can do the adaptions in base.css, upload it as my.css, upload, etcetera.

3.2 Page Manager: vertical lines

When you have a deep site with many subsections, it can becom difficult to see the levels. This is how to make vertical lines like:

[ explanation  ]
lines1.png


cd /program/styles/admin_base.css, 
around line 233 you see

 #content li {
   margin: 0px;
   padding: 0px 5px 0px 105px;
   font-weight: bold;
   line-height: 1em;
 }

Between the { and } add this line:

   border-left: 1px #0000FF dashed;

Save the file and do a couple of refreses in your browser
(i.e press F5 repeatedly) 

You see something like "lines1.png"

Eventually in the lines thereunder you you see: 
  #content li.level0 {
   padding: 0px 0px 0px 20px;
 }

Add between the { and  } this line:
   border-left: 0px #FF0000 solid;

Save and refresh! You should see "lines2.png"

[ explanation  ]
lines1.png

(top)

4. Concluding remarks

(top)

Author: Dirk Schouten <schoutdi (at) knoware (dot) nl>
Last updated: 2011-02-15