Changing the layout

When talking about layout, we practically talk about these three things;

The framework and elements the site is put into,

The XSLT templates that defines the style of the above, and

The corresponding CSS file.

Hence, changing the layout involves first that you go through Templating to define what elements goes where and what templates to use, and then turn to this chapter to define how the elements should look and behave, and how the templates all work together, and then look to the corrosponding CSS file for design, color and other visualities.

Framework overview

As mentioned and demonstrated in Templating, you define your framework through a set of page templates, like "templates/sites/[your_chosen_style]/default.xml". When the elements within that layout needs tweaking, you need to look to the XSLT templates located in the "templates/sites/[your_chosen_style]" directory. The template in question has got the prefix of "lib-layout-", as in "lib-layout-default.xsl".

Also as mentioned in the previous chapter, the elements in a page template corresponds to the XSLT templates within the given layout, so for instance, the <logo> element calls up the XSLT template "logo".

Framework elements

A quick and dirty run-through the framework / layout elements. For better understanding of them, try them out or look at the examples provided with the various styles and designs that comes with xSiteable.

element "page"

Root element of each page. Renders a wrapping DIV with the class of "wrapper".

element "header"

A header element. Creates a wrapping DIV with the class of ="header".

element "body"

A content element. Creates a wrapping DIV with the class of ="content".

element "footer"

A footer element. Creates a wrapping DIV with the class of ="footer".

element "columns"

The start of a set of columns (or table elements). Creates a TABLE with the class of ="mainTable".

element "left"

A column element. Creates a TD (column element) with the class of ="left".

element "main"

A column element. Creates a TD (column element) with the class of ="main".

element "right"

A column element. Creates a TD (column element) with the class of ="right".

element "gutter"

A column element. Creates a TD (column element) with the class of ="gutter". Used for space between columns.

element "devider"

An open devider element. Creates a DIV with a class of "devider". Used for seperating elements, either vertically or horizontally through CSS.

Static elements

The static elements are closely related to the design you are using, and even if all of the following elements should be supported under all designs, there can be elements that doesn't render what you expect. (Refer to Templating for more on these style templates)

element "logo"

Renders a wrapping DIV with the class of "logo", usually with a graphic element inside.

element "styleselector"

The styleselector is a list of available designs (or sites or whatever) a user can switch between. Usually creates a drop-down box of class "styleselector".

Dynamic elements

The dynamic elements make up the elements that are linked to content, Topic maps and menus.

element "relations"

Lists all relations to a certain page.

element "resources"

Lists all resources to a certain page.

element "news"

Lists all news associated with "news".

Note : You need a page with the id "news" to make this element work correctly. Note also that news-items are all sub-pages of this page.

element "crouton"

Creates a "cruoton" type menu, which is a mix of a normal sub-pages menu and a breadcrumb.

element "menu"

Creates a menu of the type for what style you specify. Supported menues so far are;

treeCollapsable, a fully collapsable menu.

left, a top-down menu.

right, a floating right-aligned menu.

sections, for a sections view.

(unspecified), for a normal style.

CSS

For reasons of easy distribution of various layouts, the CSS file for a given style lies in the "/templates/styles/[your_chosen_style]" directory. Beware; this file gets copied in to the "/site/[style]" directory every time you build a page, so don't do your edits in the "/site/[style]" CSS file: It will get overwritten! To ease the process of editing the CSS file, a command called "css" copies the CSS file from "/templates" into the corresponding "/site/[style]" directory.

As a lot of work sometimes needs to be done in the CSS file, even the above method might prove cumbersome. You can edit the CSS file in the "/site/[style]" directory, but do remember to copy that file back to the "/templates" directory before attempting any build commands, otherwise it will get overwritten.