Theme Engine Documentation

What are built-in CSS classes?

Rich text editor, database builder and other modules compiles a highly flexible HTML code. You cannot modify it, but you can fully control its style using CSS.

Rich Text Editor

Our WYSIWYG rich text editor uses paragraph, heading, ordered list, unordered list and span elements for text formatting. All CSS classes that are named after {tag-name}.cms are included into the editor toolbar and used in text by default: p.cms, h1.cms, etc. Every break (pressing Enter) creates a new paragraph (p.cms), which can be changed to heading (h1.cms) when editing text. When you select only a portion of the text, you can apply span.cms.

You can define the styles of p.cms, h*.cms, ol.cms, ul.cms, span.cms, a.cms and img.cms in your Global style sheet. Have in mind that these classes can have only formatting and no positioning settings. This means that you can change the font, background, borders, etc., but you cannot change the display type, set float, width, etc. Changing element default positioning settings would break down the text editor.

In addition to default *.cms classes, you can create your own in the form of {tag-name}.cms-{class-name}. For example, p.cms-code would be included into the editor toolbar to apply as a second class together with p.cms.

Database Builder

In the list page, the whole list is wrapped in div.db-wrap. If items are displayed in multiple columns, every line is wrapped in div.db-row. Every item is wrapped in div.db-item. In the list every item also gets an additional class defined by the database layout: .db-item-one-column, .db-item-two-columns or .db-item-three-columns.

Every element of an item is wrapped in div.db-element. It also gets an additional type-specific class, for example .db-element-title, .db-element-picture, .db-element-text-line, .db-element-label, .db-element-select-box, etc. Element content is formatted as defined when building a database.

Modules

Many modules differ how they output HTML, but there are some common rules. If a module outputs a list (menu, submenu, locale selection, gallery, etc.), HTML looks like this:

  1. <ul class="{module-name}">
  2.     <li class="[selected] [first|last]"><a><span|img/></a></li>
  3. </ul>

If a module outputs a form, HTML looks like this:

  1. <form id="{module-name}" class="FullForm|SmallForm">
  2.     <div class="label"><label/></div>
  3.     <div class="input"><input class="input-{name}"/></div>
  4.     <div class="input submit"><input/></div>
  5. </form>

Topics