Joomla CSS para principiantes

Recibí este email hace un tiempo, y es un claro ejemplo de lo que digo: 

Kris, el tipo de cosas con las que me peleo ahora con Joomla son temas de diseño. Tengo clientes a los que les encanta una plantilla -de hecho ellos eligen la plantilla- PERO quieren que el fondo sea distinto, o que haya más pestañas de las que caben en un menú horizontal, o quieren un área de usuario donde no la hay. “Oh, simplemente mueve eso a la izquierda y pon ahí nuestra dirección, y añade una barra azul entre este sitio y ese”.

Sólo conozco el suficiente PHP y CSS para ser peligroso. Sería de gran ayuda si simplemente pudiera entender todos los pasos necesarios para crear una nueva área de usuario, y que incluyera dónde poner el código PHP y CSS.

En este artículo escribiré acerca de cómo trabajo yo con CSS en Joomla. En un artículo posterior, me adentraré en cómo añadir una posición de módulo en una plantilla.

¿Qué es CSS?

Antes de que empecemos, debes saber qué es CSS. Creo firmemente que las habilidades más importantes que un usuario de Joomla debe tener son las relacionadas con HTML y CSS. Y la simpatía, claro ;).

Esto es lo que la Wikipedia dice acerca de las Hojas de Estilo en Cascada (CSS – Cascading Style Sheets):

Las hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

La parte fundamental de este extracto de la Wikipedia es en mi opinión lo más importante que debe saberse acerca  de CSS: Separación del contenido (HTML) de la presentación (CSS). Usando CSS, podemos tener un único archivo en el que centralizaremos todos nuestros estilos de forma separada a nuestros artículos de contenido de Joomla. De esta forma, grandes cambios de aspecto en nuestro sitio podrán abordarse de forma sencilla. Imagina que aplicaste estilos específicos e individuales a todos y cada uno de los artículos de tu sitio Joomla; sería una pesadilla realizar cambios de estilo – en caso de un rediseño completo del sitio o cosas similares.

El CSS de Joomla y las plantillas

Siempre me divierto cuando leo un 'tweet' diciendo algo como: “¡Joomla no soporta IE!”. O: “Joomla no está optimizado para los motores de búsqueda”. ¡Por supuesto que lo está! Pero es posible que la plantilla no. Esto depende de cómo esté construido el HTML de la plantilla y de cómo estén implementado el código CSS.

La mayoría de las veces,  los archivos CSS de la plantilla se encuentran en la carpeta /templates/nombre-de-la-plantilla/css.

Algunas plantillas tienen un único archivo CSS (llamado template.css casi siempre), si bien otros tienen unos cuantos. Para un rendimiento de página óptimo, el número de archivos css debería mantenerse al mínimo. Esto reduce el número de peticiones al servidor necesarias para mostrar la página. A veces puedes encontrarte con que la plantilla una un archivo CSS principal que importa todos los demás mediante esta sintaxis (ejemplo):

@import url('reset.css');
@import url('joomla.css');
@import url('typography.css');
@import url('modules.css');
@import url('custom.css');

Mejores prácticas con el CSS

Imaginemos que tienes instalada una plantilla de YooTheme. Podrías volverte majareta y cambiar todos los archivos CSS a lo loco. Probablemente no sería algo tan malo a fin de cuentas, ya que podrías volver a descargarte los archivos originales de nuevo si te hubieras cargado algo.

De cualquier manera, hay una manera mejor de modificar el CSS. Cuando quieras usar estilos CSS en una plantilla distintos de los que esta trae (nota del T: esto es lo que se llama “hacer override de plantilla”, o “hacer template override”), simplemente usa una hoja estilos distinta. YooTheme ya ha implementado esta característica en sus diseños (nota del T: de hecho, la mayoría de los proveedores de plantillas de pago ya lo hacen, aunque en el momento en el que se escribió el artículo era bastante novedoso). Han incluido un archivo CSS en blanco llamado custom.css que se carga justo después que el resto de archivos CSS de la plantilla. En este archivo es donde pongo mis cambios de estilo.

Si quiero actualizar mi plantilla, puedo simplemente copiar este archivo custom.css, actualizar mi plantilla a la última versión y subir de nuevo el archivo custom.css. ¡Y todo listo!

No repitas estilos si no es necesario

Al aplicar estilos a distintos elementos del HTML con CSS es importante ser específico. Y mantener tu hoja de estilos lo más escueta posible. Lo que quiero decir es que no necesitas repetir estilos simplemente porque quieres cambiar el estilo de un elemento. Digamos que, por ejemplo, tienes definido el siguiente estilo para el elemento H1 en tu archivo de CSS principal (template.css o similar):

