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. Database
5. Concluding remarks
On tips and tricks
(top)
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.
- Go: Configuration Manager > Areas > Select Area >
Click Pencil icon. You are at Theme Configuration of the chosen Area.
- UNcheck Static stylesheet usage [ ] Use static stylesheet file.
- Take notice of the existence of Static stylesheet. It will be used later on.
- Check Extra style usage (area) [ ] Use extra style at area level to enable extra style if it is not checked (default).
- 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
http://yourschoolurl.org/program/themes/ and select theme name.
Now proceed as follows:
- Cut and paste the content of base.css in the
Extra style at area level
in the empty field.
- Adjust to taste and save.
- Check your results.
- 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>
- Check Static Stylesheet usage [ ] Use static stylesheet file. This is the defaullt setting.
- Overrule exisint style instructionss from
base.css in the Extra style at area level field. See an example below for entries in this field.
- Adjust to taser and save.
- Check the result.
- Repeat till the result is satisfying.
- 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.
- With the File Manager, upload
my.css to areas/intranet_title/style/my.css, as example.
- At 'Static stylesheet enter:
/file.php/areas/intranet_title/my.css
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;
}
|
ROSALINA style.css
/* /program/themes/rosalina/style.css - stylesheet for theme 'rosalina' for Website@School
*
* This file is part of Website@School, a Content Management System especially designed for schools.
* Copyright (C) 2008-2011 Ingenieursbureau PSD/Peter Fokker
*
* This program is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License version 3 as published by
* the Free Software Foundation supplemented with the Additional Terms, as set
* forth in the License Agreement for Website@School (see /program/license.html).
*
* This program is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
* for more details.
*
* You should have received a copy of the License Agreement for Website@School
* along with this file. If not, see http://websiteatschool.eu/license.html
*
* $Id: style.css,v 1.1 2011-06-03 19:18:55 pfokker Exp $
*
* Yellow FFFF66
* Red FF0000 FF9999 FFCCCC
* Blue 0000FF CCCCFF
* White FFFFFF
* Gray 666666
* Black 000000
*/
body {
background-color: #FFFFFF;
margin: 0px;
font-size: 10pt;
font-family: Verdana,Geneva,sans-serif;
}
img {
border: none;
}
a:link, a:visited {
color: #0000FF;
text-decoration: none
}
a:hover {
color: #000000;
background-color: #FFCCCC;
text-decoration: none
}
a:active {
color: #FF0000;
text-decoration: none
}
#page {
border: 2px solid #FFFFFF;
}
#header {
height: 72px;
}
#logo {
position: absolute;
}
#logo a:hover {
background-color: transparent;
}
#quicktop {
position: absolute;
right: 2px;
top: 4px;
height: 2em;
text-align: right;
}
#quicktop .quicksearch {
width: 140px;
}
#quickjump {
position: absolute;
right: 2px;
top: 2.5em;
height: 1.9em;
text-align: right;
}
#quickjump select {
width: 140px;
height: 1.7em;
}
#quickjump option {
width: 260px;
}
#breadcrumbs {
height: 1.3em;
text-align: left;
font-size: 0.85em;
background-color: #FFFFFF;
color: #000000;
margin-left: 5px;
margin-right: 5px;
padding: 2px 2px 2px 6px;
}
#breadcrumbs a:link,
#breadcrumbs a:visited {
text-decoration: none;
color: #0000FF;
background-color: #FFFFFF;
}
#breadcrumbs a:active,
#breadcrumbs a:hover {
text-decoration: none;
color: #000000;
background-color: #FFCCCC;
}
#hvmenu_container {
background-color: #FFCCCC;
color: #0000FF;
border-bottom: 1px solid;
border-color: #FFFFFF;
margin-left: 5px;
margin-right: 5px;
}
#hvmenu {
position: relative;
width: 0;
background-color: #FFCCCC;
color: #FFFFFF;
border-bottom: 1px solid;
border-color: #FFFFFF;
}
#noscript ul {
clear: both;
list-style: none;
padding: 0px;
margin: 2px 0px 0px 0px;
background-color: #CCCCFF;
}
#noscript li {
float: left;
margin: 2px 10px 0px 0px;
background-color: #FFCCCC;
}
#noscript .current {
font-weight: bold;
background-color: #FF9999;
color: #000000;
}
#messages {
background-color: #FFFF66;
clear: both;
margin-left: 5px;
margin-right: 5px;
}
#content {
margin: 0.2em;
padding: 0.2em 0.6em;
color: black;
background-color: #FFFFFF;
border: 0;
min-width: 16em;
min-height: 37em;
}
#content h1 {
font-size: 1.5em;
margin: 0.5em 0;
}
#content h2 {
font-size: 1.2em;
margin: 0.5em 0;
}
#content p {
font-size: 1em;
margin: 1em 0;
line-height: 150%;
}
#content a:link,
#content a:visited {
color: #0000FF;
}
#content a:hover,
#content a:active {
background-color: #FFCCCC;
}
#footer {
background-color: #FFFFFF;
text-align: center;
margin-bottom: 10px;
}
#footer a:link,
#footer a:visited {
color: #0000FF;
}
#footer a:hover,
#footer a:active {
background-color: #CCCCFF;
}
#quickbottom {
background-color: #FFCCCC;
padding-bottom: 7px;
padding-top: 5px;
}
#quickbottom img {
position: relative;
top: 5px;
margin-top: -20px;
margin-bottom: -10px;
}
#quickbottom a:hover img {
background-color: #CCCCFF;
}
#address {
display: none;
}
/* eof style.css */
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.
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 ]](tips/lines1.png)
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"
|
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;
}
lines1.png
(top)
If you want to make the complete site inivisible, for example when when working on it, you can show the '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'sn valid HTML.
- Upload maintenance.html in the document root.
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)
(top)
(top)
Author: Dirk Schouten <schoutdi (at) knoware (dot) nl>
Last updated: 2011-02-15