Tips & Tricks

Contents

Heavily under construction

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

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
   

   Now proceed as follows:

6. Cut and paste the content of base.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 complet styleseet 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 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 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. Yyou 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 <peter@berestijn.nl>
 *
 * 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.

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

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

lines1.png

(top)

3. Mantenance 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.

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. Concluding remarks

(top)