Estás en: Inicio > Plantillas > Avanzado > Creando estilos personalizables Inicio

Creando estilos personalizables

El editor en vivo ofrece la edición de ciertos estilos de la página. Esto es así si la plantilla está preparada para permitirlo, es decir, si contiene un archivo especial definiendo los elementos personalizables.

Comenzando

El editor en vivo obtiene los elementos modificables de un archivo llamado template.yml.

Este archivo contiene una estructura de datos en formato YAML que representa los elementos personalizables.

:pages:
 - :title: nombre del grupo de estilos
   :styles:
    - :selector: selector css
      :title: titulo del selector
      :properties:
      - :type: color | font-size | font-family
        :default: valor por defecto
        :id: propiedad css a modificar

 - :title: nombre del grupo de estilos
   ...

Pages

El elemento pages define una agrupación de estilos relacionados. Esta agrupación puede ser "Menú principal", o "Productos destacados", para hacer referencia a un conjunto de estilos relacionados con el menú principal o con el listado de los productos destacados.

Costa de los siguientes elementos:

title: indica el nombre del grupo.

styles: define una lista de los estilos personalizables en este grupo.

:pages:
 - :title: "Menú principal"
   :styles:
    - ...
    - ...
 - :title: "Productos destacados"
   :styles:
    - ...
    - ...

styles

El elemento styles define una lista de estilos personalizables. Consta de los siguientes elementos:

title: indica el nombre del selector (a efectos de interfaz).

selector: indica el selector css editable.

properties: define una lista de las propiedades personalizables del selector.

:styles:
 - :title: 'General'
   :selector: "#main-menu"
   :properties:
    - ...
    - ...
 - :title: 'Enlaces'
   :selector: "#main-menu li a"
   :properties:
    - ...
    - ...

properties

El elemento properties define una lista de propiedades personalizables de un selector. Coincide con las propiedades css del selector. Consta de los siguientes elementos:

title: indica el nombre de la propiedad (a efectos de interfaz).

id: indica la propiedad CSS personalizable.

type: indica el tipo de propiedad (soportados los siguientes: color, font-size, font-family).

default: indica el valor por defecto de la propiedad.

:properties:
 - :title: "Color de fondo"
   :id: "background-color"
   :type: "color"
   :default: "#000000"
 - :title: "Color del texto"
   :id: "color"
   :type: "color"
   :default: "#FFFFFF"

Ejemplo completo

Tomando como referencia el siguiente código HTML:

<ul id="main-menu">
  <li><a href="/">Inicio</a></li>
  <li class="current"><a href="/pages/sobre-nosotros">Sobre nosotros</a></li>
  <li><a href="/pages/contacta">Contacta</a></li>
</ul>

El siguiente ejemplo define los estilos personalizables del menú principal:

:pages:
 - :title: "Menú principal"
   :styles:
    - :title: 'General'
      :selector: "#main-menu"
      :properties:
        - :title: "Color de fondo"
          :id: "background-color"
          :type: "color"
          :default: "#000000"

    - :title: 'Enlaces'
      :selector: "#main-menu li a"
      :properties:
        - :title: "Color de fondo"
          :id: "background-color"
          :type: "color"
          :default: "#000000"
        - :title: "Color del texto"
          :id: "color"
          :type: "color"
          :default: "#CCCCCC"

    - :title: "Enlace activo"
      :selector: "#main-menu li.current a"
      :properties:
      - :title: "Color de fondo"
          :id: "background-color"
          :type: "color"
          :default: "#333333"
        - :title: "Color del texto"
          :id: "color"
          :type: "color"
          :default: "#FFFFFF"
Estás en: Inicio > Plantillas > Avanzado > Creando estilos personalizables Inicio