Los templates o plantillas del Frontend de Joomla conforman el aspecto estético del sitio web. La mayor flexibilidad de Joomla en cuanto a diseño supone una separación de los contenidos por un lado y el diseño por otro. Esto quiere decir que podemos cambiar en un instante el diseño del sitio sin alterar sus contenidos ni su organización. Cuando instalas tu Joomla por primera vez, este ya trae dos templates por defecto: Rhuk Solar Flare II, Made your Web (atención: esto puede haber cambiado entre el momento en que escribí este tutorial y ahora que lo lees).

De lo mejor que te da Joomla, es también la posibilidad de conseguir y descargar (gratuitamente o pagando) miles de templates listos para instalar y usar en tu sitio Joomla.

¿Dónde comprar templates profesionales para Joomla?

¿Dónde descargar templates gratuitos para Joomla? - Free Joomla Templates

El repositorio más grande de templates Opensource de Joomla es:

http://www.joomlaos.de/set_albumName,album03/option,com_gallery/Itemid,37/include,view_album.php.html

Clases de templates para Joomla

Este tema se verá aquí de un pantallazo dado que por la extensión del mismo será ampliado en nuestro segundo tutorial de templates.

Básicamente hay dos clases de templates para el frontend:

1 - Variable Width Templates (Templates de ancho variable): Estos templates tienen la particularidad de amoldarse al ancho de pantalla de los usuarios que tengan distintas resoluciones de pantalla. Esto permite aprovechar de una mejor manera el ancho de la pantalla. La principal contra que posee este tipo de templates es que no se pueden utilizar imágenes de un tamaño fijo, por ejemplo en la cabecera, ya que en otras resoluciones se verá mal.

La maquetación de los templates de ancho variable está basada en estructuras de tablas, en cuyas celdas se "acomodan" las imágenes y los contenidos. El concepto moderno de diseño web cuya tendencia va hacia XHTML/CSS, hace que la utilización de tablas para "armar el diseño" de las plantillas web tienda en un futuro muy cercano a desaparecer. Esto marca una tendencia que ya se nota demasiado en Joomla y es la creciente utilización de diseños basados en layers.

2 - Fixed Width Templates (Templates de ancho fijo): Estos templates tienen un ancho fijo independientemente de la resolución de pantalla que tenga el usuario que lo ve. Generalmente (aunque esto no es una condición necesaria) están basados en capas (layers, o etiquetas div) cuya ubicación y tamaño se definen externamente en las CSS. Este tipo de templates pertenecen a la tendencia actual de maquetado XHTML/CSS y respetan en mayor medida los estándares de usabilidad y accesibilidad, sin embargo su creación y edición es notablemente más difícil que los templates basados en tablas.

Si sos un principiante y deseas editar tus propios templates o personalizarlos, te recomiendo que comiences a probar con templates basados en tablas, porque son los más fáciles de editar, pero luego cuando adquieras experiencia, comiences a utilizar templates basados en capas.

Distribución de contenidos dentro del template de Joomla

El siguiente esquema muestra la distribución de un template de Joomla de tres columnas.

Templates a 2 o a 3 columnas

Existen templates diseñados para sitios cuyos diseños se basan en dos columnas (columna del contenido principal y columna de módulos que puede estar ubicada a la derecha o a la izquierda), y templates diseñados para sitios que utilicen tres columnas (columna central con el contenido y dos columnas laterales para los módulos).

Es bueno disponer de un template que genere automáticamente las columnas laterales dependiendo de si se necesitan o no. Es decir, podemos tener un sitio web en cuya página principal quisiésemos usar tres columnas (porque hay una mayor cantidad de módulos que dispuestos en una sola columna estiraría demasiado hacia abajo la página), pero en el resto de las páginas solo utilizaríamos dos columnas. (Este tema será ampliado en nuestro segundo tutorial de templates.)

¿Cómo administrar templates del frontend de Joomla?

En el menú de administración de Joomla debes ir a Site >> Template Manager >> Site templates

A continuación, verás en el area de trabajo una lista con los templates instalados (en el ejemplo de la siguiente imagen, solo uno)

El template que está marcado como "Default" es el template que actualmente está asignado por defecto para el sitio Joomla (frontend). Para administrar o editar un template determinado, debes seleccionar primero uno de la lista de templates instalados que se muestran en el area de trabajo, y a continuación desde la barra de herramientas elegir la acción que deseas.

Barra de herramientas de la administración de templates

Icono "Default": Este sirve para asignar un template por defecto para el frontend.
Icono "Assign": Este ícono lo utilizamos para asignar un template a una sección específica que sea accesible directamente desde el menú de navegación. Es muy útil esta opción ya que nos permite asignar diferentes templates para distintas secciones, categorías, o ítems de contenido.
Icono "Delete": Borra el template seleccionado.
Iconos "Edit HTML" y "Edit CSS": nos permiten editar el código fuente del archivo index.php perteneciente al template y del archivo de CSS. Les recomiendo no editar desde aquí estos archivos si no se conoce bien el lenguaje HTML y la maquetación con hojas de estilo en cascada.
Icono "New": Botón para instalar un nuevo template.

Archivos que componen un template de Joomla

Los templates de frontend de Joomla se ubican en el directorio /templates/, dentro del raíz del sitio. En ese directorio se encuentran tantas carpetas como templates instalados haya en el sistema. Cada una de estas carpetas posee el nombre del template en cuestión. La estructura de archivos es la siguiente:

rhuk_solarflare_ii (directorio del template rhuk_solarflare_ii)
css (directorio que contiene las hojas de estilo en cascada)
images (directorio de imágenes utilizadas por el template)
index.php (archivo principal del template que genera el HTML, incluye las CSS, el Javascript, y el código PHP necesario para cargar el contenido dinámico)
TemplateDetails.xml (archivo XML que contiene datos referentes al template en cuestión y datos necesarios para su instalación desde el administrador)
index.html (archivo de seguridad que impide explorar el directorio del template desde el navegador. Por ejemplo si accedemos a http://www.sitio.com/templates/rhuk_solarflare_ii, solo se observará una página en blanco, es decir, este index.html)

¿Cómo instalar nuevos templates para un sitio Joomla?

En el menú de administración de Joomla debes ir a Site >> Template Manager >> Site templates. Luego debes hacer click en el ícono "New" de la barra de herramientas. Verás a continuación sobre el area de trabajo:

Luego tienes que examinar en donde tienes el archivo comprimido del template y clickear el botón "Upload & Install" (Subir e instalar). Recuerda que deben estar todos los directorios para la instalación con permisos asignados correctamente (Writeables)

Forma alternativa de instalar templates

Una manera distinta de instalar templates que a menudo es útil se basa simplemente en descomprimir el template en tu computadora y luego subir el directorio descomprimido por FTP dentro del directorio /templates/

Diseñadores de templates de Joomla asociados