Designdateien

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 in design.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; }