Configuration Manager

Contents

1. Introduction
    1.1 Features
        1.1.1 Areas features
        1.1.2 Site features
        1.1.3 Alerts features
    1.2 Assumptions

2. Configuration Manager overview

3. Areas
    3.1 Areas overview
    3.2 Add an area
    3.3 Edit basic properties of this area
    3.4 Configure theme 'Theme Name' for area n
        3.4.1 Bazaar Style Style at area level
            3.4.1.1 A new header for your school
        3.4.2 Bazaar Style Style at page level
    3.5 Reset properties of theme themename for area n (Area Name)
    3.6 Delete an area

4. Site
    4.1 Site configuration

5. Alerts

6. Concluding remarks

1. Introduction

With the Configuration Manager Areas, the overall site configuration and Alerts are managed.

1.1 Features

1.1.1 Area features

The Area Manager has the following features, in no specific order:

1.1.2 Site features

In fact, every configuration option is a feature. No need to list them here. Please see the paragraph 4. Site where all configurations options are discussed.

1.1.3 Alerts features

Not yet implemented. At this moment the person that installed Website@School receives alerts.

1.2 Assumptions

This chapter elaborates on other chapters. We assume you have read and done the General part of the Table of Contents.

(top)

2. Configuration Manager overview

Click the Configuration Manager [ configuration ] icon, to open the Configuration Manager dialogue:
[ Configuration Manager ]
configurationmanager_overview.png

Explanation:

(top)

3. Areas

Areas resemble sites; to the site visitor Areas appear as separate sites. This paragraph discusses adding Areas, editing their properties, the Areas' theme configuration and deleting Areas.

3.1 Areas overview

In the Configuration Manager Menu, select Areas to enter the Areas dialogue:
[ Areas, list ]
configurationmanager_areas_overview.png

The list of areas is shown, the Areas link is underlined.

Explanation:

3.2 Add an area

To add an area, in Areas click Add an area to enter the Add an area dialogue:
[ Add an area, entry fields ]
configurationmanager_area_add.png

Explanation:

After saving, the Area is added:
[ Areas, message= success, area added ]
configurationmanager_area_addded.png

NOTICE:
Do not forget to add a page to the area. If no page is added, this results in a painful message for the visitors:

[ Fatal error, error code 080 ]
configurationmanager_area_addded_no_page.png

3.3 Edit basic properties of this area

In the Areas overview, click on the (public/private )Name of the area (nn,nn) (inactive) link to open the Edit basic properties of this area dialogue:
[ Edit basic properties of this area, entry fields ]
configurationmanager_area_basic_properties_edit.png
In the Menu the Basic properties link is underlined.

Explanation:

3.4 Configure theme 'Theme Name' for area n

Here the properties of the previously chosen theme can be configured. Each theme has its own configuration options, which are discussed in their respective chapters. Please go to the Table of contents, paragraph Themes and select the chosen theme to configure its theme specific options.

Each theme has a set of special options that are the same for every theme: the 'Bazaar Style Style' (BSS). This subject is discussed in appendix 4.2 Bazaar Style Style. Below we only explain the technical details and give examples of its usage.

3.4.1 Bazaar Style Style at area level

We will discuss BSS with the Frugal theme as example. The functionality of BSS is the same in every theme.
[ Configure Theme 'Theme Name' for area n, boot part ]
configurationmanager_area_configure_theme-bottom.png

Explanation:

In the next paragraph we will do something more fruitful for the school.

3.4.1.1 A new header for your school

Preparations:
Take a picture. The picture is 3233 KB. Downloading such a big sized image takes very long on the internet. Resize it with multi-language freeware Irfanview or any other image resize program to 1024 x 768 pixels (1229 KB as .png file):

[ �mage of EPS school ]
configurationmanager_EPS-1024x768.png

With a screen capture program, for example multi language freeware MWSnap or any other screen capture program, resize the picture to a height of 150 pixels. Save as EPS-1024x150.png:

