Design guidelines

The CMS uses 7 separate stylesheets to manage all of the CSS in each design template. The CMS also has a default copy of each of these files so that if one is omitted from a design then the default will be used.

The following list describes each of the stylesheets:

• default.css
  Contains the CSS for defining the main page structure, layout divs and visuals of the style.
  
  
• formatting.css
  Contains CSS for styling the standard HTML elements (I.e. img, a, h1, h2, ul, li etc).
  
  
• navigation.css
  Contains CSS for styling the main navigation items.
  
  
• content_types.css
  Contains CSS for styling the CMS's main content types that are used to generate the page content.
  Each piece of content generated by the CMS is set with a default class name. For example, the image content type is assigned with the class 'ct-image'. Some of the more complex content types require sophisticated styling so it is advised that these stylesheets are modified with care.
  
  
• content_classes.css
  As well as content types having their own preset class names, content can also be assigned with additional class names using the CMS. This is useful for assigning multiple pieces of content with a particular style without having to update the CSS for the preset class name. For example, if an image content type was assigned with the class name 'image1' then its class tag would read class="ct-image image1".
  This stylesheet should be used for CSS for targeting these classes.
  
  
• form.css
  This stylesheet should be used for CSS for styling all forms within a site and their related elements such as input, select and textarea.
  
  
• ie-6.css
  We tend to discourage the use of CSS “hacks” (even if they do validate) to display different styles depending on a web browser (mainly Internet Explorer). Instead we rely on the use of conditional comments to include stylesheets for IE6 and IE7.  This lets us put any workarounds in those files instead of cluttering up the other stylesheets.
  This stylesheet is loaded to provide CSS for hacks and bug fixes for Internet Explorer 6.
  
  
• ie-7.css
  See ie-6.css.
  This stylesheet is loaded to provide CSS for hacks and bug fixes for Internet Explorer 7.
  
  
• page_classes.css
  As well as pages having their own unique preset id, for example: id="p-page-url", they can also be assigned with additional class names via the CMS. This is useful for assigning multiple pages with a particular style.
  This stylesheet should be used for managing CSS for targeting these classes.

Note: All filenames are case sensitive.

Next - The HTML Template >>