Personalización de una plantilla partiendo de la Interpoint 1.6
En lugar de crear una plantilla desde cero, seleccionamos la plantilla de código abierto Interpoint y emplearemos su estructura como base.
La podemos descargar del siguiente enlace Interpoint
Se trata de una plantilla bastante sencilla, ideal para empezar a familiarizarse con la creación/modificación de nuestras plantillas para joomla.
En la carpeta de la plantilla encontramos 2 archivos principales que contienen las características:
- Index.php – Archivo principal, contiene todo el html y php que cargará el contenido de nuestra página.
- TemplateDetails.xml – Joomla precisa este archivo para reconocer la plantilla. En el contenido encontraremos la información de la plantilla: autor, fecha de creación, licencia, versión, etc. También encontraremos parámetros configurables desde el back-end. Una de sus características principales es la especificación de las posiciones de la plantilla en la que podremos incluir los diferentes módulos, así como todos los documentos que la forman.
En primer lugar vamos a modificar los datos de nuestra plantilla en el archivo TemplateDetails.xml
Una vez cambiados los datos, procederemos a definir las posiciones. Desde el panel de administración (back-end) podemos acceder a una vista previa de las mismas.
Eliminaremos las que no necesitemos, y crearemos algunas nuevas.
Una vez creadas las etiquetas, sera necesario acudir al archivo index.php y crearlas fisicamente.
También repasaremos las existentes, sustituyendo las etiquetas Interpoint por los nombres que hemos definido anteriormente (en este caso juancarlosh)
De esta manera, habremos modificado las posiciones y estarán disponibles para insertar nuestro contenido mediante Joomla. Al crear las posiciones, se define también el tipo de módulo y la forma en la que se insertará en cada posición. Mediante el parámetro name indicamos la posición donde se mostrará el módulo y el parámetro style, la forma en la que se incluye. Podemos utilizar varias opciones para el parámetro style. Estas son:
- “table” : El contenido del módulo se cargará mediante tablas, en este caso de forma vertical.
- “horz” : Igual al anterior pero en este caso de forma horizontal.
- “xhtml” : Este parámetro incluirá el contenido en divs.
- “rounded” : Este parámetro incluirá el contenido en divs anidados.
- “raw” : Se utiliza para cargar el contenido sin contenedores ni título.
Inclusión de nuevos parámetros de configuración
En la plantilla he decidido añadir una serie de parámetros de configuración nuevos. Entre otros, la opción de usar diccionario, la selección del estilo en 1-3 columnas y el color de fondo.
Para ello es necesario definir en el archivo TemplateDetails.xml
Accediendo al panel de administración encontraremos las nuevas opciones de configuración
Idiomas
Como hemos podido ver, todas las etiquetas llevan una asignación del tipo TPL_JUANCARLOSH_****. Gracias a estas etiquetas podremos crear traducciones para nuestra plantilla de forma rápida y sencilla. En el archivo TemplateDetails.xml definiremos la localización de los archivos con la traducción de las diferentes etiquetas
Como podemos observar, también cambiaremos el nombre de los archivos para que coincidan con la asignación de la plantilla.
En estos archivos encontraremos etiquetas antiguas de Interpoint, re nombraremos las que hemos reutilizado e incluiremos las nuevas definidas anteriormente.
Las modificaciones de idioma que realicemos sobre nuestra plantilla, las incluiremos en un fichero con nombre es-ES.override.ini dentro de la carpeta overrides que se encuentra en la siguiente ruta: /language/overrides
Si decidimos cambiar el valor de alguna variable incluida por defecto en joomla, lo sustituiremos en este archivo para facilitar las actualizaciones posteriores de joomla, módulos, etc.
Por ultimo cambiaremos el archivo favicon.ico para personalizar el logo de la web.
Otros archivos importantes son las hojas de estilo, que encontraremos dentro de la carpeta Css.
Una de las modificaciones realizadas es quitar la definición del color de fondo de body, ya que esta opción se asignará dinámicamente con las opciones de administración. Para ello realizamos un cambio en template.css
Para asignar el color dinamicamente crearemos una variable en index.php, recogeremos el valor asignado y se lo asignaremos al estilo del body dinámicamente
Con esto queda completada nuestra plantilla, y a un nivel muy básico muestro 2 capturas de como cambia el color de fondo
