Joomla 2.

5, un gestor de contenidos libre para tu sitio

PERSONALIZACIN DE LA PLANTILLA
PREDETERMINADA BEEZ 20
Tutorial 1 Parmetros de personalizacin
Si has seguido hasta aqu nuestro curso online ya conoces que el aspecto visual de tu sitio est apoyado en la
utilizacin de una determinada plantilla (template, en ingls) que no slo es la responsable de su esttica
(fondo, colores, tipografas...) sino tambin del lugar donde se ubiquen los distintos elementos que la conforman
(posiciones).
En este artculo te mostramos cmo puedes comenzar a personalizar fcilmente una de las plantillas
predeterminadas de Joomla 2.5, incluidas en su instalacin bsica, la plantilla Beez 20.

La plantilla Beez 20 en tu sitio Joomla

En primer lugar acude a Extensiones Gestor de plantillas y en el listado de plantillas instaladas y
configuradas en el sistema haz que la plantilla Beez 20 sea la predeterminada para tu sitio: haz clic
directamente en la estrella de la columna Defecto que le corresponde para hacerlo:

Valida la casilla que se muestra antes del nombre del Estilo Beez2 Defecto y pulsa, seguidamente, sobre el
botn de la barra de herramientas Duplicar. Has realizado una copia del estilo de la plantilla para comenzar su
edicin: es una buena medida de seguridad cuando trabajas con plantillas ya que as, si te arrepientes de los
cambios realizados siempre podrs volver al estilo original (recuerda que plantillas y estilos son dos conceptos
diferentes, ya te hemos hablado de esto en un artculo anterior).
Pulsa sobre el nombre Beez2 Defecto (2) para realizar algunas tareas sencillas de personalizacin del estilo.
La nueva pgina te muestra alguno de sus parmetros:
Para comenzar, cambia el nombre del estilo a Beez2 Personal y en el desplegable Defecto selecciona la
entrada Todos. As el estilo de la plantilla que ests personalizando ser el utilizado de manera predeterminada
en tu sitio.
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 parte derecha de la pantalla tienes los parmetros de configuracin:

Wrapper pequeo y wrapper largo. Se refiere a los valores en porcentaje mnimo y mximo que adoptar el
espacio destinado al contenido de los artculos. Por defecto estn establecidos en 53 y 72, respectivamente. No
es necesario que realices ningn cambio, de momento.
Logo. Como ves hace referencia a un archivo imagen en concreto. Puedes utilizar el botn Seleccionar para
localizar otro y sustituirlo. Observa que al hacer clic en dicho botn se abre una ventana emergente que se
posiciona en la carpeta predeterminada images del directorio raz de Joomla. Por lgica, si ubicas aqu tu propio
logo podrs seleccionarlo para utilizarlo a continuacin. No todo es tan sencillo, como vers a continuacin,
pero comprueba que, en efecto, esto es as seleccionando el archivo powered_by.png. Aplica los cambios y
actualiza el frontend de tu sitio para visualizar el nuevo logo en la plantilla.

No es muy esttico que digamos, pero no te apures, ya lo mejoraremos.

Vuelve de nuevo a la pgina de configuracin del estilo y utiliza el botn Limpiar para eliminar el logo del estilo.
En el campo de texto Ttulo Sitio escribe el ttulo que quieras para tu sitio. Nosotros hemos escrito Curso online
Joomla 2.5
En el campo de texto Descripcin Sitio escribe texto como subttulo. Nosotros hemos escrito Con el ordenador
a cuestas.
Selecciona en el desplegable Color Plantilla la entrada Naturaleza.
Guarda y cierra los cambios.

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

Acude ahora al frontend de tu sitio, pulsa la tecla F5 de tu teclado para actualizarlo y observa el aspecto que el
nuevo estilo le da a tu sitio Joomla:

La plantilla beez_20. Consideraciones generales

Para personalizar el estilo de la plantilla Beez20 antes tienes que conocer algunos conceptos:
1. El logo utilizado de manera predeterminada en la plantilla se localiza en la carpeta images del directorio raz
de tu sitio Joomla, tal y como ya sabes. Sustituirlo es tan simple como seleccionar otro archivo, ya lo sabes.
2. El estilo Naturaleza de la plantilla Beez20 est condicionado por una serie de archivos que se localizan en la
carpeta nature de la carpeta de la plantilla. Es decir, fsicamente los archivos que son responsables de su
aspecto los puedes encontrar en la ruta:
directorio raz de Joomla
carpeta templates carpeta beez_20 carpeta images carpeta nature

Directorio images en el servidor local (distribucin Linux Mint 14 instalada en el equipo)

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

