Resources

Additional Section Classes

Overview

One option included with the Standard Section Options is the "Additional Section Classes".

This enables you to insert your own class or classes to a section or group of sections and provides extra customization possibilities without the need for repetitive code.

Configuration

The "Additional Section Classes" option is located in the "Advanced" panel of the Standard Section Options via the Platform Builder.

Additional Section Classes

Adding a Class

To add a class, open the "Advanced" options panel in the Standard Section Options and enter a class name into the "Additional Section Classes" option field.

Add Mulitple Classes

To add more than one class, separate each class name with a space. As shown in the example below.

Multiple Class Names

Note: When adding a class do not include the period (.), only the class name is required.

Where is the Class added?

Once a class or classes have been added to a sections "Additional Sections Options" field and the changes have been saved. The class(es) are placed into that sections <section>...</section> tag.

Before a class has been added to a section.


<section id="heroes_UNIQUE_ID" class="pl-sn pl-sn-heroes js-loaded pl-col-sm-12 pl-col-sm-offset-0">

After a class has been added to a section.


<section id="heroes_UNIQUE_ID" class="pl-sn pl-sn-heroes js-loaded pl-col-sm-12 pl-col-sm-offset-0 my-class">

As you can see from the "After" example, an additional class has been inserted called my-class. We can now use the my-class to include additional styling.

I've added my class, what now?

Once a class or classes have been added to a section, you can use that class name to create custom CSS rules that apply to that class alone and therefore, style any section or sections that have that class name(s) applied to them.


.my-class { ... }

Usage

Adding a class or classes to a section, provides endless customization possibilities and allows you to add CSS rules to apply a specific style without the need for repetitive code.

Utility Classes

Utility classes are CSS rules that apply a specific style that you may use frequently. This could be adding a certain background image or color, remove margin or padding and/or add a specific color to text.


.red-text { color: #FF0000; }
.blue-text { color: #0000FF; }
.white-text { color: #FFFFFF; }
.black-text { color: #000000; }

.no-margin-top { margin-top: 0; }
.no.margin-bottom { margin-bottom: 0; }

.no-padding-top { padding-top: 0; }
.no-padding-bottom { padding-bottom: 0; }

You can now add the class name to a section or sections and this will apply that classes styling to that section or sections.

In the examples above, the class name would be red-text, blue-text, white-text, black-text, no-margin-top and etc...

Nested Elements

Another powerful function of the "Additional Section Classes" is that you can use the class to target nested elements in that section. This could be a <h1> tag or a list (<ul>/<ol>) and allows you to add unique styling to any element in a section.

Targeting Nested Header Tags

An example for targeting a nested element would be to target a header tag. The Heroes section has a title option that uses the <h2> tag. We can style this element by suffixing our class and the <h2> selector.


.my-class h2 { ... }

This CSS rules styling will only affect sections that have the my-class class assigned to it and use a <h2> element.

Targeting Nested Classes

In the example below, we will be creating a new CSS rule using our custom class name and suffixing with another class from the Boxes section.

The Boxes section has description text that appears below the box title and is wrapped in a <div> that has a class called boxes-desc.


.my-class .boxes-desc { ... }

This CSS rule styling will only affect any Boxes section that have the my-class assigned to it.