h1 {
font-size:24px;
color:#d7d7d7;
margin-bottom:1em;
text-transform:uppercase;
}

El estilo normal para los elementos H1 es negrita. Quizá quieras añadir el estilo necesario para que el elemento de encabezamiento use el estilo de fuente normal, y no el negrita. Y, al mismo tiempo, no quieres que el elemento H1 use letras mayúsculas. Por supuesto, podrías hacerlo de la siguiente manera, añadiendo este código al archivo custom.css:

h1 {
font-size:24px;
color:#d7d7d7;
margin-bottom:1em;
text-transform:none;
font-weight:normal;
}

Esto funciona, pero no es un código de calidad. Repites todos los estilos incluso cuando sólo quieres alterar un único estilo y añadir otro. He aquí una mejor manera de hacerlo:

h1 {
text-transform:none;
font-weight:normal;
}

En este caso simplemente añades estilos que son distintos del original. Los otros estilos se mantienen inalterados.

Usa Firebug para probar tu CSS

Una de las herramientas que uso para probar mi CSS se llama Firebug. Es un complemento de Firefox que te proporciona mucha información acerca de la estructura del HTML y el CSS de una página web. Cuando tienes Firebug instalado, puedes hacer clic con el botón derecho sobre cualquier elemento y en el menú contextual que se abre elegir “Inspeccionar elemento”. Se abrirá la ventana de Firebug en la parte inferior de la pantalla; en ella podrás ver la estructura del HTML (a la izquierda) y la del CSS (a la derecha).

¡Y ahora empieza la diversión! Puedes empezar a experimentar con el CSS directamente en Firebug. ¿Quieres cambiar el margen de un elemento? ¿El color de fondo? ¿Eliminar el borde? Cualquier ajuste que desees está disponible para jugar con él, y el resultado se muestra instantáneamente en el navegador. Por supuesto, si refrescas la página los cambios se perderán. Cuando estés conforme con los cambios, copia el CSS en tu archivo personalizado (custom.css en el ejemplo) y súbelo a tu servidor por ftp.

Échale un vistazo a mi artículo previo sobre las 8 extensiones gratuitas para Firefox que todo usuario de Joomla debería tener (“8 Free Firefox extensions every Joomla user should have”, el artículo está en inglés, aunque será el próximo que traduciremos ;) ) .

Dedica algún tiempo a aprender CSS

Creo que todo usuario de Joomla/desarrollador web debería aprender algo de CSS y saber HTML de memoria. Esto hace mucho más sencillo modificar tus plantillas y conseguir lo que tú (¿y tu cliente?) quieres.

No es como aprender PHP. Apenas conozco más que unas cuantas cosas útiles sobre PHP. HTML y CSS sin embargo con como una segunda naturaleza para mí. Ello es así porque he invertido tiempo en aprender y practicar el uso de estas habilidades. Esto es especialmente cierto en el caso de CSS.

Es fácil empezar con CSS y Joomla

La manera más fácil de empezar a aprender CSS es echarle un vistazo al template.css de tu plantilla.  Fíjate en su estructura y trata de cambiar alguno de los estilos. No olvides hacer una copia de seguridad del archivo antes.

Podrías probar a cambiar las etiquetas HTML de los encabezamientos en primer lugar. ¿Quieres que la etiqueta H2 sea un poco más pequeña?  Ya lo tienes ;). Y se trata de un cambio de gran calado, que afecta a todas las etiquetas H2 de tu sitio. Otras etiquetas que puedes cambiar son la a (los enlaces web), la p (los párrafos, por ejemplo probando ajustando el espaciado entre líneas ) y las ul e il (las listas).

Lectura recomendada para aprender CSS

Para aprender CSS, siempre recomiendo los libros del gurú del CSS Eric Meyer. Tiene algunas grandes intuiciones y un vasto conocimiento acerca del CSS. Describe su uso de una manera fácil de entender, y proporciona un montón de ejemplos de uso en sus libros. Mi primer libro sobre CSS fue “Eric Meyer on CSS”, y me enseñó muchísimo. Por ejemplo, recorre todo el proceso de convertir un diseño basado en tablas en otro basado en hojas de estilo en cascada (CSS). Explicando cada paso del camino.

Otro gran recurso es “A List Apart”. Es un portal (en inglés) acerca de desarrollo web, y explica muchas técnicas sobre CSS. “La revista A List Apart explora el diseño, desarrollo y significado del contenido web, centrándose especialmente en los estándares web y las buenas prácticas.” ¡Realmente genial! 

Este artículo es una traducción de Gnumla del original 'Joomla CSS for beginners', escrito por Kristoffer Sandven en JoomlaBlogger.

Translation by Isidro Baquero, gnumla.com: CSS para principiantes