Escrito por Luis Barriocanal | 29 Octubre 2009 | Última actualización el Viernes, 30 de Octubre de 2009 17:09
Posted in Manuales Joomla 1.5 - Diseño y Plantillas

Valoración:

Baja Alta

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 caso

http://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 pantillas

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.

Para Saber más

• Plantillas en Joomla 1.5.x

Luis Barriocanal (2009) - Esta obra está bajo una Licencia Creative Commons by-nc-sa

< Prev