Tribiq CMS

Choose your language

2.6 Cascading Style Sheets (CSS)

We encourage the use of external CSS files, rather than using tables for layouts or putting styling into your template “inline”. An external CSS file is a separate file with the suffix .css. It contains style and presentation information for your templates.

There are many advantages of using external CSS files:

  • Style and layout information for an entire Template Family can be held in one place, making maintenance easier.
  • Different Template Families can have different stylesheets: you might want to add a layout optimised for mobile phones, or for visually impaired users, for example.
  • Your Templates are smaller in terms of file size and complexity.

Templates typically use <div> elements, with IDs and classes assigned to the divisions. If content falls within a <div>, it will be formatted to the stylings as defined in your stylesheet.

CMS code snippets usually sit within such <div> tags, and then when the actual content is rendered it comes with the appropriate styling as determined by the <div>.

A Template Family may contain at least two CSS files:

  • reset.css
  • stylesheet.css

Tribiq CMS includes a stylesheet called reset.css which provides a sound foundation upon which you can explicitly declare your styles. It will normalise a visitors default rendering of all HTML elements, for example it sets margin, padding, and border to 0, font sizes to 
default, italic and bold styles to normal. After this, your own stylesheet will be loaded. To use a reset stylesheet, simply rename the file to reset.css and place it in your /styles/ folder.

2.6.1 An Example

For example, this is how the main body content snippet might look within an appropriate <div> (in xHTML/PHP):

<div id=”maincontent”>
<?php
include "templateincludes/content_bodymain.inc.php";
?>
</div>

All of the content_bodymain content will now be wrapped in the <div> with the id
“maincontent”. You can style the <div> like this (in CSS):

#maincontent
{
    width:500px;
    background-color:#ffffff;
}

Now we would go to our stylesheet and write this (in CSS):

#maincontent p{
    text-size:2em;
}

This will set any paragraph element which falls within the maincontent <div> (and thus all paragraph elements embedded by content_bodymain) to a text-size of 2em.

2.5.1 CSS Customisation

Naturally, you can customise stylesheet.css to your preferences. To customise FCKeditor options please visit http://www.fckeditor.net/ .

If you are using Editize, to customize the WYSIWYG output, please take a look at the Editize manual, found in /editize/manual/index.html.

You will need to define tags such as <strong> and <em> in your CSS file.

Some default <div> ids (#) and classes (.) are written into the common include files themselves. You should go through these files to find them.

Be careful that you don’t overwrite them. These are found in the attached Appendix A.

You will have to create your own ids/classes for any other element you wish to style.

For general CSS help we recommend a visit to http://www.w3schools.com

Top of Page