Custom CSS - Adding CSS Modifiers to Content

You can apply custom CSS modifiers to an article that will allow the page to be styled differently to the rest of your site via your site skin.

Custom modifiers are metadata values related to an article. The property that holds these values is set in your subsite configuration and the modifiers are added to the page's body tag.

Step 1 - Create the Metadata

Create a new metadata property that will hold the values you'd like to use. In this example we've created the property in a "shared" group:

The property name and description should be something meaningful to you (they aren't important for this functionality). The values just need a name - the name is what will be output in the page source. You can add additional values at any time.

You can create multiple properties to help keep things organised, picking all of them in your subsite settings (see below).

There's more information about creating metadata in the Metadata Properties documentation.

Note that restrictions have been added to the site framework to remove any special characters and spaces from the metadata value when it is output in the page source. This is to make sure your classes are compliant and follow our BEM methodologies.

Step 2 - Subsite Settings

So that your site knows which metadata values should be output as CSS modifiers (as opposed to related metadata that might be there for search purposes etc) you need to pick the metadata property created in step 1 in your subsite configuration.

From your iCM enterprise URL, edit the subsite you are working on and open the "Configuration" tab.

In the "Look and Feel" section, select the metadata property that holds the values you'd like to use:

You can pick more than one property. The values from any of the selected properties will be output.

Step 3 - Relate the Metadata to your Article

Relate metadata values from your chosen property to your article:

You can relate multiple values, they'll all be output.

Step 4 - Using the Modifiers

The related metadata values are output as additional classes in the page's body:

The pattern of the CSS class is always body--METADATAVALUE

You can target this in you site skin, styling the page differently to the rest of the site, for example:

.body--demo .header {
    background-color:red;
}