Alle innebygde områdekomponenter deler en lignende CSS-klassestruktur.
Hver enkelt komponent har følgende tre CSS-klasser brukt til det ytterste <div>-elementet:
scs-component scs-type design-style
type er komponenttypen (for eksempel image, gallery eller divider). design-style er den valgte stilklassen for en komponent, slik den er definert i temaets fil.
Grunnleggende om temastiler
Et temas design.json-fil viser alle stilene (frame, shadow, highlighted og så videre) som kan brukes til hver enkelt type komponent (som button eller image). Hver stil har både et visningsnavn (display name) og et klassenavn (class name). Visningsnavnet vises i fanen Stil for ruten Innstillinger. Klassenavnet henviser til en CSS-velger i temaets design.css-fil. Her ser du for eksempel komponenten button:
"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"
}
]
},
Navn på innebygde komponenter oversettes, så du ser en nøkkel til å hente stilnavnet fra ressursbunten. Hvis du legger til en button-komponent på en side, og deretter velger stilen Enkel i ruten Innstillinger > Stil, knytter filen design.json visningsnavnet Enkel (nøkkelen COMP_STYLE_SIMPLE) til klassenavnet scs-button-style-3. Knappen (button) gjengis med følgende klasser:
scs-component scs-button scs-button-style-3
Hvis det ikke er valgt noen stil for en gitt komponent, brukes standardstilen scs-type-default-style. I forrige eksempel blir knappen gjengitt med følgende klasser:
scs-component scs-button scs-button-default-style
Stilen scs-component-content
For hver innebygde komponent, i den tidligere nevnte scs-component <div>, finnes det en content <div> med CSS-klassen scs-component-content. Med andre ord:
scs-component scs-type design-style scs-component-content
I filen design.css brukes klassen scs-component-content ofte til å formatere boksen rundt komponenten (for eksempel til å bruke en kantlinje eller skygge).
Det er verdt å merke seg at i den innebygde filen comp.css er den vanlige scs-component-content-klassen definert med position:relative og display:inline-block, blant andre CSS-egenskaper.
Mens scs-component-content er nyttig til formatering av boksen rundt hver komponent, er komponentspesifikke klasser nødvendige til fullstendig formatering av en komponent. Se Komponentspesifikk stil.