Tips & tricks

Contents

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

• Resize images: use Irfanview, see the Snapshots module, tip 4.1
• mtPaint

6. Concluding remarks

1. Introduction

(top)

2. Editing Bazaar Style Style Sheets

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

#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.

/* 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

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

#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;
    }

tips_lines1.png

(top)

3. Maintenance page

• Create a file called maintenance.html with the right ownership and permissions for your server. See the Installation chapter for details.
• Put whatever you like in the file as long as it is not valid HTML.
• Upload maintenance.html in the document root.

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. Database

(top)

5. Blank screen

(top)

6. Concluding remarks

(top)