Diferencias

Muestra las diferencias entre dos versiones de la página.

--- plantilla_personalizada [2023/04/21 12:19] – [Bajar plantilla de sistema] symposium
+++ plantilla_personalizada [2023/04/21 12:28] (actual) – symposium
@@ Línea 27: / Línea 27: @@
 {{  :admin:captura_de_pantalla_2013-03-21_a_la_s_11.35.48.png?nolink&  }}
+=====   =====
-===== Modificar plantilla de sistema para convertirla en plantilla personalizada =====
+===== Modificar plantilla de sistema para convertirla en plantilla personalizada (sólo Plantillas Responsive) =====
+==== Directorio assets ====
+Es el directorio que te recomendamos para incluír las imagenes que veas necesarias. Si necesitas hacer referencia a una imagen dentro de un partial o un template hazlo de forma relativa:
+<code>
+<font inherit/Courier New,Courier,monospace;;inherit;;inherit><img src="{{template_path}}assets/ficheros.png" /></font>
+</code>
+**Directorio js**
+Dentro de este directorio debes incluir tus ficheros Javascript. El fichero script.js se incluye automáticamente (es **importante** que no le cambies el nombre). El método que te recomendamos para ejecutar código en el evento "document ready" es el que figura en este archivo.
+Si necesitas ejecutar código después de que se cargue un fichero partial o template, debes escuchar al evento "render.handlebars" que se lanza sobre body. Ejemplo:
+<code>
+<font inherit/Courier New,Courier,monospace;;inherit;;inherit>$('body').on('render.handlebars', function (e, template) {
+// template contiene el nombre del bloque cargado, sea ptl o tpl
+});</font>
+</code>
+Si necesitas cargar otros ficheros Javascript te proveemos de un método que los carga de forma asíncrona. Este método carga en línea los ficheros que le indiques:
+<code>
+<font inherit/Courier New,Courier,monospace;;inherit;;inherit>$.loadScriptSeries(['lista/de/ficheros.js', 'otro/fichero.js'], function(){
+// callback a ejecutar cuando se haya cargado el último fichero
+});</font>
+</code>
+==== Directorio less ====
+Dentro del directorio LESS encontrarás la hoja de estilos .less que da forma a este tema. En la primera línea verás que se importa el fichero "main.less". Este fichero incluye los estilos Bootstrap y otros estilos de componentes de la plantilla como el calendario.
+El siguiente bloque define las variables. Puedes añadir todas las variables que necesites pero si eliminas alguna es posible que el selector de colores deje de funcionar adecuadamente.
+Recuerda leer http://lesscss.org detenidamente para obtener más información y poder sacar el máximo rendimiento al pre-procesado de hojas de estilo.
+==== Directorios partials y templates ====
+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.
+Al entrar en la página del evento por primera vez se carga el fichero main.tpl que renderiza el esqueleto principal de la página y después carga el contenido de la sección correspondiente.
+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. Puedes modificarlos y crear tantos nuevos como veas necesario. Te recomendamos que eches un vistazo a su estructura para hacerte una idea de como utilizarlos.
+Ejemplo:
+<code>
+.- {{> overlay }}
+.- {{> navbar this }}
+.- <div id="content-wrapper">
+.-     {{> header this }}
+.-     {{> menu this }}
+.-     <div id="content" class="container">
+.-         {{> detail this }}
+.-     </div>
+.- </div>
+.- {{> footer this }}
+</code>
+La línea 1 carga el parcial overlay. Un parcial se carga con la sintaxis "<font inherit/Courier New,Courier,monospace;;inherit;;inherit>{{> nombre }}</font>". En las líneas 2, 4, 5, 7 y 10 se cargan más partials. El segundo parámetro es el contexto de datos. Si utilizamos this enviamos el contexto de la plantilla actual al parcial que estamos cargando.
+Puedes explorar los ficheros .tpl y .ptl para ver las distintas opciones disponibles.
+Como ves en las líneas 3, 6, 8 y 9, se puede combinar código HTML y Handlebars alternativamente.
+El bloque div con identificador "content" es el que utiliza el motor para renderizar el contenido de cada sección. Si decides modificar el fichero main.tpl debes incluír este identificador para que el motor pueda renderizar las secciones correctamente.
+===== Modificar plantilla de sistema para convertirla en plantilla personalizada (sólo Plantillas Classic) =====
 Se recomienda no utilizar símbolos ni caracteres acentuados en los nombres de fichero.
@@ Línea 119: / Línea 191: @@
 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…”//).