The stylesheets (V3.1 and earlier)
This is not as complicated as it might seem. It's actually very simple! Just leave everything as it is. Or you can modify styles or switch themes, in which case read on.
Minification of CSS files
Note: the only difference between minified and unminified is that minified has extraneous whitespace removed, some rules compressed, and explanatory comments purged from the stylesheet. This gives you a much smaller CSS file for production use. The idea is to edit the unminified version then minify it as the smaller active file. I use CSS Compressor but there are many others.
supermicro CMS is initially installed with eleven stylesheets (not all active):
- (1) default.css ('white.css' minified)
- (2) mini.css (minified) (active if 'Mini' theme selected)
- (3) mini-unminified.css
- (4) mobile.css (minified and active unless 'Mini' theme selected)
- (5) mobile-unminified.css
- (6) normalizer.css (minified and active)
- (7) normalizer-unminified.css
- (8) print.css (active)
- (9) slides.css (minified and active)
- (10) slides-unminified.css
- (11) white.css
When the system is first set up in 'setup' two more are created:
- (8) stylesheet.css (the same as 'default.css', minified and active)
- (9) extra.css (empty and active)
The active stylesheets are always (i) normalizer.css, (ii) stylesheet.css, (iii) mobile.css, (iv) slides.css and (v) extra.css, with (vi) print.css used for printing a page. The stylesheet default.css is a minified version of white.css.
Six active stylesheets might seem rather a lot, but media queries means that browsers choose between stylesheet.css and mobile.css according to the screen width, so only one is loaded at any one time. The other active stylesheets contain styles that apply to all screen widths so there is no point repeating them in stylesheet.css and mobile.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)
- Mini styles (an alternative theme from August 2020)
- Extra styles only (an optional additional stylesheet)
Whichever stylesheet was selected can then be edited and saved with Update styles. If any of 'Current', 'Default', 'White' or 'Mini' are selected then updated they 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 to enable normal styles to be modified without changing the main stylesheets.
The various #ids and .classes in the page structure allow the layout and design to be almost anything.
supermicro CMS is installed with the 'White' theme with stylesheet.css for desktops and mobile.css for smaller devices such as mobile phones. As from August 2020, an additional 'Mini' theme can be activated. Read how »
More information about stylesheets (CSS3) at TutorialRepublic »