CMS help pages

Print this page
You are here: Home > [Developers] > Stylesheet

Stylesheet

Reserved id 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', so use this class to hide them when the editor is invoked.

#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

.si5img
Classname of the images in freestyle sections

#usercontent
ID of the main user content table (the table that replaces the <si5 type=user> tag

.Tcaption
Classname of the captions under images in freestyle sections

The following styles are applied to tables pasted into the editor by the user

.si5table
Classname of <TABLE> tags

e.g.
border:10px ridge red;
background:blue;
border-collapse: collapse | seperate;
"seperate" gives standard 2px cellspacing. "collapse" gives 0px cellspacing, in this case only the inner cell borders will show.

.si5tr
Classname of <TR> tags - we have not found a use for this one yet

si5td
Classname of <TD> tags - use to set cellpadding, background, font and border

The following styles only show while in the editor (non-preview mode)

.si5
Classname of editable text within templates (<si5 type=text>)

si5c
Classname of comments in templates (text within <c>...</c> tags)

.si5h
Classname of editable text within template textsource tags (<si5 type=textsource>

While the design page is not in preview mode, all editable content will show in these styles. It is up to you to create these styles. Choosing styles that contrast well with your page design will make it easier for users to identify comments and the areas they can edit.


QStitle
This is not a regular stylesheet parameter but is used to show a user-friendly name to the user.

When applied to redefined HTML tags the value of this parameter will show in the select list within the editor.

Example:
H5{
  font-size:8px;
  QStitle:Small print;
}

When applied to a classname the style will be listed in the style selector invoked by clicking the button in the section controls. If no classnames have this parameter set the button will not appear.

Example:
.userStyle{
  font-weight:bold;
  QStitle:Page header;
}


Sytnax checking
We do not test the validity of the stylesheet syntax, we suggest you use the test button in the stylesheet editor to view the effect of the styles you have created. 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.