Sitemagic CSS Interface

Customizing Sitemagic CMS using CSS (Cascading Style Sheets) is quite simple. The framework wraps all components and extensions within containers with unique CSS classes. This enables us to easily target specific HTML elements within GUI controls or extensions.

CSS Class

Explaination

SMCheckboxList

GUI Control - Registered on div element containing checkbox list

SMFieldset

GUI Control - Registered on fieldset element

SMGrid

GUI Control - Registered on table element

SMInput

GUI Control - Registered on input elements. To target a specific input type, e.g. checkboxes, use: input[type="checkbox"].SMInput { ... }
To target an input element of type textarea use this instead: textarea.SMInput { ... }

SMLinkButton

GUI Control - Registered on span element containing button icon and button link. To style the text link simply use: span.SMLinkButton a { ... }

SMOptionList

GUI Control - Registered on select element containing option elements

SMTreeMenu

GUI Control - Registered on div element containing tree menu. To style links in tree menu, use this selector: div.SMTreeMenu a { ... }

SMExtension

Registered on div element containing output from a Sitemagic extension

ExtensionName

ExtensionName is replaced by the internal name (folder name) of an extension. Registered on div element containing output from an extension. Examples: SMPages, SMMenu, SMContact, SMLogin, etc.

SMPagesExtension

Registered on div element contaning output from a content page extension.
The same element will also have the PHP class name of the page extension registered as a CSS class.

The CSS classes listed above is what it takes to enable us to target specific HTML elements pretty much anywere within Sitemagic CMS. Here is a couple of examples demonstrating the use of these classes:

Change font color of all link buttons to red
span.SMLinkButton a { color: red; }

Create red border around contact form table
div.SMContactContentPageExtension table { border: 2px solid red; }

Remove text decoration (underline) from link buttons and tree menu
div.SMTreeMenu a, span.SMLinkButton a { text-decoration: none; }

Style data grid (table) within a custom extension called SimpleShop
div.SimpleShop table.SMGrid { border-collapse: collapse; }
div.SimpleShop table.SMGrid td { padding: 3px; border: 1px solid silver; }
div.SimpleShop table.SMGrid tr:nth-child(even) { background-color: gray; }
div.SimpleShop table.SMGrid tr:nth-child(odd) { background-color: whitesmoke; }

Apply style to link buttons on a specific content page
form[action="/Newsletter.html"] span.SMLinkButton a { color: blue; text-decoration: underline; }

How to identify elements

Most modern browsers features so called Developer Tools which enables us to inspect most objects (or elements) on a web page. Firebug is a very popular extension for the Firefox browser. Safari and Chrome both have a great inspector and debugger built right in. Internet Explorer also comes with developer tools, although not nearly as good as the tools that ships with the other browsers. The developer tools are usually accessible using the F12 key on the keyboard.

From Chrome, Safari, and IE11 simply right click an element on a web page and select Inspect Element. This brings up the inspector. On the left side we see the HTML code that makes up the element, its parents, and children. The right side reveals CSS styles applied to the selected element. It also allows us to change both HTML and styles on-the-fly which is great for prototyping and testing.