Alle indbyggede sitekomponenter har den samme CSS-klassestruktur.
Hver komponent har følgende tre CSS-klasser, der anvendes på det yderste <div>-element:
scs-component scs-type design-style
Her er type komponenttypen (for eksempel image, gallery eller divider). Og design-style er den valgte typografiklasse for en komponent som defineret i temaets fil.
Grundlæggende oplysninger om tematypografier
Et temas design.json-fil indeholder alle de typografier (frame, shadow, highlighted og så videre), der kan anvendes på hver komponenttype (for eksempel button eller image). Hver typografi har både et display name og et class name. Fremvisningsnavnet vises på fanen Typografi i panelet Indstillinger. Klassenavnet henviser til en CSS-vælger i temaets design.css-fil. Posten for komponenten button er for eksempel følgende:
"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"
}
]
},
Navne på indbyggede komponenter er oversat, så du kan se en nøgle til hentning af typografinavnet fra ressourcepakken. Hvis du tilføjer en button-komponent på en side og derefter vælger typografien Simpel i panelet Indstillinger > Typografi, knytter filen design.json fremvisningsnavnet Simpel (nøglen COMP_STYLE_SIMPLE) til klassenavnet scs-button-style-3. Denne button vil blive gengivet med følgende klasser:
scs-component scs-button scs-button-style-3
Hvis der ikke er valgt nogen typografi til en given komponent, bruges standardtypografien scs-type-default-style. I ovenstående eksempel gengives knappen med følgende klasser:
scs-component scs-button scs-button-default-style
Typografien scs-component-content
For hver indbygget komponent er der en content <div> med CSS-klassen scs-component-content i den tidligere nævnte scs-component <div>. Med andre ord:
scs-component scs-type design-style scs-component-content
I filen design.css bruges klassen scs-component-content ofte til at formatere "kassen" omkring komponenten (for eksempel for at anvende en kant eller skygge).
Bemærk, at i den indbyggede comp.css-fil er den fælles klasse scs-component-content defineret med position:relative og display:inline-block blandt andre CSS-egenskaber.
Mens scs-component-content kan bruges som typografi til "kassen" omkring hver komponent, bruges de komponentspecifikke klasser til at fuldende typografien for en komponent. Se Komponentspecifik typografi.