The stylesheets
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, 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 Minifier but there are many others.
Installation
supermicro CMS is initially installed with eight stylesheets (not all active):
- (1) common-g.css (minified, always active)
- (2) common-h.css (minified, always active)
- (3) default.css (minified default, not active)
- (4) default-unminified.css (unminified default, not active)
- (5) mobile-default.css (minified default, not active)
- (6) mobile-default-unminified.css (unminified default, not active)
- (7) nav.css (active if selected in setup)
- (8) footer.css (active if selected in setup)
After install
When the system is first installed, three more stylesheets are created:
- (7) stylesheet.css (always active)
- (8) mobile.css (always active)
- (9) extra.css (initially empty, always active)
Minified stylesheets
The folder /css-unminified/ contains at least the following inactive stylesheets:
- (1) normalize-unminified.css
- (2) print-unminified.css
Minified versions of normalize-unminified.css and print-unminified.css are contained in common-g.css and common-h.css. To edit the styles they contain, edit the unminified sections, 'minify' them and paste into common-g.css and common-h.css then upload those two files. Stylesheets can be minified (compressed) here »
The difference between the 'common' stylesheets is that common-g.css specifies Google Fonts and common-h.css self-hosted fonts.
Some default styles are illustrated here »
Changing the styles
This can be done in 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)
- Current mobile styles (the styles currently in use)
- Default styles (the default styles in minified form)
- Default unminified styles (the original styles not minified)
- Mobile default styles (the default styles in minified form)
- Mobile default unminified 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 any of 'Current', 'Default' or 'Default unminified' are selected then updated, they will be saved as stylesheet.css – the main stylesheet, or mobile.css, depending on what was selected. To restore back to the original styles, select a default file and press Update styles. 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.
Why all those stylesheets? Only stylesheet.css (for wider screens), mobile.css and extra.css are active. The other inactive stylesheets can be selected and modified but Update styles only ever updates the active files.
stylesheet.css, mobile.css and extra.css are not in the download as such. The reason for that is to prevent the existing ones being over-written when an update is uploaded. The principle is to make updating the CMS as simple and easy as possible. It literally takes only a couple of minutes and can be done safely without affecting the look of the website.
More information about stylesheets (CSS3) at TutorialRepublic »
