CMS help pages
  
You are here: Home > Developers > Stylesheet

Stylesheet

The CMS uses a regular CSS stylesheet. Anything you put into the stylesheet will end up being published with the website in a file called 'theme.css'.

The CMS does not add anything to the stylesheet, or change it in any way. You are in full control of the stylsheet's content.

Only header styles that are defined in the stylesheet will be shown in the header SELECT list in the text editor. So, for example, if you only define H1, H2 and H3 tags, only those three header styles will be available to the user.

Special id's and classnames

.hideOnEdit
This is used for objects that show through the div that contains the text editor etc.. SELECT, OBJECT and EMBED are objects that will 'show through'. Apply this class to objects such as Flash movies to hide them when the text editor is invoked.

There is no need to define this class in the stylesheet.

#sitemap
ID of the sitemap outer div.

.smfolder
Classname of the div containing a folder in the sitemap.

.smpage
Classname of the div containing a page in the sitemap.

#usercontent
ID of the DIV containing the sections. This replaces the <cms type=user> tag.

.cms_image
Classname of the images in freestyle sections.

.cms_caption
Classname of the captions for images in freestyle sections.

Tables pasted into the editor by the user

The following styles are applied to to tables pasted into the editor form applications such as Word or Excel. The user is given a choice to keep the original formatting or remove all formatting.

If the user chooses to remove all formatting the following classnames will be given to the elements of the pasted table.

.cms_table -Classname of <TABLE> tags

.cms_th Classname of <TH> tags

.cms_tr - Classname of <TR> tags

.cms_td -Classname of <TD> tags

Syntax checking

The CMS does not automatically check the validity of the stylesheet syntax. We suggest you use the 'Preview' button in the stylesheet editor to view the effect of the styles you have created, and use the 'Validate' button as part of your final checks.

Bear in mind that the test function will show the styles as interpreted by the browser you are using and may apear differently on other browsers.

It is advisable to create and publish a test page and check rendering on various browsers.

Caution!

Do not include "display:inline" in redefinitions of HTML block tags e.g.:

H1{display:inline}

If you do this, the editor will give unpredictable results.