Két fájl jöhet szóba egy téma alapértelmezett tervezési fájlja ként: a design.json
és a design.css
.
A design.json
fájl az összetevők stílusait adja meg.
A design.css
fájl az osztályértékek (például a szín és a betűtípus) definícióit adja meg.
Ezek a fájlok a témaszerkezet /designs/default/
könyvtárában találhatók.
A design.json fájl
A design.json
fájl szerkezete a következő:
{ "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": [] } } }
Minden "styles":[]
bejegyzés stílusok listáját tartalmazhatja az adott összetevőhöz. Például a címösszetevő a következő alapértelmezett stílusokat biztosítja:
"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" } ]
Megjegyzés:
Ha egyéni stílusokat hoz létre egy összetevőhöz, és leképezi azokat adesign.json
fájlban lévő stílusokra, akkor nem szükséges a rendszer által biztosított teljes nevet használni. Csak a használni kívánt karakterláncot kell megadnia. Például a név esetében a "COMP_STYLE_BOX"
helyett a "Box"
nevet használja. Ez azt jelenti, hogy a "COMP_STYLE_BOX"
helyett csak a "Box"
név fog szerepelni az adott összetevő Beállítások panelének Stílusok lapján megjelenő listában.A name értékeit a felhasználói felületen megjelenő tényleges szóra képezi le a rendszer, például:
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
A design.css fájl
A design.css
fájl az osztályértékek definícióját adja meg. Íme néhány példa.
.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; }