Fişiere design

Două fişiere sunt considerate fişierele de design prestabilite pentru o temă: design.json şi design.css.

design.json specifică stilurile pentru componente
design.css furnizează definiţiile pentru valorile claselor (de exemplu, culoare şi font)

Puteţi găsi aceste fişiere în directorul /designs/default/ din structura unei teme.

Fişierul design.json

Fişierul design.json are următoarea structură:

{
    "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": []
        }
    }
}

Fiecare dintre intrările "styles":[] poate conţine o listă de stiluri pentru acea componentă specială. De exemplu, componenta Titlu furnizează aceste stiluri prestabilite:

    "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"
               }
    ]

Notă:

Dacă creaţi stiluri personalizate pentru o componentă şi mapaţi acea componentă la stiluri din design.json, nu va trebui să utilizaţi numele complet, ca în cazul componentelor furnizate cu sistemul. Pur şi simplu specificaţi şirul pe care doriţi să îl utilizaţi. De exemplu, în loc să introduceţi "COMP_STYLE_BOX" pentru nume, utilizaţi pur şi simplu "Box". Astfel, doar numele "Box" va apărea în lista aferentă filei Styles din panoul Setări pentru acea componentă, în loc de "COMP_STYLE_BOX".

Valorile de nume sunt mapate la cuvintele reale care se afişează în interfaţa cu utilizatorii, ca de exemplu:

                "COMP_STYLE_FLAT": "Flat",
                "COMP_STYLE_HIGHLIGHT": "Highlight",
                "COMP_STYLE_DIVIDER": "Divider",

Fişierul design.css

Fişierul design.css furnizează definiţiile pentru valorile claselor. Iată câteva exemple.

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