Tips & tricks

(always under construction and sometimes a bit messy)

Contents

1. Introduction

2. Editing Bazaar Style Style Sheets
    2.1 Override an element
    2.2 Page Manager: vertical lines
    2.3 Schoolyard

3. Maintenance page

4. Useful tools

5. Blank screen

6. Concluding remarks

1. Introduction

On tips and tricks

(top)

2. Editing Bazaar Style Style Sheets

Website@School uses Bazaar Style Style Sheets (BSS), our own implementation of CSS. It's one of the best features in Website@School, permitting permit endless variations in style and lay-out. These are manageable by the Area-, section- and page- masters. This permits user to manage their own style sheet. Pupils can experiment with lay-out.

Here is the basic way of editing the complete style of a theme. We assume you have the necessary permissions.

  1. Go: Configuration Manager > Areas > Select an Area > Click Pencil icon. You are at Theme Configuration of the chosen Area.
  2. Uncheck Static stylesheet usage   ] Use static stylesheet file. That is the file below.
  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: This enables extra 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 via:
    http://exemplum.eu/program/styles/base.css for the Frugal stylesheet or
    http://exemplum.eu/program/themes/>themename</style.css

    Now proceed as follows:

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

In this way, the complete stylesheet is used in the Extra style at area level field.

Another way of working is described below:

  1. Check Static Stylesheet usage [  ] Use static stylesheet file. This is the defaullt setting.
  2. Overrule existing style instructions from base.css in the Extra style at area level field. See an example below for entries in this field.
  3. Adjust to taste 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 changes '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

2.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 the 'Extra Style at area level' for example:


/* Font size changed: 0.9em to 1.5em. /DS 23-08-2011 */
#content {
  font-size: 1.5em;
}

About /* Font size changed: 0.9em to 1.5em. /DS 23-08-2011 */ is the comment line. Do not forget to add such comments. You easily forget your changes.

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


#content {
  font-weight: bold;
}

 In het geval van KISS:

div { ... 1px ... } /* Alle divs tenzij later overruled door class of id */
.current { ... 2px ...} /* Alle elementen met class="current" (geen punt)*/
#navigation { ... 3px ... } /* HET element met id="navigation" (geen hash)*/

Dat overrulen kan telkens doorgaan, maar soms misschien 'vaag':
Het element #navigation met class="current" krijgt tegenstrijdige
instructies (is het nu 2px of 3px?). Ik weet niet wat er gebeurt
in zo'n geval.

De asterisk betekent alle elementen. Dus:
bovenaan in de CSS dit:

* { border: 1px dotted purple; }

geldt voor alle elementen tenzij overruled. Cascading enzo...
 
Met de eerste drie kun je de breedte van het menu/de
menuitems instellen.


Het gaat om telkens 4 getallen: 
1. de minimale breedte (in px), 
2. de gemiddelde breedte van een 1 character (in px) 
3. de maximale breedte (in px) en 
4. de hoogte (in px). 

Met de eerste drie kun je de breedte van het 
menu/de menuitems instellen. Als je de breedte per 
character vergroot zullen die woorden niet meer 
wegvallen, tenzij je dan over het maximum heengaat.

Defaults zijn: 120,8,300,20. 
Je zou de breedte per char in kunnen stellen 
op bijv. 10 en het maximum op 450: 120,10,450,20.

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.

2.2 Page Manager: vertical lines

When you have a deep site with many subsections, it can become difficult to see the levels. This is how to make vertical lines like:
[ explanation ]
tips_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"

2.3 Schoolyard

Verkleinen van de minimale hoogte van 25em (zoals gestipuleerd in style.css) tot 16em.
#content { min-height: 16em; }

SCHOOLYARD
Hiermee zet je 'about' en 'contact' naar links en komt er een zwart
vertikaal streepje met links en rechts 10px ruimte eromheen.

    #quicktop { text-align: left; }
    #breadcrumbs {
      border-right: 2px solid black;
      padding-right: 10px;
      margin-right: 10px;
    }
[ explanation ]
tips_lines1.png

(top)

3. Maintenance page

If you want to make the complete site invisible, for example when when working on it, you can show the 'Maintenance' page. Once the file is in place, a visitor going to index.php she/he finds the Maintenance page.

When you want your site visible, rename manintenance.html in maintenance.html.off or something alike. Usful for the next time you need the file.

(top)

4. Useful tools

(top)

5. Blank screen

A blank screen can be caused by lack of memory when uploading files. See chapter File Manager for details.

(top)

6. Concluding remarks

None

(top)

Author: Dirk Schouten <dirk (at) websiteatschool (dot) eu>
Last updated: 2014-09-06