Zwei Dateien gelten als die Standarddesigndateien für ein Theme: design.json
und design.css
.
design.json
gibt Stile für Komponenten an.
design.css
gibt Definitionen für Klassenwerte an (wie Farbe und Schriftart).
Diese Dateien befinden sich im Verzeichnis /designs/default/
in einer Theme-Struktur.
Datei design.json
Die Datei design.json
hat die folgende 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": [] } } }
Jeder der "styles":[]
-Einträge kann eine Liste mit Stilen für die jeweilige Komponente enthalten. Beispiel: Die Titelkomponente stellt die folgenden Standardstile bereit:
"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" } ]
Hinweis:
Wenn Sie benutzerdefinierte Stile für eine Komponente erstellen und diese Stilen indesign.json
zuordnen, müssen Sie nicht den vollständigen Namen verwenden, wie bei den vom System bereitgestellten Stilen. Geben Sie einfach die gewünschte Zeichenfolge an. Beispiel: Verwenden Sie anstelle von "COMP_STYLE_BOX"
als Name einfach "Box"
. Das bedeutet, dass nur der Name "Box"
in der Liste für die Registerkarte Stile im Einstellungsbereich für diese Komponente angezeigt wird, und nicht "COMP_STYLE_BOX"
.Die Namenswerte werden wie folgt den tatsächlichen Wörtern zugeordnet, die in der Benutzeroberfläche angezeigt werden sollen:
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
Datei design.css
Die Datei design.css
enthält die Definitionen für die Klassenwerte. Hier einige Beispiele.
.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; }