Content
1. Introduction
2. Working with the template editor
2.1 Choosing the editable template
2.2 Configuring the template editor
3. Template editor: sections
3.1 Menu section
3.2 General options
3.3 Header options
3.4 Section options
3.5 Status line options
3.6 Menu options
3.7 Content options
3.8 Footer options
3.9 Saving your work
4. Export / Import
The Template editor module of Site@School has the following features:
- Create your own unique templates for the public area (i.e. your site) and the 'Protected Area' (the Intranet to which only teachers have access).
- The layout of the different parts of the site and the 'Protected Area' are handled by scripts. Future extensions are easy to add.
- Colors, logos, font types and their sizes, area sizes, texts etc. of the site and the 'Protected Area' can all be set to your preferences.
- 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 with lower screen resolutions will miss parts of your site.
- When you use a template that uses CSS (Cascading Style Sheets) you can edit the CSS file online. See the 'Configuration manager' chapter, section 'S@S Options' for further details.
- 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.
(top)
You have to choose the 'editable' template for the public and/or the 'Protected Area' to enable this template.
Enabling is done in S@S Management > Configuration > S@S Options > 'Theme' for the site and/or 'Theme protected area' for the protected area.
See the Configuration chapter 2.1 S@S options.
Do not forget to save your changes and refresh your browser page.
When you look on the site, after setting the 'editable' template (see above on how to do this), your site will resemble:
![[ ]](pics/mod_tmpl_site_open.jpg)
mod_tmpl_site_open.jpg
Your site's picture may differ slightly, due to monitor settings and/or differences in standard settings. You might not see the part outside the border [7], see below. You can distinguish different parts.
Explanation:
- 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.
- Section bar: Section names can be changed in S@S Management >: Page Manager. Colors can be changed in the template editor.
- Status line bar: The location cannot be changed. It's possible to set colors, the 'Location' text line and the 'quick link' (explained later).
- Menu bar: Different layout styles can be chosen as well as fonts, sizes, etc.
- Footer bar: The text for the date can be set as well as 'no date'. Font and size, color, etc. can be set.
- Content: Font, background color, etc. can be set.
- Border line: Can be set in 'general options'.
It's also possible to have no header, section, footer, content, etc. by making sections inactive. See below for details.
Go to S@S Management by opening a second browser page. Go to the module manager and click on 'Template editor'. You will see the opening screen of the template editor.
We will now discuss each item of the template editor in detail.
Here is the most upper part of the editor:
![[ ]](pics/mod_tmpl_mng_top.png)
mod_tmpl_mng_top.png
Explanation:
- Public area: Link for the public area template editor. It's the default opening of the editor.
- Protected area: Link for the protected area template editor.
- Export: For exporting your template editor settings into a CSV file on your local computer. See also 4. Export / Import.
- Import: Import template editor settings which were previously exported in a CSV file.
- Chosen area: Names the area (public or protected) you are working in.
You can edit the template for the 'Public area', i.e. your public accessible part of the site and the 'Protected area',
i.e. that part of your site that's only accessible for teachers with a username and password.
Click on the desired link ([1] or [2]), to use the editor of your choice.
The template editor for the protected area operates in exactly the same way as the editor for the site, so there is no need for further explanation.
In this part the options that affect the page location in the browser, the background color, page size and border can be set.
mod_tmpl_mng_general.png
Explanation:
- 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 left side of the screen.
- Background color: In the site overview picture it's the color outside the border [7]. The color can be changed by the color picker.
Click on the small color picker icon
and a window opens:
![[ ]](pics/mod_tmpl_mng_color.png)
mod_tmpl_mng_color.png
All available colors are visible. Move your mouse over the colors. In the upper part of the color picker you see selected the color and its hexadecimal value.
Click on the desired color. The color picker will disappear and the chosen color's hexadecimal value will be visible in the input field.
Save your changes by scrolling down to the bottom of the template editor and click on 'Save'.
A quicker way to save your work is to put the cursor in an entry field: Move your mouse over an entry field and left click. The cursor will appear in the entry field. Hit [Enter] on your keyboard. The settings will be saved.
Go to the site and click 'Refresh' in the browser to make your changes visible.
- HTML page size in px: This option becomes usable in resolutions above 600 x 800 pixels.
NOTICE: In the Site@School design we use a screen resolution of 600x800 pixels as standard resolution.
NOTICE: Keep in mind when setting a higher resolution, users with a lower screen resolution will need to use the horizontal scroll bar to get a complete impression of a page.
- Table border in px: To set the table border width in pixels. When set to 0 (zero) there is no table border.
- Table border color: To set the table color with the color picker.
Save your changes by scrolling down to the bottom of the template editor and click on 'Save'.
A quicker way to save your work is to put the cursor in an entry field: Move your mouse over an entry field and left click.
The cursor will appear in the entry field. Hit [Enter] on your keyboard. The settings will be saved.
Go to the site and click 'Refresh' in the browser to make your changes visible.
NOTICE: This saving procedure will not be described anymore.
This is the header section (example, you may see another header):
![[ ]](pics/mod_tmpl_site_header2.png)
mod_tmpl_site_header2.png
This part is controlled here:
![[ ]](pics/mod_tmpl_mng_header.jpg)
mod_tmpl_mng_header.jpg
Depending on the chosen header fewer options will be visible.
Explanation:
- Script name: By moving your mouse over the question mark you get a brief description of the layout. These are the available scripts:
- header1: Website title centred, the logo on the right side of the header.
![[ ]](pics/mod_tmpl_site_header1.png)
mod_tmpl_site_header1.png
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:
![[ ]](pics/mod_tmpl_mng_logo.png)
mod_tmpl_mng_logo.png
- header2: Website title centred, logo on the left:
![[ ]](pics/mod_tmpl_site_header2.png)
mod_tmpl_site_header2.png
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 background to manipulate the height. Make it for example (width x height) 1 x 50 pixels.
- header3: Website title on the left and logo on the right.
![[ ]](pics/mod_tmpl_site_header3.png)
mod_tmpl_site_header3.png
- header4: Background image with website title on top.
![[ ]](pics/mod_tmpl_site_header4.jpg)
mod_tmpl_site_header4.jpg
When you have chosen 'header4', the space between the left side of the header and the starting point of the text can be set as well as the header height:
- header5: Logo only.
![[ ]](pics/mod_tmpl_site_header5.jpg)
mod_tmpl_site_header5.jpg
Here you have maximum flexibility in building a tailor-made header. All you need is a paint program.
- Background color: Set the background color by clicking on the color picker icon.
- Website logo: Specifies the path to the logo image. In this example the logo is in the 'themes' directory. When you use your own logo, make a directory with the file manager, for example 'starnet/media/logos' and put your logo pictures there. See the file manager chapter on how to do this. When you have done so, the path to the logo image will be 'starnet/media/logos/ourlogo.jpg' ('ourlogo.jpg' is a fictional example).
NOTICE: No leading slash in the path.
- Font name: Sets the font type by opening the drop down menu and selecting a font.
- Font size in px: Sets the font size in pixels.
- Font color: Sets the font color with the color picker.
- Header height in px: Sets the height of the header.
- Active Yes / No?: The complete header section can be removed from your site by setting 'Active' to 'No'.
This is, for example, the 'section' section:
![[ ]](pics/mod_tmpl_site_section2.jpg)
mod_tmpl_site_section2.jpg
This part is controlled here:
![[ ]](pics/mod_tmpl_mng_section.jpg)
mod_tmpl_mng_section.jpg
Explanation:
- Script name: By moving your mouse over the question mark you get a brief description of the layout. These are the available options:
- Background color: Sets the background color of the section bar.
- Button color: Sets the button color.
- Mouse over color: Sets the button color when the mouse moves over the section.
- Font name: Sets the font type by opening the drop down menu and selecting a font.
- Font size in px: Sets the font size in pixels.
- Font color: Sets the font color with the color picker.
- Button size in px: Sets the button width in pixels.
- Button selected color: Sets the 'selected button' color.
- Active Yes / No?: By setting 'No', your site will have no 'Section' section.
This is the status line on the site (example):
![[ ]](pics/mod_tmpl_site_status1.png)
mod_tmpl_site_status1.png
This part is managed by:
![[ ]](pics/mod_tmpl_mng_status.jpg)
mod_tmpl_mng_status.jpg
Explanation:
- Script name: By moving your mouse over the question mark you get a brief description of the layout. These are the available options:
- status1: Status with location and 'quick link':
![[ ]](pics/mod_tmpl_site_status1.png)
mod_tmpl_site_status1.png
The location is visible and the location text can be set in [6].
You have the ability to set a 'quick link' text [7]. This quick link must refer to a section and page number which can be set with [8, 9]. A quick link can refer to the news, to access to the login page, to your school's webmail, etc. etc.
The minimum height of the status line is 18 pixels. The maximum height is defined by the font size.
- status2: Status with location text only:
![[ ]](pics/mod_tmpl_site_status2.png)
mod_tmpl_site_status2.png
The minimum height of the status bar is 25 pixels. The maximum height is defined by the font size.
- status3: Status first part gets background color of the menu:
![[ ]](pics/mod_tmpl_site_status3.png)
mod_tmpl_site_status3.png
- Background color: Sets the color of the status line. Use the color picker to change the color. Save your work.
- Font name: Sets the font type by opening the drop down menu and selecting a font.
- Font size in px: Sets the font size in pixels. You can make the height of the status section bigger by taking a larger font size.
- Font color: Sets the font color with the color picker.
- Location text: Here you can have a text like 'Location' or 'You are here', etc.
- 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, or a page with a picture, etc. When you do not want any text, leave the line empty.
- 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.
- Page number quick link: See previous item. Put the found page number here, or a zero when you do not want a quick link.
- Active Yes / No?: You can have no section at all by setting this option to 'No'.
TIP: You can use the <marquee> tag to make a text scroll horizontally.
For example:
This is an example of the Menu section on the site:
![[ ]](pics/mod_tmpl_site_menu1.png)
mod_tmpl_site_menu1.png
It is controlled by:
![[ ]](pics/mod_tmpl_mng_menu.jpg)
mod_tmpl_mng_menu.jpg
Explanation:
- Script name: By moving your mouse over the question mark you get a brief description of the layout. Options are:
- menu1: Straight menu with blue arrows:
![[ ]](pics/mod_tmpl_site_menu1.png)
mod_tmpl_site_menu1.png
NOTICE: When changing scripts the colors can be reset to #000000 (black). This is an unavoidable drawback.
- menu2: Pull down style menu, uses category field:
![[ ]](pics/mod_tmpl_site_menu2.png)
mod_tmpl_site_menu2.png
When using the 'menu2' script the following options become available:
![[ ]](pics/mod_tmpl_mng_menu2.png)
mod_tmpl_mng_menu2.png
NOTICE: When changing scripts the colors can be reset to #000000 (black). This is an unavoidable drawback.
- menu3: Straight menu with orange bullets:
![[ ]](pics/mod_tmpl_site_menu3.png)
mod_tmpl_site_menu3.png
NOTICE: When changing scripts the colors can be reset to #000000 (black). This is an unavoidable drawback.
- menu4: Menu with buttons:
![[ ]](pics/mod_tmpl_site_menu4.png)
mod_tmpl_site_menu4.png
The button locations are specified in the menu section. This section becomes visible when you choose 'menu4' as script:
![[ ]](pics/mod_tmpl_mng_menu4.jpg)
mod_tmpl_mng_menu4.jpg
When you have created your buttons, put them in the 'starnet/media/logos/' directory and set the path accordingly. No leading slash before 'starnet'.
NOTICE: When changing scripts the colors can be reset to #000000 (black) and/or the path to the buttons can be reset to empty. This is an unavoidable drawback.
- Background color: Sets the color of the field under the menu items. Use the color picker to change the color.
- Button color: The color of the menu items.
- Mouse over color: The color when the mouse is moved over a menu item.
- Active button color: The color of the chosen menu item.
- Font name: Sets the font type by opening the drop down menu and selecting a font.
- Font size in px: Sets the font size in pixels.
- Font color: Sets the font color with the color picker.
- Menu icon (max 25 x 25 px: Here you can specify the path to the icon (the small blue arrow in the menu1 script) of your own choice.
The maximum size of the icon is 25 x 25 pixels.
NOTICE: no leading slash in the path.
- Active Yes / No?: You can have no menu at all by selecting 'No'.
This is an example of a part of the content of the site:
![[ ]](pics/mod_tmpl_site_content.png)
mod_tmpl_site_content.png
It's managed here:
![[ ]](pics/mod_tmpl_mng_content.jpg)
mod_tmpl_mng_content.jpg
Explanation:
- Script name: By moving your mouse over the question mark you get a brief description of the layout. Options are:
- content1: Normal: See the example picture above.
- Content background color: The content background color.
- Background color: The color at the right side of the content. Visible in resolutions higher than 600 x 800 pixels.
- Content width in px: Lets you set the content width. This can be useful when you decide to work in a high resolution, for example 768 x 1024 pixels. Be aware that users using a lower resolution will have to scroll.
- Content height in px: See 'content width'.
- Font name: Sets the font type by opening the drop down menu and selecting a font.
NOTICE: The font selected sets all content to that font. When you want to have a page or parts with a different font, you have to set that font in the editor.
- Font size in px: Sets the font size in pixels.
- Font color: Sets the font color with the color picker.
The footer of the page can be managed here:
![[ ]](pics/mod_tmpl_mng_footer.jpg)
mod_tmpl_mng_footer.jpg
Explanation:
- Script name: By moving your mouse over the question mark you get a brief description of the layout. Available options:
- footer1: Footer without 'last changed' date.
![[ ]](pics/mod_tmpl_site_footer1.png)
mod_tmpl_site_footer1.png
- footer2: Footer with 'last changed' date:
![[ ]](pics/mod_tmpl_site_footer2.png)
mod_tmpl_site_footer2.png
- Background color: The text background color.
- Font name: Sets the font type by opening the drop down menu and selecting a font.
- Font size in px: Sets the font size in pixels.
- Font color: Sets the font color with the color picker.
- 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.
- Footer height in px: Sets the height of the footer in pixels.
- 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:
![[ ]](pics/mod_tmpl_mng_bottom.png)
mod_tmpl_mng_bottom.png
- Go back: To cancel your work and return to the previous menu.
- Save: To save your work. You will stay in the template editor.
A quicker way to save your work is to put the cursor in an entry field. Move your mouse over an entry field and left click. The cursor will appear in the entry field. Hit [Enter] on your keyboard. The settings will be saved.
Go the site and click 'Refresh' in the browser to make your changes visible.
(top)
When the 'Export' menu link is clicked, all your settings for public and protected area will be saved in a CSV file.
The default file name is 'template_config.txt' and you can of course change it.
The following screen is presented and use the 'save to disk' option to save the file on your local computer.
![[ ]](pics/mod_tmpl_export.png)
mod_tmpl_export.png
When the 'Import' menu link is clicked the following screen will be shown:
![[ ]](pics/mod_tmpl_import.png)
mod_tmpl_import.png
Click on the 'Browse' button to select a previously saved config file from your local computer.
When 'Save' is clicked all the setting from the config file are imported. Be aware that your current settings will be lost!
(top)
Author: Dirk Schouten <schoutdi (at) knoware (dot) nl>
Last updated: 2006-04-18