SITE AT SCHOOL VERSION 3.0
Site@School
A Website Content Management System for Primary Schools

# Template Editor module

## Contents

- Introduction.
- General options.
- Header options
- Section options
- Status line options
- Menu options
- Content options
- Footer options
- Other chapters

## Introduction

The Template Editor module of Site@School has the following features:

- Create templates for the public area (i.e. your site) and the protected area (the Intranet).
- The layout of the different parts of the site and the PA are handled by scripts. Future extensions are easy to add.
- Colors, logos, fonts and their sizes, area sizes, texts, of the site and the PA are changed by setting these options.
- You can have a site optimized for your screen resolution, i.e. 600 x 800 pixels or higher. Care is needed when using this feature because other users, using lower screen resolutions will miss parts of your site.
- An [Edit] function to change the module name to fit your language. See the Module manager chapter for details on how to change the module name.

## Choosing the editable template

You have to choose the 'editable' template for the public and/or the protected area to enable this template. This is done in S@S Management > Configuration > S@S Options > 'Theme' for the site and/or 'Theme protected area' for the protected area. Do not forget to save your changes.

When you look on the site, after setting the 'editable' template (see above on how to do this), your site will resemble:

mod_tmpl_site_open.jpg
Your site's picture may differ slightly, due to monitor settings and/or differences in standard settings. You can distinguish different parts:

1. Header section: The title is the website title. It can be set or changed in S@S Management > Configuration > S@S Options. The image, font type, font size, colors etc. can be changed in the template editor.
2. Section bar: Seciton names can be changed in S@S Management >: Page Manager. Colors can be changed in the template editor.
3. Status line bar: The location cannot be chanched, the colors and the text line the 'quick link' can be set.
4. Menu bar: Different layout styles can be chosen as well as fonts, sizes, etc.
5. Footer bar: The text for the date can be set as well as fotnt, size, color, etc.
6. Content: Font, background color, etc. can be set.
7. Border line: Can be set in 'general options'.

## Working with the Template Editor

Now go to S@S management, by opening a second browser page. go to the modle manager and click on 'Template editor'. You will see the opening screen of the template editor:

mod_tmpl_mng_open.jpg

1. Public area
2. Protected area

You can edit the template for the 'Public area', i.e. the site and the 'Protected area', i.e. the site that's only accessible for teachers with a username and password.. Click on 'Protected area ' to go to the ediotr for the protected area.
The template ediitor for the protected area operates in exactly the same way as the editor for the site, so there is no need for furter explanation.

We will now discuss each item of the template editor in detail.

### General options

mod_tmpl_mng_general.jpg
Explanation:

1. Center the page Yes / No: When working in a screen resolution higher than 800 x 600 pixels, this option becomes visible. When it is set to 'No', the page will be on the lieft side of the screen.
2. Background color: In the site overview picture it's the color outside the border (7). It can be changed by clicking on the small icon of the color picker. A window opens:

   mod_tmpl_mng_color.jpg
   Click on the desired color. The color picker will disappear. Save your changes.
3. HTML page size in px: This option becomes usable in resolutions above 800 x 600 pixels. Site@School is designed for a screen resolution of 600 x 800 pixels. Here you can choose to have a higher resolution. NOTICE: Keep in mind when doing this, users with a lower screen resolutin will need tu use the horizondtal scroll bar to get a complet impression of a page.
4. Table border in px: To set the table border widht in pixels. When set to 0 (zero) there is no table border.
5. Table border color: To set the table color with the color picker.

Click on 'Save' at the bottom of the template editor page to save your changes. Then go the the site and click 'Refresh' in the browser to make your changes visible.

### Header options

This is the header section (example):

mod_tmpl_site_header.jpg
This part is controlled here:

mod_tmpl_mng_header.jpg
Explanation:

1. Script name: By moving your mouse over the question mark you get a brief description of the layout.

- header1: Website title centered, the logo on the right side of the header.
  The height of the header can be manipulated by the height of the logo picture. You can have a smaller logo than the height of the header by surrounding the logo with the same color as the background color. Here is an example:
  mod_tmpl_mng_logo.jpg
- header2: Schoolname centered, logo on the left.
  Also here the height of the header can be manipulated with the logo. TIP: You can have a logo with the same color as the bakcground to manipulate th heigth. Make it for example (width x height) 1 x 50 pixels. IMAGE BELOW NOT IN USE
  mod_tmpl_site_header.jpg
- header3: Website title on the left and logo on the right.
- header4: Background image with website title on top.
- header5: School logo only.
mod_tmpl_site_header5.jpg
We are sure you can do better :-).

2. Background color: Set the background color by clicking on the color picker icon. Save your chages.
3. School logo: Specifies the path to the logo. In this case the logo is in the 'themes' directory. When you use your own logo, make a directory n the file manager, for example '/starnet/media/logos' and put your logo pictures there. See the file manager chapter on how to do this.
4. Font name: Sets the font type by opening the drop down menu and selecting a font.
5. Font size in px: Sets the font size in pixels.
6. Font color: Sets the font color with the color picker.
7. Active Yes / No: The complete header section can be removed from your site by setting 'Active' to 'No'.