[ part of image from EPS school ]
configurationmanager_EPS-1024x150.png

Upload the file to the Exemplum Primary School data folder areas/exemplum.

Here we go:

Open a browser as a normal visitor of the site of the Exemplum Primary School with the Frugal theme and, in the browsers menu bar and sub-menus, look for the option 'Page Source'. Use that option to to take a peek at the source code of the page:


<body>
  <div id="top">
  </div>
  <div id="page">
    <div id="header">
      <div id="logo">
---> In your browser the line below is veeery long: <a href="/in... 71"></a>, so we splt it.
        <a href="/index.php/area/1/Exemplum_Primary_School.html">
        <img src="/program/graphics/waslogo-284x71.png" 
        title="Exemplum Primary School" 
        alt="image of logo" width="284" height="71"></a>      
      </div>
      <div id="quicktop">
        <a href="/index.php/18/About_our_school.html" title="About our school">about</a>
        <a href="/index.php/19/How_to_contact_us.html" title="How to contact us">contact</a>
      </div>
      <h1>Exemplum Primary School</h1>
    </div>
---> Here the breadcrum trail starts.   

This is the upper side of the theme Frugal, i.e. the 'header' seciton. Try to make sense of the code. If you don't understand it, no problem, you will in due course.

Previously, we have created an image of the school. It's size is 1024x150 pixels. With the File Manager we have uploaded the image to the Exemplum Primary School data folder areas/exemplum. In the next piece of code the Website@School logo is not displayed and the image is put in the header. Cut and paste it below the other code about an awful color.

NOTICE:
'Do not forget to change the file path. Your school is not the Exemplum Primary school...


/* Do not display the Website@School logo */
#logo { display: none;
}

/* Image of EPS in header */
#header {
  background-image: url('http://exemplum.eu/file.php/areas/exemplum/EPS-1024x150.png');
  background-repeat: no-repeat;
  border: 1px #00F dashed;
  height: 150px;
}

We only show the header, breadcrum trail and sections:

[ Top of site with example code ]
configurationmanager_BSS_example.png

We have put a dotted border around the area that is covered by the '#header' area. The white space is used for the 'quicktop' links. That's not exactly what we want.

We have to take a peek in the code to see how that whitespace is created. The Frugal base.css is located at program/styles/base.css as can be seen in the 'Static style sheet' field in the Theme configuration.
Point your browser at http://yourschool.org/program/styles/base.css. You see the code in the base.css file. Look for:

#quicktop {
  height: 20px;
  background-color: #FFF;
  text-align: right;
  font-size: 0.95em;
  padding-left: 210px;
  padding-right: 210px;
}

We have to get rid of those 20 pixels to make room for the image. And since we are here, the font color makes the name of the school rather illegible, just as the black of the 'about' and 'contact' links, once the school image fits. So we add:


/* no space for quicktop */
#quicktop {
height: 0px;
}
/* Yellow school name */
#header h1 {
  font: #FF0;
}
/* Yellow toplinks */
#quicktop }
 font: #FF0;
}   

This results in:

[ Top of site with example code ]
configurationmanager_BSS_example-2.png

Hm, not bad, but... After some fiddling, i.e. positioning the name of the school and struggling with this piece of code in program/styles/base.css:


#quicktop a:link,
#quicktop a:visited {
  text-decoration: none;
  color: #000;
  background-color: #FFF;
}

cleaning up a bit and bringing some order, we now have:


/* No Website@SChool logo */
#logo { display: none;
}

/* Image of EPS in header */
#header {
  background-image: url('http://exemplum.eu/file.php/areas/exemplum/EPS-1024x150.png');
  background-repeat: no-repeat;
  height: 150px;
}

/* More space for quicktop font and
transparent background */
#quicktop {
height: 40px;
background-color: transparent;
}

