![]()
Skins are used to add style information to a Template Family. Rather than link template HTML to CSS style information on a one-to-one basis, one Template Family can have multiple Skins to choose between.
This means that if you want a new look and feel for a site, you need not write a completely new Template Family, and merely need to write a new Skin.
Skins are added to a Template Family by creating sub-folders in the skins sub-folder of a Template Family's own directory.
A Skin's directory should contain the following file:
stylesheet.css
Your stylesheet.css file should contain all of your style rules for the page, and will be included automatically by the CMS when someone views a page.
There are two more optional files:
reset.css stylesheet_print.css
reset.css is also automatically included by the CMS when someone views a page, and should be used to reset any default styles imposed by a viewer's browser
stylesheet_print.css is included whenever when someone prints a page, and should be used to adjust/turn off styles when printing.
We also recommend that you create an images directory to store any images you need.
It's probably best if you organise your code, and split it up into multiple files if needed. You can add extra files to the skin directory, and the CMS will automatically include them (as long as they are not using one of the special names such as reset.css or stylesheet_print.css).
Note that you should not attempt to access additional files using the @import statement if they are in the same directory; because the CMS automatically includes them this will cause them to be included twice.
When writing a Skin, you should ensure that you target the Template Family that it will live under specifically. You should add style information to all of the elements and all of the Slots that a Template has.
If you wish to have a Skin that covers multiple Template Families, rather than try to write generic CSS rules that might cover multiple Templates, you should make multiple versions of the Skin that target each Template Family specifically.
When adding a Plugin to a Slot, most Plugins have the choice of either inheriting their style information from the currently active Skin, or overriding the currently active Skin and using their own styles called Themes.
As most Plugins have the option to use their own styles, when writing a Skin you need not worry too much about adding styles for every Plugin that exists. The chances that if a Plugin is not in common use, it will come with its own styles.
However you should add style rules for Plugins wherever you can, in order to ensure that everything that is placed on a page has the same style.
At the very least you should add style rules for common Plugins that come with the CMS as standard, i.e. the Breadcrumbs Plugin, the Content List Plugin, the Content Plugin, the Extranet Plugin, the Document Content Type Plugin, the Footer Plugin, the Menu Plugin, the Picture Content Type Plugin, the Publication Date Plugin, the Search Plugin and the Sitemap Plugin.
Each Plugin will be contained inside a <div> element with a CSS class-name in the following format:
plugin_class_name__theme_name
Where plugin_class_name is the Plugin's PHP class-name, and theme_name is the name of the theme that is currently in use.
In the rare case where a Plugin does not use a theme, then the CSS class-name will just be:
plugin_class_name__
You should use these CSS class-names to target elements in the Plugin to style.
You can add a comment here