Template editor module

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

1. Introduction

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

(top)

2. Working with the template editor

2.1 Using the editable template

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:

[ ]
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:

  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: Section 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 changed. It's possible to set colors, the 'Location' text line and the 'quick link' (explained later).
  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 'no date'. Font and size, color, etc. can be set.
  6. Content: Font, background color, etc. can be set.
  7. 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.

2.2 Configuring the template editor

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.

3. Template editor: sections

3.1 Menu section

Here is the most upper part of the editor:

[ ]
mod_tmpl_mng_top.png
Explanation:
  1. Public area: Link for the public area template editor. It's the default opening of the editor.
  2. Protected area: Link for the protected area template editor.
  3. Export: For exporting your template editor settings into a CSV file on your local computer. See also 4. Export / Import.
  4. Import: Import template editor settings which were previously exported in a CSV file.
  5. 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.

3.2 General options

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:
  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 left side of the screen.
  2. 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 [ mod_tmpl_colpick_icon.jpg ] and a window opens:

    [ ]
    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.

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

  4. Table border in px: To set the table border width 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.

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.

3.3 Header options

This is the header section (example, you may see another header):

[ ]
mod_tmpl_site_header2.png

This part is controlled here:

[ ]
mod_tmpl_mng_header.jpg

Depending on the chosen header fewer options will be visible.
Explanation:

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

  2. Background color: Set the background color by clicking on the color picker icon.
  3. 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.

  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. Header height in px: Sets the height of the header.
  8. Active Yes / No?: The complete header section can be removed from your site by setting 'Active' to 'No'.

3.4 Section options

This is, for example, the 'section' section:

[ ]
mod_tmpl_site_section2.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. These are the available options:
  2. Background color: Sets the background color of the section bar.
  3. Button color: Sets the button color.
  4. Mouse over color: Sets the button color when the mouse moves over the section.
  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: Sets the button width in pixels.
  9. Button selected color: Sets the 'selected button' color.
  10. Active Yes / No?: By setting 'No', your site will have no 'Section' section.

3.5 Status line options

This is the status line on the site (example):

[ ]
mod_tmpl_site_status1.png

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. These are the available options:
  2. Background color: Sets the color of the status line. Use the color picker to change the color. Save your 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 section bigger by taking a larger font size.
  5. Font color: Sets the font color with the color picker.
  6. Location text: Here you can have a text like 'Location' or 'You are here', 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, or 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'.
TIP: You can use the <marquee> tag to make a text scroll horizontally. For example:
Latest headlines:

3.6 Menu options

This is an example of the Menu section on the site:

[ ]
mod_tmpl_site_menu1.png

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. Options are:
  2. Background color: Sets the color of the field under the menu items. Use the color picker to change the color.
  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. 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.

  10. Active Yes / No?: You can have no menu at all by selecting 'No'.

3.7 Content options

This is an example of a part of the content of the site:

[ ]
mod_tmpl_site_content.png

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. Options are:
  2. Content background color: The content background color.
  3. Background color: The color at the right side of the content. Visible in resolutions higher than 600 x 800 pixels.
  4. 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.
  5. Content height in px: See 'content width'.
  6. 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.

  7. Font size in px: Sets the font size in pixels.
  8. Font color: Sets the font color with the color picker.

3.8 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. Available options:
  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.

3.9 Saving your work

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

[ ]
mod_tmpl_mng_bottom.png

(top)

4. Export / Import

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.

[ ]
mod_tmpl_export.png

When the 'Import' menu link is clicked the following screen will be shown:

[ ]
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