### Section options

This is the 'section' section:

mod_tmpl_site_section.jpg
This part is controlled here:

mod_tmpl_mng_section.jpg
Explanation:

1. Script name: By moving your mouse over the question mark you get a brief description of the layout.

- Section1: FRED, IK zie het verschil miet met heaer 2.
- Section2: See the picture of the header section.

2. Background color: .
3. Button color: .
4. Mouse over color: .
5. Font name: Sets the font type by opening the drop down menu and selecting a font.
6. Font size in px: Sets the font size in pixels.
7. Font color: Sets the font color with the color picker.
8. Button size in px: .
9. Active Yes / No: .

### Status line options

This is the status line on the site:

mod_tmpl_site_status.jpg
This part is managed by:

mod_tmpl_mng_status.jpg
Explanation:

1. Script name: By moving your mouse over the question mark you get a brief description of the layout.

- Status1: The minimum height of the status line is 18 pixels. The maximum height is defined by the font size.
- Status2: The minimum height of the status line is 25 pixels. The maximum height is defined by the font size.
- Status3: WAT IS STATUS 3.

2. Background color: Sets teh color of the status line. Use the color picker to change the color. Save yor work.
3. Font name: Sets the font type by opening the drop down menu and selecting a font.
4. Font size in px: Sets the font size in pixels. You can make the height of the status seciton bigger by taking a larger font size.
5. Font color: Sets the font color with the color picker.
6. Location text: Her you can have a text like 'Location' or 'You are here', etc. etc.
7. Quick link text: Here you can make a text to a direct link. This can be the news page for example, or a login page, ora a page with a picture, etc. When you do not want any text, leave the line empty.
8. Section number quick link: You have to check the section- and page number on your site to find the right location. Put the found section number here. When you do not want a quick link, put in a zero.
9. Page number quick link: See previous item. Put the found page number here, or a zero when you do not want a quick link.
10. Active Yes / No: You can have no section at all by setting this option to 'No'.

TIPS: You can use the <marquee> tag to make a text scroll horizontally and the <blink> tag to have a flashing text. Here is an example:

### Menu options

This is the Menu on the site:

mod_tmpl_site_menu.jpg
It is controlled by:

mod_tmpl_mng_menu.jpg
Explanation:

1. Script name: By moving your mouse over the question mark you get a brief description of the layout.

- menu1: See the picture above for menu 1.
- menu2: .
mod_tmpl_site_menu2.jpg
- menu3:
  mod_tmpl_site_menu3.jpg

2. Background color: Sets teh color of the field under the menu items. Use the color picker to change the color. Save yor work.
3. Button color: The color of the menu items .
4. Mouse over color: The color when the mouse is moved over a menu item.
5. Active button color: The color of the chosen menu item.
6. Font name: Sets the font type by opening the drop down menu and selecting a font.
7. Font size in px: Sets the font size in pixels.
8. Font color: Sets the font color with the color picker.
9. Active Yes / No: You can have no menu at all by selecting 'No'.

### Content options

This is a part of the content of the site:

mod_tmpl_site_content.jpg
It's managed here:

mod_tmpl_mng_content.jpg
Explanation:

1. Script name: By moving your mouse over the question mark you get a brief description of the layout.

- Content1: XXXXXXX??????????.

2. Content background color: The background.
3. Background color: The color at the right side of the content. Visible in higher resoltions than 600 x 800.
4. Content width in px: Lets you set the content width. Thsi is particulary useful when you decide to work in a high resolution, for example 768 x 1024. Be aware that users with a lower resolution will have to scroll. .
5. Content height in px: See 'content width'.

### Footer options

The footer of the page can be managed here:

mod_tmpl_mng_footer.jpg
Explanation:

1. Script name: By moving your mouse over the question mark you get a brief description of the layout.

- footer1: Footer without last changed date.

  mod_tmpl_site_footer1.jpg
- footer2: Footer with last changed date

  mod_tmpl_site_footer2.jpg
  This footer includes the date.

2. Background color: The text background color.
3. Font name: Sets the font type by opening the drop down menu and selecting a font.
4. Font size in px: Sets the font size in pixels.
5. Font color: Sets the font color with the color picker.
6. Footer text: Here you put the text which will be visible in front of the date when the date option is chosen. The date format is set in S@S management > Configuration > Working environment: 'Date format'.
   NOTICE: Do not put a comma in the text. The text after the comma will disappear.
7. Footer height in px: Sets the height of the footer in pixels.
8. Active Yes / No: By choosing 'No' you have no footer at all.

At the bottom of the page is the 'Go back' and 'Save' part:

mod_tmpl_mng_bottom.jpg

- Go back: To cancel your work and return to the previous menu.
- Save: To save your work and return to the previous menu.

Here ends the template editor chapter.

## Other Chapters

Other chapters of the S@S manual.

Last updated 13.12.2004