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.