Como ya hemos visto en otras ocasiones, la creación de una plantilla para Joomla decide en buena parte el éxito de nuestra página, ya que un buen aspecto y una buena presentación pueden ser decisivos a la hora de aportar comodidad en la navegación de nuestra página.
En éste pequeño tutorial, trataré sobre la modificación de una plantilla ya existente, ya que se trata de una solución mucho más simple y viable que la creación de una plantilla desde cero, y más teniendo en cuenta la gran cantidad de plantillas gratuitas que existen actualmente.
Trataremos en cuestión con la plantilla «Channel» que nos ofrece la comunidad a4joomla.com y cuya demostración podemos ver en el siguiente enlace: http://a4joomla.com/joomla-templates/channel/
La plantilla en cuestión la descargaremos desde el siguiente enlace, donde tan sólo introduciremos un nombre y nuestro email para que nos envíen el fichero .zip a nuestra dirección de correo electrónico: http://a4joomla.com/free-joomla-templates.html
Una vez descomprimido el zip veremos lo siguiente en su interior:
Como vemos, ésta plantilla tiene prácticamente el mismo contenido que las otras, teniendo como prioritarios los ficheros «TemplateDetails.xml» e «Index.php» ya que son los ficheros donde se almacenan las configuraciones principales. También observamos por ejemplo que ésta plantilla prescinde de archivos como el favicon.ico, no obstante, podremos añadirlo siempre que queramos.
Primero daremos paso a la edición del fichero TemplateDetails.xml, donde nos fijaremos en el apartado de las posiciones, las cuales renombraremos a nuestra merced, e incluso borraremos o añadiremos, es importante recalcar que las posiciones van a ser primordiales a la hora de diseñar nuestra plantilla, ya que van a definir en qué lugares de la página están situados nuestros módulos, extensiones y contenido.
Antes de nada, para ver el orden de las posiciones, previsualizaremos la plantilla desde el apartado «Gestor de plantillas» de nuestra administración de Joomla:
En nuestro caso he decidido simplificar la plantilla y eliminar algunas posiciones, debemos asegurarnos de poner nombres legibles a las posiciones y no limitarnos a señalarlas con números, para identificarlas en todo momento.
Una vez realizados los cambios a nuestro gusto, pasaremos a editar el fichero index.php, donde referenciaremos las posiciones cambiadas a continuación, tenemos que tener en cuenta que hay que poner exactamente los mismos nombres y con la misma sintaxis, de lo contrario empezarán a fallar las posiciones y a surgir errores, los cambios que he realizado anteriormente se pueden ver en la siguiente imagen:
Una parte que deberíamos revisar después de hacer todo ésto, serían las hojas de estilos .css, ya que en ellas se contienen formatos visuales imprescindibles tales como la modificación del tamaño o el color de texto, alineación, tamaño de imágenes, etc, por lo que sería conveniente echarles un vistazo… la plantilla css principal se encuentra en la ruta /css/template.css.
En nuestro caso no hemos hecho grandes cambios en las plantillas más allá de ajustar los márgenes y el tamaño del texto a uno que considero más adecuado, podemos crear nuevas variables a nuestro gusto, tales como las mostradas en la imagen, y definir un conjunto de atributos y dónde queremos aplicarlos, si a una sección determinada de la página o por ejemplo al cuerpo entero de la misma.
Otra opción que tiene ésta plantilla, si nos hemos fijado en ella, veremos que la plantilla muestra un par de imágenes desplegables a modo de presentación, y lo primero que todo usuario querría cambiar, sería la personalización de esas imágenes, lo cual explicaré a continuación:
Como ya hemos visto, la anterior imagen es una de las predeterminadas de ésta plantilla, ahora bien ¿Cómo hemos de hacer para cambiarlas y que se inicie una presentación de nuestras imágenes personalizadas?
Pues bien, hay varias formas de hacerlo, para simplificar un poco, explicaré la forma más sencilla: Tan simple es como sustituir nuestras imágenes personalizadas por las anteriores.. no olvidemos que al fin y al cabo son rutas de carpetas, y si sustituimos una imagen se verá reflejado el resultado en la página principal.
El directorio donde se almacenan éstas imágenes se encuentra en /images/sampledata, ahí encontraremos ambos ficheros de imagen.
En nuestro caso lo hemos hecho una vez ya esté subida e instalada la plantilla Joomla, de tal forma que tan sólo hemos de conectarnos con un servidor ftp a nuestra carpeta de Joomla, donde sustituiremos los ficheros para efectuar los cambios, en éste caso la ruta variará ligeramente, encontrándose ahora en: /templates/a4joomla-channel-free/images/sampledata… hay que tener cuidado, ya que éstas dos imágenes se encuentran duplicadas en el directorio padre de éste mismo… yo recomiendo sustituirlas también a fin de evitar confusiones y por comodidad… así mismo, también vemos que existe la opción de modificar otras imágenes que usa la plantilla, como pueden ser las flechas de transición de una imagen a otra, etc, los ficheros están situados tal y como se muestra en la siguiente imagen:
No nos olvidemos que para que todo ésto funcione, las imágenes que personalicemos han de tener el mismo tamaño en píxeles que las que van a ser sustituidas, de lo contrario podrían mostrarse descuadradas e incluso no llegar ni a aparecer, la redimensión de las imágenes la podemos realizar con cualquier editor de imágenes.
Básicamente los cambios más importantes y básicos de nuestra plantilla ya están realizados, podríamos seguir haciendo miles de modificaciones, pero aquí hemos tocado las más básicas y primordiales, como último paso, si queremos dejar constancia de nuestras modificaciones editaremos una vez más el fichero «TemplateDetails.xml» donde cambiaremos las líneas que se muestran a continuación adaptándolas a nosotros:
Con ésto ya tendremos listos nuestros cambios y nuestra plantilla para Joomla personalizada, espero que haya resultado de utilidad y os animo a crear y ser creativos en vuestras plantillas. Un saludo.