Defining Custom CSS Classes for CMS Generated Elements

Note: Where you see ~ in a file path, it refers to the current folder for a given website and assumes you are using global_design_mode_theme as the main theme with the theme_merge system for customisation. For example /sites/YOURSITE/theme_merge/settings/image_sizes.json is the same as ~/settings/image_sizes.json

When your clients edit content within SetSeed they can choose from the standard list of element types for text (<h1>, <h2> … <p>, etc), or specify basic alignment options for images.

In addition to this you can create a list of 'Advanced' styles which can be applied for both text and images. These styles will be added as CSS classes to the element by the CMS. This allows you to add CSS and/or Javascript to apply advanced formatting and styling to those elements.

You can define a list of custom classes (advanced styles) to use with text level elements and image elements.

Text elements

Create a list of style using this file: ~/settings/advanced_text_styles.json

Image elements

Create a list of style using this file: ~/settings/advanced_image_styles.json

Here is an example format for either of the above files:

[
    "Lead_Paragraph"
    ,"Icon_Tick"
    ,"Icon_Blocked"
    ,"Icon_Info"
    ,"Icon_Question"
    ,"Icon_Alert"
    ,"Icon_Phone"
    ,"Icon_Email"
    ,"Icon_Home"
    ,"Button_Small"
    ,"Button_Medium"
    ,"Button_Large"
]

Remember, the names of the styles you add will be used as CSS classes, so they should be valid CSS class names with no spaces. Don't add the '.' at the beginning of each one though.

Once you've added the list of styles, they will show up in the 'Advanced Styles' menu when items are selected in the content editor.