Gestión de plantillas en Joomla!

Transcripción

1 Gestión de plantillas en Joomla! Aplicaciones web. 2º SMR 1. Gestionar las plantillas de Joomla! 2. Instalar una nueva plantilla en tu web 3. Modificar el diseño de una plantilla instalada 1. Gestionar las plantillas de Joomla! Las plantillas se encargan de determinar la forma en la que se mostrarán los contenidos de nuestra web. La instalación estándar de Joomla incluye varias plantillas, unas destinadas al backend y otras al frontend. Además existen páginas web en las que podemos encontrar todo tipo de plantillas que cubrirán casi todas nuestras necesidades y, si no lo hacen, siempre tendremos la posibilidad de modificarlas a nuestro gusto. La administración de las plantillas la realizaremos desde Extensiones > Gestor de plantillas. En la pestaña Estilos veremos una lista con las plantillas instaladas y disponibles para nuestro sitio. Tanto para el frontend como para el backend: Figura 1: Lista de plantillas instaladas en Joomla Pulsando sobre la estrella de la columna Defecto podemos decidir qué plantilla se aplica a nuestro sitio. Como vemos a continuación, al cambiar la plantilla de la zona de administración, el cambio se lleva a cabo de manera inmediata. Figura 2: Plantilla predeterminada 1

2 Si pulsamos sobre el enlace de la plantilla, ubicado en la columna Estilo, accederemos a las propiedades de aquella. Aquí podremos modificar algunas de sus propiedades y asignarla a los elementos del menú que queramos. De esta forma, podemos hacer que distintas partes de nuestra web utilicen plantillas diferentes. Figura 3: Asignar la plantilla a los elementos del menú Es posible que nos interese ver las posiciones de los módulos que utiliza la plantilla que estamos empleando en nuestra web. Para ello podemos ir al gestor de plantillas - Opciones y habilitar la previsualización de los módulos. Figura 4: Habilitar previsualización de los módulos Después de guardar los cambios, tendremos que acceder al frontend y añadir al final de la dirección de la página?tp=1, con lo que obtendremos la posición de cada módulo: Figura 5: Vista de los módulos de la plantilla 2

3 2. Instalar una nueva plantilla en tu web Aplicaciones web. 2º SMR Vamos a seleccionar una plantilla (template) a nuestro gusto. A continuación tienes un listado de sitios web donde puedes encontrar diferentes diseños de plantillas: ir a extensiones descargas templates Descomprimimos la plantilla y mediante un cliente de FTP (FileZilla) subimos la carpeta con todo su contenido dentro del directorio /templates. Cuando se instala una plantilla por medio del administrador de Joomla se generan permisos de escritura en los archivos e imágenes, y si intentamos cambiar una imagen, un logo... no lo vamos a poder hacer. Así que lo mejor es subir las plantillas directamente desde nuestro cliente FTP. Una vez subida la plantilla, accederemos al panel de control, en Extensiones - Gestor de extensiones, haz clic en Encontrar. Debe aparecer la plantilla que acabas de subir. Señala la plantilla y haz clic en el icono Instalar. La plantilla quedará instalada. Para activar tu plantilla, sigue los pasos del punto 1 de estos apuntes. 3. Modificar una plantilla instalada 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 o con la edición de la hoja de estilos CSS para variar la tipografía o los colores de tablas, módulos, etc. 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: 3

4 Primero tendrás que averiguar el nombre de la imagen y el directorio en el que está almacenada. Para ello pulsa con el ratón sobre la imagen y selecciona ver información de la imagen (lo harás mejor con el navegador Firefox). En otras plantillas selecciona ver imagen En la barra de direcciones del navegador aparecerá la ruta que buscas. En este caso 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 Nixiweb. 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: 4

5 Realizar cambios en las plantillas Como decíamos más arriba, desde Extensiones Gestor de plantillas Plantillas Detalles de tu plantilla, 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, etc. Editar HTML Permite editar el archivo index.php situado en la carpeta /templates/plantilla-seleccionada. Este es el archivo cargado al acceder al Sitio (FrontEnd). Al pulsar Editar HTML, se visualizará una nueva página con el código del archivo index.php. 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. Podremos Guardar o Cancelar las modificaciones realizadas. Actividades 1. Entra en y busca la plantilla Obmicon. Descárgala en tu PC. 2. Descomprime el archivo de tu plantilla y, usando FileZilla, sube la carpeta entera descomprimida dentro del directorio Templates. 3. Accede a tu gestor de extensiones y, siguiendo los pasos explicados más arriba, instala tu nueva plantilla. 4. Activa tu plantilla, estableciéndola por defecto. Comprueba en tu sitio web que tu nueva plantilla se visualiza correctamente. 5. Busca en Internet una imagen cualquiera y sustitúyela por una de las tres imágenes que trae la plantilla. Fíjate en la resolución (nº de píxeles de ancho x alto) que tienen las imágenes de la plantilla, quizás tengas que redimensionar tu imagen con GIMP u otro editor de imágenes para que quede del mismo tamaño que las demás. 6. Crea un logo transparente con GIMP e insértalo en tu web, sustituyendo al de Obmicon. Recuerda que debes crearte un logo con el mismo tamaño y nombre que el que trae la plantilla de Obmicon. 5