Joomla! - Los estilos CSS

¿Qué es CSS?

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos. CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

Al cargar nuestra web Joomla! en el explorador, automáticamente vinculará los ficheros CSS que contengan los estilos utilizados por los distintos elementos de la web. En el código de la web podremos encontrar vinculados ficheros CSS correspondientes a la plantilla, a los módulos o cualquier otro elemento de la web. Por ejemplo:

<link rel="stylesheet" href="/Joomla-1.5.3-spanish/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/Joomla-1.5.3-spanish/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/Joomla-1.5.3-spanish/templates/rhuk_milkyway/css/template.css" type="text/css" />
<link rel="stylesheet" href="/Joomla-1.5.3-spanish/templates/rhuk_milkyway/css/blue.css" type="text/css" />
<link rel="stylesheet" href="/Joomla-1.5.3-spanish/templates/rhuk_milkyway/css/blue_bg.css" type="text/css" />

De esta manera, todos las hojas de estilo definidas en estos ficheros, pueden ser utilizados en cualquier elemento del código de Joomla!, incluidos nuestros artículos.

¿Cómo funciona?

Las hojas de estilo están compuestas por reglas. En una regla hay un selector y se declara una propiedad y su valor para ese elemento, para que luego pueda ser aplicada a un elemento HTML.

Por ejemplo:

h1 {color: red;}

El selector h1 declara que los encabezados h1 sean de color rojo.

Para declarar estilos en un documento que no estén includos en los ficheros CSS linkados, deberemos utilizar las etiquetas "style". Por ejemplo:

    <style type="text/css">
      
      h1 {
        color: red;
      }
    
    </style>

Los selectores se pueden agrupar separados por coma:

h1, h2, h3 { color: red;}

 Y también las propiedades, separadas por punto y coma:

p {text-align:center;color:red;}

Si el valor tiene mas de una palabra, va entre comillas:

p {font-family: "sans serif";}

Existen propiedades para afectar a todos los aspectos (colores, tamaños, márgenes...) de todos los elementos HTML de nuestra web (background, textos, las imágenes, las barras laterales...). Se aplican en cascada, es decir, que un elemento puede verse afectado por mas de un estilo, por ejemplo en las tablas podemos tener estilos para table, estilos para td, otros para tr, y así una casilla de la tabla se veria afectada por los tres estilos. O bien los divs situados dentro de otros divs, se ven afectados por los estilos de ambos, siguiendo la herencia se aplicarían por orden.

Podemos clasificar los selectores en 3 tipos:

• Selector de elemento
  • Afecta a todos los elementos de ese tipo dentro de su contexto
  • Por ejemplo h1 afecta a todos los heading 1, td afecta a todas las columnas de las tablas
• Selector de clase
  • tiene un nombre propio, precedido de un punto, y afectan a todos los elementos html que sean etiquetados como class="nombre propio de la clase"
  • Por ejemplo .titularseccion afectará a <p class="titularseccion"></p>
• Selector de identidad
  • tiene un nombre propio, precedido de una almohadilla, y afectan a UN SOLO ELEMENTO html que sea etiquetado como id="nombre propio de la clase"
  • Por ejemplo .titularpagina afectará a <div id="titularseccion"></div>

Existen dos elementos html que nos van a ser muy útiles y que nos encontraremos constantemente en el código de Joomla!. Estos dos elementos, a diferencia de otros como body, p, h1, etc., no poseen ningún significado intrínseco, los podemos utilizar libremente y aplicarles estilos sin afectar al resto de los elementos. 

• span (para una línea)
• div (para un bloque)

Así, por ejemplo, si queremos dar formato a una linea de texto aislada, lo haremos definiendo el selector de clase así:

.apellido { font-style: italic; font-weight: bold }y aplicándolo así:

<li><span class="apellido">Fernandez</span></li>

Por último, en algunas ocasiones podemos necesitar aplicar un estilo, "a lo bruto", así:

 <li><span style="font-style: italic; font-weight: bold;">Fernandez</span></li>

Y una vez conocidos estos fundamentos básicos, ya solo nos falta conocer las diferentes propiedades que podemos asignar a cada elemento, ya sea para añadir estilos a nuestra web de Joomla! o para modificar los existentes.

 Guia de referencia rápida CSS

Esta es una "Chuleta", donde podemos consultar los mas utilizados.

Chuleta de conceptos básicos CSS (ateneupopular.com)

Y para mejorar nuestros conocimientos son de imprescindible lectura estas guias:

Uso básico de CSS (rincondelprogramador.com)

Guia básica de hojas de estilo (luiscodina.com) 

Compatibilidad entre navegadores

Este es sin duda el quebradero de cabeza mas importante.
Algunas plantillas, incluso sin modificar, son muy difíciles de adaptar, y a veces hacer que se vean exactamente igual resulta simplemente imposible. Internet Explorer 6, por ejemplo, tiene numerosos problemas para mostrar los ficheros PNG, y tampoco interpreta demasiado bien algunos javascripts de Google, llegando a causar errores de protección del navegador.

Por suerte existe una técnica llamada CSS Hacks, que nos permitirá crear estilos que se solo según el navegador:

.miClase{
    width: 15px; /* Para todos los Browsers */
    #width: 20px; /*Para Internet Explorer */
    _width: 25px; /* Para Internet Explorer 6 */
    //width: 30px; * Para firefox */
}

Firebug

Para poder modificar los estilos de las plantillas Joomla! existe una herramienta que resulta absolutamente imprescindible. Se trata de Firebug. Esta extensión de Firefox es un debugador que nos permitirá provar los cambios en los estilos CSS sobre la misma página.

Con Firebug podremos hacer click sobre cualquier elemento de nuestra web, y ver el código html de ese elemento, junto a todos los estilos CSS que le afectan, Aplicando los nuestros conociminentos de CSS, podremos cambiar sobre la misma página los estilos, provando otros colores, tamaños, fuentes... Luego guardaremos las modificaciones en los ficheros CSS correspondientes, que el mismo firebug nos va a indicar.

Manual de Firebug avanzado (adictosaltrabajo.com) 

 Tutorial personalización de estilo para joomla en SoloJoomla.com

[volver al índice de la Guia Joomla!]

Joomla! - 2 - Personalización