Joomla 2.

5, un gestor de contenidos libre para tu sitio

PERSONALIZACIN DE LA PLANTILLA
PREDETERMINADA BEEZ 20
Tutorial 3 Edita las hojas de estilos
En este tercer 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
modificar algunos de los parmetros establecidos en las hojas de estilos para modificar la apariencia de tu sitio
Joomla.
Slo necesitas disponer de una copia de seguridad de la plantilla Beez 20 (para restituirla en caso necesario, si
los cambios realizados no te agradan) y un editor de notas (no un procesador de textos) . Dispones del bloc de
notas en sistemas Windows (acude al men Accesorios para localizarlo), del editor Gedit en Ubuntu o del editor
Pluma o LeafPad en Linux Mint.
No es nuestra intencin hacer un tutorial profundo y completo de la utilizacin de hojas de estilos (no es este el
lugar ni el momento adecuado) pero s te vamos a indicar algunas cuestiones muy sencillas que tal vez, te
animen a profundizar ms en los conceptos trabajados.
En la Red dispones de mltiples tutoriales, sencillos y avanzados, sobre CSS. Te referenciamos algunos que
pueden servirte en algn momento dado:
HTML.net - http://es.html.net/tutorials/css/
w3schools.com - http://www.w3schools.com/css/
Hscripts.com - http://www.es.hscripts.com/tutoriales/css/
CSS Ya - http://www.cssya.com.ar/
Nota
Editar los archivos css que afectan a las plantillas de Joomla puede realizarse de dos maneras diferentes:
1. Directamente desde la carpeta de la plantilla y fuera de la administracin de Joomla. Es el
procedimiento que preferimos. Se trata de abrir el archivo css correspondiente en tu ordenador con un
editor de notas, realizar los cambios que desees y luego sobreescribir los archivos originales por los
que acabas de modificar (copiar pegar en un servidor local y sobreescribir por FTP en un servidor
remoto).
2. Directamente desde la administracin de Joomla. Joomla te permite realizar estas tareas de edicin
desde el propio Gestor de plantillas. Para ello haz clic en el nombre de la plantilla a editar en la columna
Plantilla y, a continuacin, en el archivo correspondiente en la seccin Hojas de estilos.
Y, no lo olvides, mantn una copia de la plantilla original en tu ordenador. Tal vez quieras o necesites utilizarla!

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

El archivo position.css
Localiza el archivo position.css en la carpeta css de la plantilla Beez 20. Haz clic con el botn derecho del ratn
sobre l y selecciona Abrir con... - el editor de notas que tengas instalado en tu equipo. En nuestro caso
utilizamos Linux Mint y abrimos el archivo con el editor Pluma.
Localiza el apartado General y, en concreto la seccin all y observa el cdigo presente:

Presta atencin:
max-width:1050 px Hace referencia al tamao mximo en anchura que adoptar la plantilla. Puede ser que
te interese tener un tamao mayor (cambia el valor 1050 por otro superior que se adapte a la cabecera que has
diseado, por ejemplo). Recuerdas que en el artculo anterior hemos creado una cabecera cuyo ancho es 1060
pixeles? Si la queremos ver perfectamente pongamos aqu un valor de 1080, por ejemplo.
O puede ser que prefieras que la plantilla se adapte a todo el ancho de la pantalla, sin indicar ningn valor en
concreto. Pues sencillo... selecciona toda la lnea de cdigo y brrala directamente.
Acude a archivo Guardar y copia pega el archivo position.css en la carpeta css de la carpeta beez_20 o
sbelo por FTP sobreescribiendo el archivo original.
El mismo resultado obtienes si editas directamente el archivo position.css en el Gestor de plantillas, desde la
propia administracin de tu sitio Joomla. Y aplicas / guardas los cambios.

El archivo personal.css
Procede de idntica manera con el archivo personal.css y brelo con el editor de notas. Localiza el apartado
Logo y, en concreto #all #header:

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

Veamos
padding-top:8.0em Hace referencia a un valor numrico que se establece como separacin de la cabecera en
su parte superior.

Modifica el valor 8 por 3 y observa el resultado:

Ojo! Ten en cuenta que este espacio original de separacin es el adecuado si se utiliza la posicin position-1
establecida por el diseador en la plantilla para alojar un men horizontal. Pero si no la utilizas tal vez quieras
ganar espacio:

Hagamos unos cambios en el cdigo que se muestra en logoheader (ya sabes si has seguido nuestro artculo
anterior que se refiere a la cabecera del sitio): borra toda la lnea del cdigo background en la seccin header
(as, tan sencillamente borras de un plumazo la cabecera de tu sitio) y borra tambin la lnea color:#fff, escribe
el cdigo background-color:#f1efef (tu cabecera pasa de una imagen a un fondo clarito) y, por ltimo establece
el valor 70 px en min-height. El cdigo queda definitivamente as:
background-color:#f1efef;
min-height:70px;
margin:0em 10px 0 10px !important;

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

Guarda el archivo o aplica-guarda los cambios si lo estas haciendo directamente desde la administracin de tu
sitio Joomla y observa el resultado:

Muy minimalista! Todo es cuestin de gustos!

Supongamos ahora que quieres cambiar algunos colores de la plantilla. Imagina que utilizas una cabecera en
tonalidades verdes (como la que realizamos en nuestro anterior artculo) y deseas que los ttulos de los mens
de navegacin tambin se muestren de dicho color. En la captura de pantalla anterior, por ejemplo, vas a
cambiar el tono gris de Men Principal por otro verde oscuro.
Localiza en el archivo personal.css la seccin navigation column (los parmetros que afectan a la columna de
navegacin, es decir, la columna izquierda de la pgina). En concreto, #nav h3. Los valores aqu mostrados
afectan al ttulo de estos mdulos. Sustituye #555 por #136d1e para dar el tono verde al texto:

Guarda el archivo o aplica guarda los cambios en la administracin de Joomla y comprueba el resultado:

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

Acorde con esta ltima modificacin tal vez quieras cambiar tambin a esta misma tonalidad verde otros
elementos de la plantilla. Nada ms fcil. Utiliza procedimientos similares para cambiar el cdigo que se
muestra #555 a lo largo del archivo por el nuevo #136d1e en su lugar. Si lo ests haciendo directamente desde
la administracin de Joomla usa la combinacin de teclas Ctrl + F para abrir el buscador en el navegador,
escribe #555 y copia el nuevo valor en cada ocasin que sea localizado.
Todava quedan restos de tonos azules. En concreto, en determinados parmetros aparece el valor #095197
perteneciente a un azul oscuro. Utilizando el mismo procedimiento anterior localiza todos los campos que lo
tienen y sustityelo por este otro referente a un verde oscuro #1d6831.
Un poco de trabajo paciente y observa el resultado en la plantilla:

No ha resultado tan difcil, no crees? Y sin apenas conocimientos de lenguaje de programacin.

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras