Clicky

Cómo encontrar el CSS de Joomla element.style {

Joomla CSS

Tampoco tendremos un fichero HTML estático en el cual podamos modificar el CSS

Muchas veces cuando estamos modificando la apariencia de nuestra plantilla de Joomla y queremos mover algún elemento con CSS nos encontramos que, al analizarlo con Firebug, nos aparecen al principio unas líneas de CSS que comienzan con element.style {

Por más que busquemos en los archivos CSS de nuestra plantilla no las vamos a encontrar. "element.style" no se trata de una regla CSS contenida en un fichero de CSS, sino que ese estilo CSS está embebido en el propio código HTML y, por comodidad, Firebug lo agrupa en el panel derecho, donde muestra todo el CSS de la página.

Para editar ese tipo de código CSS, tenemos que irnos al HTML, no podemos editar ningún fichero CSS ya que no existe uno como tal que contenga esas propiedades de "element.style". Pero existe un problema, tampoco podemos editar ningún fichero HTML, ya que Joomla!, al ser un gestor de contenidos, lo que hace es generar páginas dinámicas a través del lenguaje de programación PHP, es decir, del motor PHP que trabaja como trasfondo. Por tanto, tampoco tendremos un fichero HTML estático al cual podamos ir para modificarlo.

Así que no nos queda más remedio que analizar qué queremos tocar, investigar un poco los módulos PHP que intervienen en lo que queremos modificar y, una vez que hemos localizado ese módulo (puede que también sea un plugin o componente), abrirlo desde el administrador de Joomla. Hay multitud de módulos en Joomla pero, por ejemplo, en los módulos "prefabricados" por algún desarrollador casi siempre nos encontraremos con alguna opción que diga "Module Class Suffix", "Clase CSS del módulo", "Clase CSS"  (o algo parecido). Es ahí donde debemos encontrar el nombre de la clase CSS que deberemos buscar.

módulo Joomla clase CSS

Con módulos personalizados es un poco más fácil pues tenemos la opción de ver la salida HTML personalizada que en algunas ocasiones contiene también algún elemento de estilo CSS, como es el caso de este ejemplo:

<div style="margin-top: 35px; padding-left: 30px;">

Que nos da esta salida en Firebug:

element.style {
    margin-top: 35px;
    padding-left: 30px;
}

Firebug element.style en Joomla

Por ejemplo, en este caso al querer mover hacía la derecha la barra separadora que indico en la imagen de más abajo tendremos que irnos a editar el módulo que le corresponde y rectificar  style="margin-top: 35px; padding-left: 30px;" a nuestra conveniencia.

módulo Joomla para modificar element.style

Jesus_Caceres