Všechny vestavěné komponenty webů sdílejí podobnou strukturu tříd CSS.
Každá komponenta má na svůj nejkrajnější prvek <div> aplikovány následující tři třídy CSS:
scs-component scs-type design-style
Parametr typ je typ komponenty (jako je image, gallery nebo divider). Parametr design-style je vybraná třída stylu pro komponentu tak, jak je definována v souboru tématu.
Základní informace o stylech témat
V souboru design.json tématu jsou uvedeny všechny styly (frame, shadow, highlighted atd.), které lze použít pro jednotlivé typy komponent (jako je button nebo image). Každý styl má přiřazen jak zobrazovaný název (display name), tak název třídy (class name). Zobrazovaný název je uveden na kartě Styl panelu Nastavení. Název třídy odkazuje na selektor CSS v souboru design.css tématu. Jako příklad následuje položka pro 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 vestavěných komponent jsou přeloženy, takže uvidíte klíč k získání názvu stylu ze skupiny zdrojů. Pokud na stránku přidáte komponentu button a poté vyberete styl Jednoduchý na panelu Nastavení > Styl, soubor design.json přiřadí zobrazovaný název Jednoduchý (klíč COMP_STYLE_SIMPLE) k názvu třídy scs-button-style-3. Komponenta button bude generována pomocí následujících tříd:
scs-component scs-button scs-button-style-3
Pokud nebyl pro danou komponentu zvolen žádný styl, použije se výchozí styl scs-type-default-style. Tlačítko z předchozího příkladu bude generováno pomocí následujících tříd:
scs-component scs-button scs-button-default-style
Styl scs-component-content
Pro každou vestavěnou komponentu se v dříve zmíněném prvku scs-component <div> nachází prvek content <div> s třídou CSS scs-component-content. Jinými slovy:
scs-component scs-type design-style scs-component-content
V souboru design.css je třída scs-component-content často použita k nastavení stylu pro „rámeček“ kolem komponenty (například k ohraničení nebo stínování).
Stojí za zmínku, že v integrovaném souboru comp.css je společná třída scs-component-content, kromě jiných vlastností CSS, definována také s vlastnostmi position:relative a display:inline-block.
Zatímco třída scs-component-content je užitečná pro nastavení stylu pro „rámeček“ kolem každé komponenty, k úplnému nastavení stylu komponenty jsou potřebné třídy specifické pro příslušnou komponentu. Prostudujte si téma Styly specifické pro jednotlivé komponenty.