3. Si, en cambio, seleccionas el estilo Personal, los archivos responsables de su aspecto se encontrarn en la
ruta:
directorio raz de Joomla
carpeta templates carpeta beez_20 carpeta personal
3. Los colores, las dimensiones, etc. del estilo de la plantilla est condicionado por varios archivos presentes en
la carpeta de la plantilla (directorio beez_20 de la carpeta templates). En concreto, por archivos de hojas de
estilo de extensin css que puedes localizar en la carpeta css de la plantilla:

Si manejas conoces el cdigo presente en las hojas de estilo css podrs personalizar completamente la
plantilla a utilizar (hay muchos tutoriales en la red al respecto). Nosotros te mostraremos cmo puedes cambiar
algunos datos sencillos para modificar el estilo de la plantilla.
En cualquier caso, te indicamos que no tienes que utilizar ningn programa especfico para realizar estas
tareas. Slo tienes que abrir el archivo css correspondiente con cualquier editor de notas sencillo (no con un
procesador de textos como Word o Writer). En sistemas Windows tienes el bloc de notas que localizars en el
men Accesorios. En distribuciones Ubuntu puedes utilizar el editor Gedit. En mi caso, en la distribucin Linux
Mint instalada en mi equipo utilizar el editor Leafpad.
Sea el sistema que utilices haz clic con el botn derecho del ratn sobre el archivo css, por ejemplo, sobre
nature.css y selecciona la entrada Abrir con... Elige el editor de notas que quieras utilizar.

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

El resultado ser la apertura del archivo en una nueva ventana. Vers un montn de cdigo en ella, de
momento, puede que ininteligible para ti, todo se andar. Cierra la ventana haciendo clic en el icono de cierre
tpico de ventanas. No pasa nada, no has hecho ningn cambio, todo est como al principio. Puedes hacer esta
operacin sin miedo en cualquier archivo css de la carpeta. Familiarzate con este sistema de carpetas porque
tendrs que utilizarlo si deseas personalizar plantillas que ests usando en tu sitio.

Todo lo expuesto anteriormente tienen su reflejo en la propia administracin de Joomla. Si accedes al Gestor de
plantillas y haces clic en el nombre de la plantilla Beez_20 en la columna Plantilla (el mismo resultado obtienes
si haces clic en la pestaa Plantillas y, a continuacin, sobre el enlace Beez_20_detalles) puedes ver los
archivos que condicionan su aspecto:

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

Un clic sobre Editar css / nature.css abre en la administracin de Joomla el contenido del archivo nature.css al
que ya hemos hecho referencia:

Como puedes comprobar, Joomla te permite modificar los archivos css correspondientes directamente desde la
administracin del sitio.
Pero te recomendamos que no lo hagas desde aqu, especialmente si ests trabajando en un servidor remoto.
Es mucho ms simple modificar los archivos css en tu equipo (en la carpeta css correspondiente), realizar los
cambios que desees y guardarlos, y despus sustituir las carpetas y archivos originales de tu sitio Joomla por
los modificados (bien sobreescribiendo los datos directamente en tu servidor local o bien subindolos por FTP y
sobreescribiendo los originales en tu servidor local.
De esta manera siempre tendrs a buen recaudo la plantilla original por si te arrepientes o algo falla y tienes
que reutilizarla, porque eso ser lo primero que hars: una copia de seguridad de la plantilla, por si acaso.

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras

Joomla 2.5, un gestor de contenidos libre para tu sitio

Antes de personalizar, una copia de seguridad
Si tienes Joomla 2.5 instalado en un servidor local, en tu equipo, acude a la carpeta templates y haz una copia
(copiar y pegar, as de simple) de la carpeta responsable de la plantilla a personalizar en un directorio de tu
ordenador. En nuestro caso, nosotros guardamos una copia de la carpeta beez_20 al completo.

Si, en cambio, tienes Joomla 2.5 instalado en un servidor remoto, haz lo propio utilizando un programa de FTP.
Nosotros utilizamos Filezilla, software libre que puedes instalar en distintos sistemas. Su uso es muy simple: a
la izquierda de la pantalla el contenido de tu equipo; a la derecha, las carpetas de tu hosting. Slo tienes que
hacer clic y arrastrar, del lado derecho al izquierdo, para salvaguardar las carpetas y archivos (y, viceversa,
para subirlos a tu espacio web):

Ahora s, ya puedes comenzar a personalizar tu plantilla. Tu copia de seguridad est a buen recaudo. Si tienes
problemas siempre podrs restaurarla.

Con el ordenador a cuestas

http://www.lasticenelaula.es/portal

Edita Sueiras