Índice

Las clases de CSS de Joomla!

1. Clases predeterminadas

Joomla! propone clases de CSS de manera nativa. Acabamos de ver que, al incluir módulos en una posición determinada, es posible asignar un estilo de estructura HTML/CSS con el atributo style:

<jdoc:include type="modules" name="position-7" style="well" />

Atención, el número y el tipo de clase CSS nativa propuestos por Joomla! varían de una versión a otra de plantilla.

Al utilizar este atributo, Joomla! inserta elementos de estructura HTML con clases predefinidas. Si tomamos el ejemplo del módulo Últimos artículos, con una declaración incluida con el estilo well, este es el código generado:

<div class="well">  
  <h3 class="page-header">Últimos artículos</h3>  
  <ul class="Latestnews">  
    ...  
  </ul>  
</div>

Como puede ver, Joomla! ha utilizado tres clases: la clase well para la caja <div>, la clase page-header para el título <h3> y la clase Latestnews para la lista <ul>.

En caso necesario estas reglas CSS se pueden ver y modificar:

Vaya a la administración de las plantillas.

Haga clic en el enlace Detalles y archivos de la plantilla Protostar, por ejemplo.

images/OW02-05.png

En la pestaña Editor, haga clic en la carpeta CSS y después en la carpeta template.css:

images/OW02-06.PNG

También es posible utilizar un editor de código ...