Component Styling Basics

All built-in Sites components share a similar CSS class structure.

Each component has the following three CSS classes applied to its outermost <div> element:

 scs-component scs-type design-style

The type is the component type (such as image, gallery, or divider). The design-style is the chosen style class for a component, as defined in the theme’s file.

Theme Styles Basics

A theme’s design.json file lists all the styles (frame, shadow, highlighted, and so on) that can be applied to each type of component (such as button or image). Each style has both a display name and a class name. The display name is shown on the Style tab of the Settings panel. The class name refers to a CSS selector in the theme’s design.css file. For example, the entry for the button component follows:

"scs-button": {
         "styles": [{
                          "name": "COMP_STYLE_ALTA_SMALL",
                          "class": "scs-button-default-style"
                          },
                    {
                          "name": "COMP_STYLE_ALTA_LARGE",
                          "class": "scs-button-style-2"
                          },
                    {
                          "name": "COMP_STYLE_SIMPLE",
                          "class": "scs-button-style-3"
                          }
                    ]
},

Names of built-in components are translated, so you see a key to get style name from the resource bundle. If you add a button component to a page and then choose the Simple style in the Settings > Style panel, the design.json file associates the display name Simple (key COMP_STYLE_SIMPLE) with the class name scs-button-style-3. The button will be rendered with the following classes:

scs-component scs-button scs-button-style-3

If no style is chosen for a given component, then the default style, scs-type-default-style, is used. In the preceding example, the button will be rendered with the following classes:

scs-component scs-button scs-button-default-style

The scs-component-content Style

For every built-in component, inside the scs-component <div> mentioned previously, there is a content <div> with the CSS class scs-component-content. In other words:

scs-component scs-type design-style
scs-component-content

In the design.css file, the scs-component-content class is often used to style the "box" around the component (for example, to apply a border or shadow).

It’s worth noting that in the built-in comp.css file, the common scs-component-contentclass is defined with position:relative and display:inline-block, among other CSS properties.

While scs-component-content is useful for styling the "box" around each component, component-specific classes are needed to fully style a component. See Component-Specific Styling.