Symposium incorpora un nuevo sistema de plantillas de evento que permite mayor flexibilidad y facilidad de personalización.

• Las nuevas plantillas responsivese adaptan a las resoluciones de los distintos dispositivos: ordenadores, tabletas y smartphones
• Se puede configurar su apariencia en tiempo real, viendo los cambios estéticos en vivo
• Puede crearse una versión específica de una plantilla por evento, permitiendo mayor personalización

Las nuevas plantillas responsive se pueden activar desde el mismo lugar que las anteriores, sección Diseño > Plantillasdentro del menú de edición del evento. Fíjate que tenga el sufijo -responsive en el nombre y el icono multiplataforma.

Una vez seleccionada la plantilla responsive, para poder modificar los colores deberemos hacer clic en el botón Ver evento. En la página del evento nos encontraremos un icono conforma de pincel en la parte superior izquierda.

Una vez seleccionada nuestra plantilla, al previsualizar nuestro evento nos encontraremos con un icono para configurar la plantilla. Este icono tiene la forma de un pincel para pintar, y se encuentra en la esquina superior izquierda. Recuerda que debes estar editando el evento para poder ver el icono.

Al hacer click se desplegará un editor de colores de la plantilla. Para modificar un color, tan solo tienes que hacer click sobre la casilla coloreada y se abrirá un editor con un espectro de colores completo. Una vez selecciones tu color haciendo click sobre el punto deseado de la gama y elijas el nivel de brillo del mismo, la plantilla se actualizará para mostrar el resultado de tu selección.

Para dejar de editar los colores haz click de nuevo sobre el icono del pincel. Si quieres restaurar los colores por defecto, haz click sobre el icono de restaurar (dos flechas circulares).

Además ahora es posible utilizar imágenes de cabecera sin límite de tamaño. En la sección Diseño > Personalizar podremos subir una imagen de cabecera y será posible indicar que no queremos recortar la imagen de cabecera.

De este modo podemos elegir si queremos utilizar una imagen de cabecera a modo de logo o si queremos utilizar una imagen de tamaño grande a modo de póster.

Para crear una plantilla debes descargar una ya existente. Te recomendamos que descargues la plantilla classic-responsive para modificarla acorde con tus requisitos.

Verás que dentro del paquete .zip que descargas existe la siguiente estructura de ficheros:

plantilla.zip
    /js
      - script.js
    /less
      - styles.less
    /partials
      - ficheros.ptl
    /templates
      - ficheros.tpl

El fichero /js/script.js te permitirá ejecutar tu propio código Javascript.

Para detectar la navegación entre secciones y lanzar código específico para cada una, puedes escuchar el evento render.handlebars de la siguiente forma:

     $('body').on('render.handlebars', function (e, template) {
          // tu código
     });

La variable template puede tomar los siguientes valores: abstract, accepted_abstracts, attendees, dates, detail, donations, files, main, news, programme, section, speakers, sponsors, tickets, upload, videos.

El fichero /less/styles.less te permitirá modificar los estilos de la plantilla. Podrás utilizar toda la potencia de la tecnología less: variables, mixins, etc.

Recuerda que nuestro fichero main.less incluye los estilos necesarios para incorporar Bootstrap como base, entre otros. Puedes consultar todos los componentes y estilos disponibles en la web de Bootstrap.

Los ficheros .tpl y .ptl son los templates y partials que utiliza Handlebars para renderizar el contenido de la página.

Los ficheros .tpl son las plantillas que se cargan al entrar en cada sección. Puedes modificar su contenido, pero debes respetar los nombres de estos ficheros ya que de lo contrario harás que las distintas secciones del evento dejen de funcionar.

Los ficheros .ptl son los parciales o partials, trozos de código que se pueden renderizar dentro de la página según sea necesario.

El fichero principal main.tpl es el fichero por el que se accede a la página. Es el que contiene la distribución principal de los elementos.

Este es su contenido en la plantilla classic-responsive:

{{> overlay }}
{{> navbar this }}
<div id="content-wrapper">
	{{> header this }}
	{{> menu this }}
	<div id="content" class="container">
		{{> detail this }}
	</div>
</div>
{{> footer this }}

La línea 1 carga el parcial overlay. Un parcial se carga con la sintaxis code_.partialappend_nombredelparcial_datos_callback_permite_anadir_el_contenido_de_un_partial_al_final_del_contenido_de_un_elemento_del_dom._datos_contiene_los_objetos_necesarios_para_la_correcta_carga_del_parcial._tras_la_carga_se_ejecuta_la_funcion_recibida_en_el_metodo_callback._ejemplo Para obtener instrucciones acerca de como modificar la plantilla, puedes leer ¿Cómo crear una plantilla?