Managing CSS Styles
Styles give you the power to keep your site looking consistently great. A Style Group will improve consistency and will decrease the amount of time site maintenance takes.
- set up a site level group - this becomes your site default
- set up lower levels - Skin, Page Group, or Page as needed for specific style
In a Style Group you set up the font styles, colours, and other settings to apply to that type of content whenever it occurs inside that group. This means your website visitors and customers get the ‘look and feel experience’ that faithfully represents your brand or design in a professional way.
- use ‘List Groups’ to see a full list of available Styles and the number of defined CSS Styles inside the group
-
click into the Group name (or use Show Styles
) to see the styles that make up that group.
In the Style (CSS Object) are the following fields:
- Namespace - use this to give the exact hierarchy of CSS so that the styles are used as designed
- CSS Name - this must not contain spaces or special characters
- specify the Style as a Class; Id; or HTML element
- CSS Group is how you associate this individual style back to the Group level
- a Preview is shown that will dynamically update as you edit the colour, font and variables
-
the Colour picker has three main components:
- the colour rainbow slider in the centre
- the dynamic brightness slider on the left
- specific RGB value boxes
When you have reached your perfect colour, click the colour circle 
 in the lower left of the box to populate the Advanced colour selector field
you can add your own custom CSS code for a specific effect - with caution!
TIP! Explore different CSS font styles and custom CSS in a style that is not associated with any Style Group until you reach the desired effect. Set up an isolated ‘experimentation’ page, and go nuts trying to develop the look you want. Once you know what you’re getting, use this override in the CSS Style that you want to update and it will update it throughout your site where that Style/Style Group is referenced.
TIP! Take care when copying in CSS colour values. If you copy and paste in the CSS code for a colour from another website - make sure it does not paste in with the # in front, and watch for extra zeros at the front.