Plantilla personalizada

Las plantillas definen la parte visual de la web del evento. Dependiendo de la plantilla que se utilice para el evento, dispondrá de una maquetación distinta, localización de los botones, colores, tamaño y tipografía de las fuentes, etc.

Symposium ofrece varias plantillas por defecto, ya diseñadas y listas para su activación. a pesar de ello, estas plantillas son perfectamente personalizables. Desde esta sección, puedes descargar un kit para crear tus propias plantillas personalizadas. Dentro del archivo, encontrarás un documento con toda la información que puedas necesitar para crear tu plantilla.

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

Bajar plantilla de sistema

en este panel podrás encontrar todas las plantillas disponibles de la plataforma. 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. Los estilos se aplican mediante ficheros de estilos en cascada.

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

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. Los scripts se aplican mediante ficheros Javascript.

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.

Embeber 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:

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

tendrías que 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 estás 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, asegúrate de que esté seleccionada como plantilla disponible.

Anexo

Documento de bloques disponibles en las plantillas.