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-content
class 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.