Custom CSS Class in Sitebuilder

[Rob Bedeaux]

Have you ever wondered how to use the Custom CSS Class field found in every Sitebuilder page element? Here is a quick example of how to use that field to apply a custom table header color to the table page element. 

The Custom CSS Class field can be used in conjunction with a code element containing a <style> section. For example, in the attached screenshot, I have created the style name header-color-tbl . Next, add the following code element

<style>
.header-color-tbl {
background-color: #000;
}
</style>

In this example, the table element with the style name header-color-tbl will have a black (#000) header background color. Once you define the class name, in your style emblock, you can apply it to any code element. 

NOTE: Each page element supports slightly different attributes. So, it is generally best practice to create a unique class name for each page element type.