Home > Site management > Themes > CSS

© Metadot Corporation

Gizmo styles  

Each gizmo has several html sections, and each section has own class name. You can easily use these class names to define specific css for the gizmos.

Gizmo area:

Every gizmo is placed inside a gizmo area which is a "div" element with class name "gizmo-area". The good practice is all gizmo styles to start their definition with this class, separating it from other page elements defined in the layout:
.gizmo-area table {
    color: #f00;
    border: 1px;

Gizmo content:

The wrapping div for each gizmo has a class name "gizmo-content". You can use this class name to define a common css for all gizmos:
.gizmo-content {
    font-family: Verdana, 'Trebuchet MS', Sans-serif;
    color: #555;

Specific gizmo type:

Each different gizmo type has own class composed by string "gizmo-" and the gizmo type ("Blurb", "FaqManager", "SiteMap" etc.). Here is the list of specific gizmo type classes:


The first line of a gizmo is its title. The titles are always placed inside heading tags as the heading number could be from 1 to 6. If you want to have custom css for gizmo titles you have use h1 to h6:
.gizmo-area h1, .gizmo-area h2, .gizmo-area h3, .gizmo-area h4, .gizmo-area h5, .gizmo-area h6 {
    font-family: Verdana, 'Trebuchet MS', Sans-serif;
    color: #555;
.gizmo-area h1 {
    font-size: 1.5em;
.gizmo-area h2 {
    font-size: 1.3em;
.gizmo-area h3 {
    font-size: 1.1em;
.gizmo-area h4 {
    font-size: 0.95em;
.gizmo-area h5 {
    font-size: 0.9em;
.gizmo-area h6 {
    font-size: 0.85em;

Gizmo description

Bellow the title is the gizmo description placed in separate div element which class name is "gizmo-description".

.gizmo-description {

Gizmo body:

Immediately bellow the description is the gizmo body which has class name "gizmo-body".
#sidebar .gizmo-body {
    margin-left: 10px;
    margin-right: 10px;

List elements:

All gizmos which have sub-items (News Managers, File Managers, Site maps, etc.) use list tags (<ul> or <ol>) to render their sub-gizmos. The class name of each ul/ol is "navigation_menu". The first <li> element has class name "first", the last element class name is "last". Here is an example css:
#main .gizmo-body ul li, #main .gizmo-body ol li {
    border: 0;
    background: transparent;
    margin-left: 20px;
    padding: 0;