/* Yellow school name, size and position */
#header h1 {
color: #FF0 ;
font-size: 2em;
position: absolute;
top: 100px;
left: 5px;
}

/* Yellow colore and transparant 
background for picture */
#quicktop a:link,
#quicktop a:visited {
  text-decoration: none;
  color: #FF0;
  font-size: 2em;
  background-color: transparent;  
}

Another idea: get rid of the header and create a drawing of 1024 x 150 pixels with the name of the school calligraphed. Maybe for Herbert's 'cat' theme.


/* No Area title in header */
#header h1 {
display: none;
}

How to learn more about BSS and CSS

  1. The most important source of information is the Static stylesheet. For theme Frugal it's located at program/styles/base.css. You can find it by visiting http://yourschool.org/program/styles/style.css. For all other themes, you find the style.css in http://yourschool.org/program/themes/<themename>.
  2. There is an excellent site where you can find the basics of Bazaar Style Style. Do the free online course and become an expert. http://www.w3schools.com/css/. Have fun!
  3. Last but not least, everything you need to know on the subject can be found on the Internet. Look for CSS.

3.4.2 Bazaar Style Style at page level

Each page/section has its own Bazaar Style Style feature.
[ Extra style at page/section level ]
configurationmanager_area_page_level_bss

Whether style information from pages or sections is passed to the browser or not is dependent on the checked/unchecked box at 'Extra style usage (node).

Example:

[ EPS news ]
configurationmanager_EPS_news.png
All pages under the section 'News' have the modfied header.

3.5 Reset properties of theme themename for area n (Area Name)

Resetting the theme properties restores the properties as they were set during the installation of the theme.

NOTICE:
Take care! It is a good idea to copy and paste complex style information to a safe location before resetting a theme.

3.6 Delete an area

NOTICE:
In general it's a bad idea to delete an area. Maybe it contains content that now seems useless but that might become useful in a year or so. Maybe it's a better idea to rename the area as Archive: [old areaname], make the Area inactive and put it at the bottom of the list of Areas.

To delete an area, in the Areas overview, click the Trashcan icon to open the Confirm delete of area Area Name dialogue:

[ Confirm delete of area Exemplum Parents ]
configurationmanager_area_delete.png

(top)

4. Site

In the Site configuration the global parameters for the complete site are set. In a normal school situation it's not necessary to change any of these values.

NOTICE:
If you do not know what you are doing here, it might be better to leave the Site configuration untouched.

4.1 Site configuration

In the Menu, select Site to enter the Site configuration dialogue:
[ Site configuration, entry fields. Page top ] [ Site configuration, entry fields. Page bottom ]
configurationmanager_site_configure-top.png
configurationmanager_site_configure-bottom.png
Explanation:

(top)

5. Alerts

At this moment (version 0.90.4) Alerts are not yet fully implemented.
Alerts are sent:
- to the person who installed Website@School (with the initial e-mail address of the installer)
- to Amelia Cackle (also with the same initial address)

The person who installed Website@SChool gets all changes for the ellapsed time period once per 24 hours at the most. 

The alert for Amelia Cackle are sent 1x per hour. She receives all changes on Area #2 (the intranet when demodata is installed).

Fine grainded alerts for
- 'every' change
- a change in one or more areas
- a change on one or more nodes (pages/sections)
can be sent to users with an account or without account.

Possibilities:
You can make an alert for a teacher on a page owned by a pupil. When the pupil changes something on his page, the teacher receives an alert, only for that page.

The e-mail addresses of the alerts are not bound to an account, but are completely separated. This is done to be able to send alerts to addresses that have NO account. 
In this way, a visitor can take a subscription to the changes on a certain page.  For example: subscribe me to this page with the advertisement 'for sale'. When something changes in the price of the advertised articles,  the visitor automatically receives an alert.

(top)

6. Concluding remarks

Power to the Bazar!

(top)

Author: Dirk Schouten <schoutdi (at) knoware (dot) nl>
Last updated: 2013-07-10