SiteLite 3.0

Resources

[ Gifs ] [ Stylesheet ]

Resources are used as a general name on the images and the style sheet that realises the layout. The resources must be available to all pages. They are kept in a catalog that by default is named gfx and is placed directly under the sitecatalog. You may change the location of the resourcecatalog by the RESOURCE: - line in the script. You may suggest any catalog relative to the sitecatalog, or an absolute URL. You may not use an absolute filepath to a catalog on disk.

When you refer to resources, always refer to them as if they were directly available in a catalog called gfx.

SiteLite will identify these references to resources and correct the addresses if necessary.

Below is an explanation of the resources that should be present in gfx in a "standard" site, as SiteLite makes it as default. When you change the templates or roll your own you will need other resources.

Gifs

bullet.gif is a small image that is placed in front of pages in a table of contents. See element CONLIST for a description of how to turn it on or off. SiteLite hardcodes use of this image. May be edited, but should not be removed if you don't abandon the idea of a marker once and for all.

hiltebullet.gif is a small image that is used to mark the current page in a table of contents. See element CONLIST for a description of how to turn it on or off. SiteLite hardcodes use of this image. May be edited, but should not be removed if you don't abandon the idea of a marker once and for all.

logo.gif is the logo that appears in the top-let corner of a "standard" page. May be, and will most certainly be, edited. If you change the size of the logo, you should inspect the relevant templates to make sure it does not corrupt the layout.

navigare.gif is the small cluster of arrows that appears in the upper-right and lower-right corners of a page like ths one. If you change the dimensions of this, you must also change the corresponding image map in the relevant templates.

up.gif is the little arrow that brings you to the top of the page. You may edit this, but you should not delete it. SiteLite hardcodes this arrow together with a reference as a substitution for the <!--TOTOP/--> element. The reference depends on an anchor <a name="TopOfPage"></a> in the top of the template, or page.

pixel.gif is a small (1x1 pixels) transparent image that may be used to pad spaces in the pages. SiteLite does not hardcode any use this image, but it may be used in the templates. You may find it useful, since it is not possible to realise all layout plans with style sheets.

Stylesheet

SiteLite relies on cascading style sheets, and the file def.css is important. You will find the file in the catalog gfx, and there should be a reference to the file in all templates, typically by the line:
<link rel="STYLESHEET" href="gfx/def.css">
(the actual reference is correct by SiteLite during build.)

If you are not familiar with style sheets, you should not be too worried. You may achieve great results with some educated guessing. There are lots of sources for Cascading Style Sheets (css) on the Internet. Good places to start looking is at http://www.w3.org or at http://www.w3schools.com/, or you may make an internetsearch for "css" or "cascading stylesheets".

The default styles distributed by SiteLite are chosen to be "reasonable", but you will almost certainly want to do some adjustments to reflect your preferences; colors, textsize etc.

The styles defined in def.css falls in three categories.

1. Styles that are hard coded in SiteLite. Use of these styles are inserted by SiteLite in a way that cannot be controlled by the user. The user may however change the style definitions.
2. Styles that is used by SiteLite templates. These styles are used in "standard" templates. User may inspect and edit their use in the templates or blocks, as well as the styledefinitions in the stylesheet.
3. General styles for standard html-tags. Some general styles are included for users convenience, so they easily may be edited in the style sheet.

Hardcoded styles

When SiteLite assembles lists and table of contents, it inserts styles as an integrated part of the lists. These styles are chosen and described in a way that allows the user maximum control of the appearance. Below is a list that explain their use and refer to the actual styles names in the style sheet.

Page relevant table of contents

marked as SL_CONLIST in the templates, is the table of content that are made for each page, and which normally appears in the left bar of the page. Each of the possible levels in this table is described with its own style. A page with level 3 is for instance described by SiteLite as:
<div class="clevel3">pagename and reference</div>
There are defined 11 clevel-types to match page levels. These are found in the style sheet as:
.clevel0
.clevel1
etc

There are a matching set of styles aclevel which are used to mark the current page, the page that owns the table of content.

Site map

The site map, marked as SL_TOC in the templates, have a structure that are like the SL_CONLIST. To make the freedom of choice as great as possible there are defined a parallel set of styles for this table of content. The styles are found as tlevel, 0 to 10.

PageLocal TOC

The table of content that normally appears in the head of a page, with references to subsections in square brackets are controlled by the style: localtoc

Single TOC

Siblings or children. singletoc, and asingletoc for the active element.

Index

The index is marked as SL_INDEX in the templates. An index consists of a series of keywords, each with a list of page references. The actual styles that are inserted by SiteLite are
<div class="index_keyword">keyword</div>
<div class="index_entry">pageref1</div>
<div class="index_entry">pageref2</div>
etc

Friends

If you use FRIENDS:-lines in the script, SiteLite expects to find a <SL_FRIENDS> -tag in the template. The actual list of pages are hard coded by SiteLite as:
<div class="friends">page name or reference</div>

Template styles

These styles are introduced to match specific needs of SiteLite. Their use is not hardcoded, or forced, but they are generally useful. The indicated use refers to the "standard" templates. You are of course free to use them in another way, simply discard them or introduce new styles, when you construct your own templates.

sitename

Used to wrap the SL_SITENAME-element

mainfooter

Used to wrap the footer, including SL_SITEEDITOR, SL_PAGEAUTHOR, SL_DATE, SL_AMESSAGE elements. Offsets the content to match the main area on the page.

leftfooter

Used to wrap the footer, including SL_SITEEDITOR, SL_PAGEAUTHOR, SL_DATE, SL_AMESSAGE elements. No offset, used by frame pages and print pages.

If you inspect def.css you will find that there are some styles used to wrap predefined (PRE) contents. They are defined to document program code. You may use them, modified or not, for other purposes. They are included to show samples of some useful styling with blocks and background color.

You may find it usefull to make your own styles. Probably the best candidates are (sub)classes of div, p or pre.

General styles

To control the overall appearance of your pages, it is useful to be able to manipulate the appearance of general html-elements. The html-elements that are defined in the std style sheet are:

• BODY, defining styles for the page as a whole
• P, defining the style for general paragraphs
• A:link, defining style for links
• A:visited, links that have been visited
• A:active, the active link
• A:hover, when you move cursor over a link (Does not work for all browsers)
• H1, defining the style for heading, level 2
• H2, for heading level 2
• H3, for heading level 3
• H4, for heading 4
• UL, for unordered lists
• OL, for ordered lists
• TD, for table elements
• PRE, defining style for predefined text

You may choose to include more definitions at will.

Børre Stenseth November 30, 2004