supermicro CMS is installed with seven initial stylesheets:
- default.css (minified)
- mobile.css (live and minified)
- normalizer.css (live)
- print.css (live)
- slides.css (live)
When the system is first set up in 'setup' two more are created:
- stylesheet.css (live and minified)
- extra.css (live and empty)
The active stylesheets are always normalizer.css, stylesheet.css and mobile.css with print.css used only when printing a page. The stylesheet default.css is a minified version of stylesheet.css which is smaller in size and loads faster. Its use is optional. So is extra.css
Some default styles in white.css and default.css are illustrated here »
Changing the styles
This can be done in two ways by opening the main admin page. Under Styles: is a drop-down list where any of the following can be selected and opened with Get styles:
- Current styles (the styles currently in use)
- Default styles (the original styles in minified form)
- White styles (the original styles not minified)
- Extra styles only (an optional additional stylesheet)
Whichever stylesheet was selected can then be edited and saved with Update styles. If 'Current', 'Default' or 'White' were selected it will be saved as stylesheet.css — the main stylesheet. Editing and updating 'Extra' will only change extra.css — an optional additional stylesheet that can be used if required to add special styles or try things out.
Browsers will read extra.css after the others so that normal styles can be changed without changing the main stylesheet.
By default supermicro CMS has one theme titled 'White' and a second one: 'mobile' for mobile phones. Changing the theme completely is quite a big job even for a simple website if it is to resize properly on different devices. It may be better to start from scratch but requires an understanding of CCS3. A way to do this is to create a completely new stylesheet default.css to replace the existing one and then select it as described above. It is always possible to restore the original styles by selecting and updating back to white.css.
The various #ids and .classes in the page structure allow the layout and design to be almost anything.
More information about stylesheets (CSS3) at TutorialRepublic »