Joomla 2.

5, un gestor de contenidos libre para tu sitio

PERSONALIZACIN DE LA PLANTILLA
PREDETERMINADA BEEZ 20
Tutorial 2 Personaliza la cabecera del sitio
En este segundo tutorial dedicado a la personalizacin de plantillas y, en concreto, a la personalizacin de la
plantilla Beez 20 que viene instalada de manera predeterminada en el sistema te mostraremos cmo puedes
sustituir la cabecera de la plantilla por una cabecera propia creada por ti mismo al efecto.
Para hacerlo utilizars un programa de edicin de imgenes y retoque fotogrfico libre denominado Gimp (tal
vez te suene Photoshop en sistemas Windows... algo similar). Puedes obtener este programa gratuitamente en
Internet e instalarlo tanto en sistemas Windows, como Linux o Mac.
Con el ordenador a cuestas tiene una seccin especfica dirigida a mostrarte tanto su instalacin como su
utilizacin. Por tanto, te recomendamos que, si tienes inters en saber ms, acudas a ella.

La cabecera de tu sitio Joomla

Acude a la administracin de tu sitio Joomla, al gestor de plantillas y establece como plantilla predeterminada la
plantilla Beez 20. Si has seguido nuestro artculo anterior, en concreto, has establecido por defecto para el sitio
el estilo Beez 20 Personal. Consulta el artculo si lo precisas. Haz clic en el nombre del estilo y configura la
plantilla para que utilice el color Plantilla Personal. Actualiza el frontend de tu sitio y fjate en el aspecto que ha
adquirido la pgina con la nueva plantilla en uso:

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

Ya sabes que la apariencia del sitio con esta plantilla est establecida mediante un conjunto de archivos y
carpetas que se localizan en la carpeta del mismo nombre en el directorio templates del directorio raz de tu sitio
Joomla, tal y como ves en la siguiente figura:

En realidad, hay varios archivos de la plantilla que le estn afectando:

Los archivos de imagen
El archivo de imagen se localiza en una carpeta en concreto que puedes localizar siguiendo la ruta:
En el servidor local
/var/www/joomla25/templates/beez_20/images/personal (sustituye joomla25 por el nombre de la carpeta en la
que has instalado Joomla)
En el servidor remoto
Directorio raz /nombre-de-la-carpeta-donde-instalaste-joomla/templates/beez_20/images/personal
Puedes ver en ella el archivo personal2.png que es el responsable de su apariencia.

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

Las hojas de estilo
Ya te hemos indicado en alguna otra ocasin que el aspecto visual que obtiene una plantilla est condicionado
por una serie de archivos con extensin css. Son las hojas de estilo. Para acceder a ellas acude a la carpeta
css:

El archivo personal.css incluye una seccin completa destinada precisamente a la cabecera. Localiza la lnea
/* ########################## logo ########################### */
Puedes ver en ella las opciones que afectan al fondo de la cabecera:

Fjate:
background fondo
#0c1a3e nmero establecido en formato hexadecimal que indica el color del fondo. En un programa como
Gimp este es el color mostrado:

Cmo lo hemos comprobado?

Abre Gimp. Haz clic en Archivo nuevo y en la nueva ventana establece 250 pxeles de ancho y 150 pxeles de
ancho. Cierra la ventana pulsando el botn Aceptar.
Acude ahora a la barra de herramientas de la izquierda de la pantalla y selecciona el icono del bote de pintura
con un clic. Haz clic en la muestra de color negro para abrir la paleta de colores:
Con el ordenador a cuestas
http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

En la nueva ventana pega el cdigo correspondiente al color de fondo (185359) en el campo de texto Notacin
HTML. Observa cmo se muestra el nuevo color:

