Za predvolené súbory návrhov pre určitý motív sa považujú dva súbory: design.json
a design.css
.
design.json
určuje štýly pre komponenty
design.css
poskytuje definície pre hodnoty tried (ako je napríklad farba a písmo)
Tieto súbory sa nachádzajú v adresári /designs/default/
v štruktúre motívu.
Súbor design.json
Súbor design.json
má nasledujúcu štruktúru:
{ "componentStyles": { "scs-image": { "styles": [] }, "scs-map": { "styles": [] }, "scs-title": { "styles": [] }, "scs-paragraph": { "styles": [] }, "scs-divider": { "styles": [] }, "scs-button": { "styles": [] }, "scs-app": { "styles": [] }, "scs-spacer": { }, "scs-gallery": { "styles": [] }, "scs-youtube": { "styles": [] }, "scs-socialbar": { "styles": [] }, "scs-document": { "styles": [] } } }
Každý záznam "styles":[]
môže obsahovať zoznam štýlov pre príslušný komponent. Komponent nadpisu napríklad poskytuje tieto predvolené štýly:
"styles": [{ "name": "COMP_STYLE_FLAT", "class": "scs-title-default-style" }, { "name": "COMP_STYLE_HIGHLIGHT", "class": "scs-title-style-2" }, { "name": "COMP_STYLE_DIVIDER", "class": "scs-title-style-3" } ]
Poznámka:
Ak pre komponent vytvoríte vlastné štýly a mapujete ich k štýlom v súboredesign.json
, nie je potrebné použiť úplný názov, ako je to v prípade štýlov, ktoré poskytuje systém. Stačí špecifikovať reťazec, ktorý chcete použiť. Príklad: namiesto "COMP_STYLE_BOX"
pre názov jednoducho použite "Box"
. Znamená to, že v zozname pre kartu Štýly na paneli Nastavenia sa pre príslušný komponent bude zobrazovať iba výraz "Box"
, nie "COMP_STYLE_BOX"
.Hodnoty názvov sú mapované k príslušným slovám na zobrazenie v používateľskom rozhraní, napríklad takto.
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
Súbor design.css
Súbor design.css
poskytuje definície pre hodnoty tried. Tu je niekoľko príkladov.
.scs-title-default-style { color: #333333; display: block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; }
.scs-title-style-2 { background-color: #DEF300; color: #333333; font-family: adobe-clean, sans-serif; padding-top: 2em; padding-bottom: 2em; }
.scs-button-default-style .scs-button-button:hover { background: #f7f8f9; border: 1px solid #c4ced7; color: #0572ce; box-shadow: inset 0 1px 0 #f7f8f9; text-shadow: 0 1px 0 #f7f8f9; }
.scs-button-default-style .scs-button-button:active { background: #0572ce; border: 1px solid #0572ce; color: #fff; box-shadow: inset 0 1px 0 #0572ce; text-shadow: 0 1px 0 #0572ce; }