Všetky vstavané komponenty lokalít zdieľajú podobnú štruktúru tried CSS.
Každý komponent má v krajnom prvku <div> použité nasledujúce 3 štruktúry tried CSS:
scs-component scs-type design-style
Trieda type je typ komponentu (napríklad image, gallery alebo divider). Trieda design-style je vybraná trieda štýlu pre komponent, ktorá je definovaná v súbore motívu.
Základy štýlu motívov
V súbore design.json motívu sú uvedené všetky štýly (frame, shadow, highlighted atď.), ktoré možno použiť pre každý typ komponentu (napríklad button alebo image). Každý štýl má vlastnosti display name a class name. Zobrazovaný názov sa zobrazuje na karte Štýl na paneli Nastavenia. Názov triedy odkazuje na selektor CSS v súbore design.css motívu. Dole je napríklad uvedená položka komponentu 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"
}
]
},
Názvy vstavaných komponentov sú preložené, takže sa zobrazuje kľúč na získanie názvu štýlu zo zväzku prostriedkov. Ak na stránku pridáte komponent button a potom vyberiete štýl Jednoduché na paneli Nastavenia > Štýl, súbor design.json priradí zobrazovaný názov Jednoduché (kľúč COMP_STYLE_SIMPLE) k názvu triedy scs-button-style-3. Parameter button sa vykreslí s nasledujúcimi triedami:
scs-component scs-button scs-button-style-3
Ak pre daný komponent nie je vybraný žiadny štýl, použije sa predvolený štýl scs-type-default-style. V prechádzajúcom príklade sa tlačidlo vykreslí s nasledujúcimi triedami:
scs-component scs-button scs-button-default-style
Štýl scs-component-content
Pre každý vstavaný komponent existuje vo vnútri už spomínaného výrazu scs-component <div> vlastnosť content <div> s triedou CSS scs-component-content. Inak povedané:
scs-component scs-type design-style scs-component-content
V súbore design.css sa trieda scs-component-content často používa na určenie štýlu "rámčeka" okolo komponentu (napríklad použitie orámovania alebo tieňa).
Je potrebné poznamenať, že vo vstavanom súbore comp.css je spoločná trieda scs-component-content definovaná okrem iných vlastností CSS vlastnosťami position:relative a display:inline-block.
Vlastnosť scs-component-content sa používa na určenie štýlu "rámčeka" okolo každého komponentu, ale na úplné vytvorenie štýlu komponentu sú potrebné triedy špecifické pre komponent. Pozrite si časť Nastavenie štýlu podľa komponentu.