Pulsa el botn Aceptar. La muestra adquiere el nuevo tono de color. Ahora haz clic encima de la imagen que
creaste al principio. Recuerda que tienes seleccionado an el bote de pintura. La imagen se llena entera con el
nuevo color.
As, de esta manera tan simple puedes comprobar los colores que se utilizan en la plantilla que ests utilizando
en tu sitio. O buscar otros que puedan interesarte.
Continuando con el cdigo de la hoja de estilos...
url hace referencia a la ruta en la que la hoja de estilos localizar el archivo que se mostrar en la cabecera.
Como puedes ver en la cabecera se mostrar el archivo personal2.png que se localiza en /images/personal.
no-repeat el archivo imagen se utilizar en una sola ocasin y no se repetir (en fondos es muy habitual
utilizar una imagen pequea que se repite hasta rellenar el espacio disponible).
Bottom right se refiere a la posicin abajo a la derecha.
Color:#fff color blanco que adoptar el texto que se muestre en la cabecera.
Min-height altura mnima en pxeles de la cabecera. Est establecida en 200 pxeles, ajustado al tamao del
archivo de imagen de la cabecera 1060 x 288 pxeles
De la lectura del cdigo sacamos varias conclusiones:

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

1. Puedes cambiar el color del fondo de la cabecera si escribes la notacin hexadecimal correspondiente en el
archivo personal.css
2. Si la imagen personal2.png no est presente en la carpeta, el fondo ser el determinado por dicho nmero
hexadecimal.
2. Si editas la imagen personal2.png convenientemente, la cabecera adoptar el nuevo aspecto. Slo tienes que
modificarla y sobreescribirla.
3. Si sustituyes la imagen personal2.png por otra, con las mismas dimensiones eso s, slo tendrs, o que
llamarla igual y con la misma extensin o de otra manera y, si lo deseas, con otra extensin y modificar la ruta al
archivo en la hoja de estilos personal.css
Comprendes los procedimientos? Pues pongmonos a la tarea...
Atencin!!
Recuerda que vamos a modificar archivos de la plantilla. Asegrate de disponer de una copia de seguridad de
la carpeta beez_20 antes de seguir. Por si metes o metemos la pata...
Copia pega la carpeta en otra ubicacin o descarga por FTP la carpeta a tu equipo. Lo importante es que
tengas una copia de la carpeta en tu ordenador a buen recaudo y otra que ser la que vayas a utilizar a partir de
ahora.

Crear una nueva cabecera para la plantilla

Ya te hemos indicado las dimensiones del archivo original personal2.png. A la hora de crear una nueva
cabecera para tu sitio respeta estas dimensiones.
Inicia Gimp y haz clic en Archivo Nuevo para crear una nueva imagen. En la nueva ventana establece los
valores 1060 de largo y 288 de alto (las dimensiones del archivo original). En el desplegable Opciones
avanzadas selecciona Transparencia en Rellenar con...
Acude a tu navegador web y busca una imagen de gran tamao con un dibujo que pueda acercarse a la
temtica de tu sitio o con tonos de color que te agraden.
Cuando encuentres la que se ajusta a tus necesidades cpiala al portapapeles del sistema mediante un simple
Copiar imagen.
Ahora vete a Gimp y acude al men Editar Pegar como Capa nueva. La imagen copiada se coloca encima
del fondo transparente.
Acude ahora a la herramienta Mover de Gimp. Asegrate de que se encuentra seleccionada la opcin Mover la
capa activa (la capa activa se muestra sombreada en la ventana Capas, en los paneles de la derecha de la
aplicacin, puedes hacer que una capa est activa sencillamente haciendo clic sobre ella en esta ventana). Haz
clic sobre la capa que acabas de copiar y mueve la imagen hasta que encuentres la posicin adecuada segn el
trozo de imagen que visualizas.
Nota
Si necesitas que la imagen tenga un tamao menor acude al men Capa Escalar capa para introducir nuevos
valores y redimensionar as la capa seleccionada.

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

Una vez que consigas el aspecto adecuado acude al men Imagen aplanar la imagen para recortar las
partes sobrantes de la capa. Ya tienes el fondo de la cabecera!
Nota
Gimp incluye muchas herramientas (filtros, colores) para modificar el fondo que acabas de crear. Una muy
sencilla de utilizar es la herramienta Colorear (Colores Colorear). En la nueva ventana mueve los
deslizadores hasta obtener el color deseado. Experimenta hasta obtener el efecto que necesites.

