Background Color Classes

The next group of controls offers the possibility to apply dynamic background colors to any section or column. For example, in your layouts, you might have certain sections that use a light or a dark background-color, and you want this to be consistent to all the layouts. Even better, you can control these colors dynamically from the style kits panel, by applying intuitive classes on the Sections (or columns) that you want. 

This way, if you want at some point to change the color of your light or dark background color globally, you don't need to browse through your pages and copy/paste styles among your sections to update the colors. 

Let's see how this works.

The Background Color Classes panel

In the Style Kits panel, look for the Background color classes panel. The panel contains tabs that contain the styling information for the light and dark classes.

Light Background

In the first tab you will find the following color controls:

  • Background color
  • Text Color
  • Headings Color

You can apply this style to any section or column by adding the class: sk-light-bg to the CSS Classes field under the Advanced tab of the section or Column. The background color, and the nested typographic elements will inherit the colors that you defined in the Light tab.

Remember to add the class without the dot, so it's simply sk-light-bg instead of .sk-light-bg

Dark background

Apart from sections with light background color, you almost definitely use sections that have a dark background color. In the same logic, the Dark background color option allows you to add color to such sections, with consistency and dynamic site-wide control.

In the second tab of the Background Classes panel you will find the following color controls:

  • Background color
  • Text Color
  • Headings Color

You can apply this style to any section or column by adding the class: sk-dark-bg to the CSS Classes field under the Advanced tab of the section or Column. The background color, and the nested typographic elements will inherit the colors that you defined in the Dark tab.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us