ullCms CSS style guide

General styles

Define styles for common tags globally for the (cms) content.

This ensures, that the wysiwyg editor displays the correct formatting, and that also the backend/modules areas are formated in the style of the website design.

Example:

p {
  font-family: Arial;
}

h1 {
  font-size 1.2em;
  color: red;
}

Define styles for "special" areas like navigation, sidebar etc by using the appropriate classes.

Example:

#sidebar p {
  font-family: Georgia;
}

#sidebar h1 {
  font-size 1.1em;
  color: orange;
}

Lists

Often lists are styled with custom bullets etc. As lists are widly used in the navigation and sidebar, defining them globally would mean a lot of effort to re-disable all unwanted styles for the navigation and sidebar.

Therefore the common style for lists (content, wysiwyg edtior) is definded under the "ull_cms_content" css class.

Example:

.ull_cms_content ul {
  list-style-type: none;
}

.ull_cms_content ul li {
  padding-left: 17px;
  background-image: url(/images/bullet.png);
  background-repeat: no-repeat;
  background-position: 0 2px;
}

ckEditor

To see the ull_cms_content style in ckEditor the following configuration is necessary:

/* web/js/CKeditor_config.js */

CKEDITOR.editorConfig = function( config )
{
    // Set a content area body css class
    config.bodyClass = 'ull_cms_content';
}