Utilizando procedimientos similares: bsqueda de imgenes, copiar y pegar como capa nueva en Gimp, escalar
capa y aplicando filtros colores puedes incluir ms elementos grficos en la cabecera. Todo depende de tus
gustos e imaginacin.

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

Ahora utiliza la herramienta Texto para aadir informacin a la cabecera: el nombre de tu sitio, su descripcin,
informacin de contacto... Su utilizacin es similar a la de un procesador de textos: clic sobre la herramienta, clic
sobre la imagen y escribe el texto deseado... A continuacin, utiliza las opciones presentes para modificar el tipo
de letra, su tamao, color, alineacin, espaciado de caracteres, etc (recuerda que debes tener previamente
seleccionado el texto).

Utiliza la herramienta Mover para colocar el texto o textos realizados en el lugar de la imagen donde desees
que se muestre-n.

Cuando finalices slo tienes que guardar los cambios realizados. Gimp te permite guardar el trabajo en su
extensin predeterminada xcf mediante Archivo Guardar conservando las capas y cambios que hayas
realizado en ellas. Es el formato idneo para volver a editar el archivo siempre que lo precises.
Para utilizarlo en tu sitio Joomla debes guardarlo en el mismo formato y con el mismo nombre que la cabecera
original de la plantilla Beez 20. Utiliza el men Archivo Exportar para guardarlo con el nombre
personal2.png. Acepta las opciones del archivo png que te ofrece Gimp y guarda definitivamente la imagen para
su utilizacin.

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

Sobreescribe el archivo original

Una vez que tienes la cabecera preparada ya slo te queda sustituir la cabecera original por esta nueva
modificada.
En el caso de que ests trabajando en un servidor local, slo tienes que copiar pegar la nueva cabecera en la
misma ubicacin, es decir, en la ruta
/templates/beez_20/images/personal
El sistema detectar que ya hay un archivo en la carpeta con el mismo nombre y extensin. Reemplzala!

Si ests trabajando en un servidor remoto, slo tienes que subir la nueva imagen a la ubicacin original:
directorio raz de tu sitio /tusitio/templates/beez_20/images/personal
El cliente de FTP detectar que ya hay un archivo en la carpeta con el mismo nombre y extensin.
Sobreescrbelo!
Ahora slo resta que actualices el Frontend de tu sitio y compruebes que la nueva cabecera se muestra en l.
Si has realizado la imagen con las dimensiones originales, vers que la imagen no se muestra correctamente.

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

Y, Por qu ocurre esto si has seguido fielmente las instrucciones? Muy simple... recuerdas el cdigo presente
en el archivo personal.css. Exista una altura mnima (200 pxeles) para la imagen. Slo tienes que modificar
este valor por el correcto 288 para ajustar perfectamente la cabecera al espacio disponible (lgicamente puedes
hacer que la cabecera, en el momento de su creacin tenga un alto menor, y ajustar en esta hoja de estilos el
alto mnimo).
Veamos cmo puedes proceder.
Acude al Gestor de plantillas y haz clic en el nombre de la plantilla Beez 20 en la columna Plantilla. Accedes a la
pgina informativa de los archivos que la condicionan y que te van a permitir personalizarla. Localiza la hoja de
estilos personal.css en la parte derecha de la pantalla y haz clic en ella:

El contenido que se muestra en pantalla es el mismo que puedes ver si abres el archivo personal.css de la
carpeta css de la plantilla. Joomla te permite editarlo directamente desde la administracin del sitio. Sustituye el
valor 200px por 288px en el campo min-height (o el que precises segn la altura de la cabecera que hayas
creado).

Guarda los cambios. Visualiza el frontend de tu sitio y vers que la cabecera se muestra ahora correctamente.

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

10

Edita Sueiras