Plantilla personalizada

Las plantillas para eventos definen cómo se muestra la página del evento: los colores, el tipo de letra, la disposición de las capas, etc.

Para personalizar estas plantillas haz clic en la opción Plantilla personalizada que encontrarás en el apartado Diseño.

Bajar plantilla de sistema

Aquí se listan todas las plantillas del sistema. Escoge la plantilla que quieras modificar a tu gusto y descárgala. Algunas plantillas tienen variantes según el color base.

El paquete comprimido que has descargado contiene un fichero tpl con la estructura de la plantilla, dos ficheros de texto con instrucciones, uno en español y otro en inglés, y directorios para localizar ficheros JavaScript y CSS personalizados.

Modificar plantilla de sistema para convertirla en plantilla personalizada

Se recomienda no utilizar símbolos ni caracteres acentuados en los nombres de fichero.

Directorio ASSETS

En este directorio deberán incluirse todas las imágenes que quieran enlazarse desde la plantilla.

Directorio CSS

En este directorio deberán incluirse todos los estilos que quieran enlazarse desde la plantilla.

Si el fichero css hace referencia a una imagen incluida en el directorio assets, la ruta deberá ser relativa. Por ejemplo, si en nuestro fichero styles.css quisieramos poner como fondo la imagen disponible en assets/background.png usaríamos:

body {
  background-image: url("../assets/background.png");
}

En este directorio puede existir cualquier número de ficheros css, que deberán ser correctamente referenciados desde la plantilla (ver fichero tpl).

Directorio JS

En este directorio deberán incluirse todos los scripts que quieran enlazarse desde la plantilla.

Si algún script hace referencia a una imagen incluida en el directorio assets, la ruta deberá ser relativa.

En este directorio puede existir cualquier número de ficheros Javascript, que deberán ser correctamente referenciados desde la plantilla (ver fichero tpl).

Fichero TPL

El fichero tpl contiene la información a renderizar por el sistema. La plantilla está escrita en lenguaje HTML y lleva etiquetas especiales delimitadas por dobles llaves que corresponden a los distintos bloques definidos.

{{ ETIQUETA }}

Al realizar una plantilla se pueden renderizar los bloques que se deseen, en cualquier orden. Además es posible englobarlos en cualquier contenido HTML para facilitar el estilo.

Estilos y scripts

Al principio del fichero, dentro de la correspondiente etiqueta HTML <head> deberán incluirse los estilos y scripts definidos por el usuario. Para hacerlo correctamente, de nuevo, las rutas deberán ser relativas.

Por ejemplo, para incluir los ficheros presentes en este ejemplo…

assets\
css\
- styles.css
js\
- script.js
fichero.tpl

…deberemos hacerlo de la siguiente manera:

<head>
    {{ IE COMPATIBILITY }}
    {{ METAS AND TITLE }}
    {{ OTHER LINKS }}
    <!-- reset -->
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    {{ SCRIPTS }}
    <script type="text/javascript" src="js/script.js"></script>
</head>

Además, es posible consultar si un bloque está disponible con sentencias IF. De este modo, es posible saber si estamos en una determinada sección, o si un bloque está presente para renderizar un contenido de una forma u otra. Por ejemplo:

<!-- !IF SUBHEADER IMAGE -->
    <div id="event-header-text">
	{{ SUBHEADER TITLE }}
	<div class="enrolment_wrapper">
	    {{ ENROLMENT BUTTON }}
	</div>
	{{ SUBHEADER IMAGE }}
    </div>
<!-- END IF SUBHEADER IMAGE -->

Puedes ver en detalle los bloques disponibles en cada sección en el anexo más abajo.

Subir plantilla personalizada

Una vez terminada la plantilla, tienes que crear un fichero comprimido que contenga los siguientes ficheros y carpetas:

el fichero tpl
las carpetas assets, css y js

Es importante que todos estos elementos no estén contenidos dentro de ninguna carpeta extra, sino directamente en la raíz del fichero comprimido.

En la sección Nueva plantilla completa todos los datos:

el nombre que darás a tu plantilla
el número máximo de elementos a mostrar en el menú (el resto de elementos del menú se mostrarán en la opción de menú “Más…”)
una captura de pantalla que sirva para previsualizar tu plantilla
el fichero comprimido

Y ya puedes hacer clic en Guardar. A partir de ahora tendrás disponible para cualquier evento tu plantilla personalizada. Si tu plantilla no aparece en la sección de plantillas de la edición del evento, cerciorate de que esté seleccionada como plantilla disponible.

Anexo

Documento de bloques disponibles en las plantillas.