Page Structure

The general Cradur web page has the following structure (in psuedo CSS notation):

      body#page-pageName
      +--div.tpl.pageWidth
         +--div.tpl.hdr
         |  +--div.tpl.ctr
         +--div.tpl.main
         |  +--div.tpl.hrz.x01.comp
         |  |  +--div.tpl.ctr
         |  |    template element goes here
         |  +--div.tpl.hrz.x02.comp
         |  |  +--div.tpl.ctr
         |  |    template element goes here
         |  |
             there can be up to 98 div.hrz.xnn to accomodate menus and toolbars
         |  +--div.tpl.hrz.x99
         |     +--table.tpl
         |        +--tbody
         |           +--tr
         |              +--td.tpl.vrt x01
         |              |  +--div.tpl.ctr
         |                    contents of left-hand column here
         |              +--td.tpl.vrt x02
         |                 +--div.tpl.ctr
         |                    contents of right-hand column here
         +--div.tpl.ftr

As you can see, the structure is defined mostly in terms of classes. This allows you to apply a style rule to all elements of a class, or an intersection of classes. Through a combination of classes it is possible to identify each element uniquely if this is necessary.

Here is the reasoning behind the class naming:

tpl All template elements are assigned to this class. This helps avoid ambiguity when identifying elements, in case one of the following classes is defined in the user content.
pagewidth This could almost be an id, it is used for the main containing element of the page and is usually used to define the width of the central column where all content is dispalyed
hdr This defines the area within page width above the main content area, and can be used for example to put the language choice menu.
main This is the area that holds the main content, including banners, navigation menus, and user content
ftr This defines the area within page below the main content area, and can be used for example to put the Cradur link
hrz
Any horizontal element, used primarily to define height and position
vrt Any vertical element, used primarily to define width and position. Note that tables are used to divide the page vertically (I've yet to find a CSS method that works as well) so the vrt elements are table-data (< td > tags)

ctr This is a container element. Because CSS defines height/width to exclude any padding, adding padding to a hrz or vrt element would ruin the height/width calculation. Therefore this element is used. Note that the padding must by default be set to some minimal value (0.001em say) to make sure that all elements are contained within this box, otherwise some elements would overflow (i.e. if padding =0).
x01 - x98 This is simply a numbering of the elements in case you need to identify any particular one.
x99 Is used for the horizontal element (hrz) which holds the main user content
comp

This is replaced by the code for the template component included in this element. This is the code used in the layout screen, e.g. "banr", "mnux"

See the Layout page for a full list of template components and their formats.

So, for example if you wanted the right hand column of the main user content to have a red background you could use this very specific rule:

   div.tpl.main  div.tpl.hrz.x99  div.tpl.ctr  td.tpl.vrt.x02 {background-color:red;}

However it's usually enough to write:

   .tpl.hrz.x99  .tpl.vrt.x02 {background-color:red;}