Plantillas en Joomla! 1.5
Las plantillas en Joomla! 1.5
Una de las características más sobresalientes de Joomla! es la gran facilidad que tiene para cambiar su aspecto estético (colores, tamaños de tipografías, distribución de las zonas de contenido ...) y la gran variedad y cantidad de templates o plantillas disponibles para instalar en nuestro sitio. Hay más de mil plantillas distintas listas para descargar e instalar en tu portal.
Y es que en Joomla! -como en otros sistemas dinámicos- el contenido va 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.
El paquete de instalación de Joomla! trae consigo 3 plantillas incorporadas. Lo podemos comprobar en la administración de nuestra web en el menú Extensiones -> Gestor de Plantillas
Cambiar la plantilla predeterminada
Desde el Gestor de plantillas que se encuentra en el menú Extensiones de la zona de administración de Joomla! podemos asignar y editar las Plantillas del Sitio (front-end) y del Administrador (back-end). La plantilla marcada como Predeterminada se asigna por defecto a todas las Páginas/Artículos de los menús del sitio. Cambiando la plantilla predeterminada podemos cambiar el aspecto de toda la zona pública de Joomla!.
Para ello marcaremos en el botón de selección que se encuentra a la izquierda del nombre de la plantilla en el listado y pulsaremos después en el botón Predeterminado de la barra de herramientas.
Podremos comprobar los cambios que se han producido en el frontend recargando la página.
Modificar los parámetros de la plantilla
Algunas plantillas permiten variar diferentes aspectos de su diseño como el ancho de la página, la apariencia de los menús o los colores del fondo y del resto de la página. Al seleccionar una plantilla de la lista en el Gestor de plantillas y pulsar en el botón editar de la barra de herramientas, o al pulsar directamente en el nombre de la plantilla podremos acceder a su ventana de edición.
Allí podremos modificar su configuración en el apartado parámetros de la zona derecha.
Por ejemplo, la plantilla rhuk_milkyway que viene por defecto con el pack de instalación de Joomla permite elegir como color de fondo entre Azul, rojo, verde, naranja, negro y blanco. Después pulsamos en los botones guardar o aplicar para salvar los cambios.
Diferentes plantillas para diferentes secciones o páginas
Podemos configurar nuestro portal para que cada sección o página que se abra al pulsar sobre un determinado item del menú se muestre dentro de una plantilla diferente. Podemos hacer por ejemplo que la sección de contactos o la de enlaces se muestren con una plantilla diferente a la que tenemos seleccionada como predeterminada.
Para ello solo tenemos que seguir los pasos siguientes:
- Entrar en el gestor de plantillas
- Seleccionar una plantilla y pulsar en editar. También se puede pulsar directamente en el nombre de la plantilla. Aparecerá la ventana de edición de la plantilla.
- En el apartado Asignación de Menú seleccionamos los items en los que queremos que se muestre esa plantilla
- Pulsamos en el botón Guardar (o en Aplicar) de la barra de herramientas
Por ejemplo www.aulablog.com/edublogs2008 y www.aulablog.com/edublogs2007 no son dos instalaciones diferentes de Joomla!, sino un mismo sitio en el que se ha hecho uso de esta funcionalidad para crear dos subportales diferenciados.
Descargar e instalar otras plantillas
Para conseguir otras plantillas podemos visitar sitios como www.joomlaos.de o www.joomla24.com en los que podemos descargar plantillas gratuitas eligiendo entre las más de mil disponibles. La única precaución será asegurarnos de elegir una plantilla adecuada la nuestra versión de Joomla, la 1.5, ya que las de la versión 1.0.x no funcionarán.
También hay otros sitios en los que se pueden encontrar plantillas más elaboradas a un precio económico (desde 5 hasta 30 euros)
Para instalar la plantilla que hayamos descargado no necesitamos descomprimir el archivo. Simplemente iremos al menú Extensiones y luego a Instalar/desinstalar.
Desde ahí buscamos el paquete de instalación y una vez seleccionado pulsamos en el botón subir archivo e instalar.
El contenido del paquete de instalación se ubicará automáticamente en una carpeta con el nombre de la plantilla dentro de la carpeta templates. Luego ya podemos ir al Gestor de plantillas en el menú Extensiones y elegir la nueva plantilla como plantilla por defecto para nuestra web.
Luis Barriocanal (2009) - Obra bajo Licencia Creative Commons by-nc-sa |
|---|
Editado el 17.10.2009 por: lbarriocanal - Edujoomla.es
Personalizar plantillas
El sistema de configuración de plantillas de Joomla! tiene muchas posibilidades a la hora de personalizar las plantillas y adaptarlas a nuestros gustos y necesidades.
La operación más básica la hemos visto en el artículo anterior y consiste en establecer como plantilla predeterminada para nuestro sitio una de las muchas que los diseñadores ponen a nuestra disposición.
También hemos visto que es posible mostrar cada página de nuestra web con una plantilla diferente o configurar algunas opciones o parámetros específicos como el ancho de página o los colores de fondo en algunas plantillas.
Pero además de esto, en todas las plantillas de Joomla! podemos realizar otros cambios sencillos como la sustitución de algunos logos e imágenes por otros personalizados y otros algo más complicados relacionados con la edición del código html que define su diseño para añadir o eliminar zonas o posiciones, variar el ancho de las columnas, etc o con la edición de la hoja de estilos CSS para variar la tipografía o los colores de tablas, módulos, etc. Aunque los arreglos que requieren "cirugía" más fina los dejaremos para los más expertos o para un curso avanzado sobre diseño web y hojas de estilo CSS.
Cambiar logos e imágenes
Una operación bastante sencilla es cambiar la imagen de cabecera o el logotipo que aparece en muchas plantillas sustituyéndolos por otra imagen personalizada con las mismas dimensiones y el mismo nombre.
Por ejemplo, la plantilla rhuk_milkyway, muestra en el encabezado o header de la plantilla el logo oficial de Joomla!
Pero en su lugar queremos colocar este otro logo personalizado
Primero tendré que averiguar el nombre la imagen y el directorio en el que está almacenada
Para ello pulso con el ratón sobre la imagen y selecciono "ver imagen de fondo" (lo harás mejor con el navegador Firefox). En otras plantillas seleccionaré "ver imagen"
En la barra de direcciones del navegador aparecerá la ruta que busco. En este casohttp://www.edujoomla.es/pruebas/templates/rhuk_milkyway/images/mw_joomla_logo.png
El siguiente paso será subir al servidor la imagen que he preparado para sustituir a la que viene con la plantilla y que tengo guardada con el mismo nombre: en este caso mw_joomla_logo.png.
Este nuevo archivo de imagen deberá sustituir al logo original y para ello lo colocaré en el lugar adecuado de la ruta de carpetas.
En este caso subiré la imagen al directorio /templates/rhuk_milkyway/images/
Esta operación la puedo hacer con un programa de FTP o a través del administrador de archivos del panel de control del servidor.
Si estoy trabajando en local localizaré la carpeta /templates/rhuk_milkyway/images/ y sobreescribiré el archivo correspondiente.
Antes de comprobar los cambios en la portada de la web será mejor recargar el archivo con la imagen en el navegador. Finalmente podremos ver el resultado en la página de inicio de nuestro portal
Cambiar la imagen de fondo de una plantilla
Algunas plantillas establecen su color de fondo (el que aparece alrededor de la web en las plantillas de ancho fijo) con una imagen que se repite por toda la pantalla.
Por ejemplo, en www.vizcarra.es el color rojo del fondo viene determinado por esta imagen
http://www.vizcarra.es/templates/yoo_seasons/images/red/page_body_bg.png
Pues de la misma manera que en el apartado anterior hemos sustituido la imagen de cabecera podríamos sustituir aquí la imagen de fondo y modificar sustancialmente el aspecto de la web.
Edición de plantillas
Como decíamos más arriba, desde el administrador de plantillas de Joomla! también podemos
-
Modificar el código html que define su diseño para añadir o eliminar zonas o posiciones, variar el ancho de las columnas, etc
-
Modificar la hoja de estilos CSS de la plantilla para variar el tamaño o el color del texto de títulos, enlaces, artículos, etc o los colores de tablas y módulos ....
Para ello tenemos dos botones en la barra de herramientas del menú secundario
Editar HTML
Permite editar el archivo index.php situado en la carpeta ‘/templates/plantilla-seleccionada’. Este es el archivo cargado al acceder al Sitio (Front-End). Al pulsar ‘Editar HTML’, se visualizará una nueva página con el código del archivo index.php. Se indicará si el archivo es ‘writable’ (escribible) o no. Podremos ‘Guardar’ o ‘Cancelar’ las modificaciones realizadas.
Editar CSS
Permite editar las hojas de estilos CSS relacionadas con la plantilla seleccionada en la que se definen colores, tamaños, alineación, estilos, etc de los diferentes elementos de la página: menús, títulos de los artículos, cuerpo, etc. Al pulsar ‘Editar CSS’, se visualizará una nueva página en la que puede escoger el archivo CSS específico que quiere editar. La tabla muestra si los ficheros son ‘writable’ (escribible) o no. Pulsaremos el botón situado al lado del título a editar, luego el icono ‘Editar’ de la Barra de Herramientas. Podremos ‘Guardar’ o ‘Cancelar’ las modificaciones realizadas.
La edición de plantillas es algo que sobrepasa de largo los objetivos de este curso, pero los/as forofos/as del diseño pueden encontrar en ello todo un mundo de posibilidades.
|
Luis Barriocanal (2009) - Obra bajo Licencia Creative Commons by-nc-sa |
|---|
Editado el 17.10.2009 por: lbarriocanal - Edujoomla.es