Två filer betraktas som standarddesignfilerna för ett tema: design.json
och design.css
.
design.json
anger format för komponenter
design.css
anger definitionerna för klassvärden (t.ex. färg och teckensnitt)
De här filerna finns i katalogen /designs/default/
i en temastruktur.
Filen design.json
Filen design.json
har följande struktur:
{ "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": [] } } }
Var och en av "styles":[]
-posterna kan innehålla en lista över format för just den komponenten. Titelkomponenten anger till exempel följande standardformat:
"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" } ]
Obs!:
Om du skapar anpassade format för en komponent och mappar den till format idesign.json
så behöver du inte använda hela namnet, som de som tillhandahålls med systemet. Ange bara den sträng som du vill använda. I stället för "COMP_STYLE_BOX"
för namnet, kan du till exempel använda bara "Box"
. Det här innebär att endast namnet "Box"
visas i listan för fliken Format i inställningspanelen för den komponenten, i stället för "COMP_STYLE_BOX"
.Namnvärdena mappas till de faktiska ord som ska visas i användargränssnittet, på följande sätt:
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
Filen design.css
Filen design.css
tillhandahåller definitionerna för klassvärdena. Här är några exempel.
.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; }