Twee bestanden worden als de standaardontwerpbestanden voor een thema beschouwd: design.json
en design.css
.
Met design.json
worden stijlen voor componenten opgegeven.
design.css
bevat definities voor klassenwaarden (zoals kleur en lettertype).
Deze bestanden bevinden zich in de directory /designs/default/
in een themastructuur.
Bestand design.json
Het bestand design.json
heeft de volgende structuur:
{ "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": [] } } }
Elke "styles":[]
-ingang kan een lijst met stijlen bevatten voor die specifieke component. De titelcomponent biedt bijvoorbeeld de volgende standaardstijlen:
"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" } ]
Opmerking:
Als u aangepaste stijlen voor een component maakt en deze toewijst aan stijlen indesign.json
hoeft u niet de volledige naam te gebruiken, zoals bij systeemstijlen. Geef gewoon de string op die u wilt gebruiken. Gebruik bijvoorbeeld alleen de naam "Box"
in plaats van "COMP_STYLE_BOX"
. Dit houdt in dat alleen de naam "Box"
wordt weergegeven in de lijst voor het tabblad Stijlen van het paneel 'Instellingen' voor die component, in plaats van "COMP_STYLE_BOX"
.De naamwaarden zijn toegewezen aan de werkelijke woorden die moeten worden weergegeven in de gebruikersinterface, als volgt:
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
Bestand design.css
Het bestand design.css
bevat de definities voor de klassenwaarden. Hier volgen enkele voorbeelden.
.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; }