Diseño de archivos

Hay dos archivos que están considerados los archivos de diseño por defecto de un tema: design.json y design.css.

design.json especifica los estilos de los componentes
design.css proporciona definiciones para los valores de clase (como el color y la fuente)

Estos archivos están ubicados en el directorio /designs/default/ en la estructura de un tema.

Archivo design.json

El archivo design.json tiene la siguiente estructura:

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

Cada una de las entradas "styles":[] puede contener una lista de estilos de ese componente en particular. Por ejemplo, el componente de título proporciona los siguientes estilos por defecto:

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

Nota:

Si crea estilos personalizados para un componente y lo asigna a estilos de design.json, no necesitará utilizar el nombre completo como los que se proporcionan con el sistema. Solo tiene que especificar la cadena que desea utilizar. Por ejemplo, en lugar de "COMP_STYLE_BOX" para el nombre, utilice simplemente "Box". Esto implica que solo aparecerá el nombre "Box" en la lista del separador Estilos del panel Configuración para dicho componente, en lugar de "COMP_STYLE_BOX".

Los valores de nombre se asignan a las palabras reales que se van a mostrar en la interfaz de usuario del modo siguiente:

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

Archivo design.css

El archivo design.css proporciona las definiciones de los valores de clase: Estos son algunos ejemplos.

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