Modificado por última vez en Lunes, 09 Septiembre 2013 03:12
(0 votos)

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


Comentarios (3)

This comment was minimized by the moderator on the site

Gracias Nano y José por vuestros halagos

This comment was minimized by the moderator on the site

Gracias por tomarse el tiempo y explicarlo en forma muy entendible. Agradecimiento y saludos

This comment was minimized by the moderator on the site

Gracias. Los felicito por su calidad y su enorme sentido común.

No hay comentarios escritos aquí

Deja tus comentarios

  1. Publicar comentario como invitado. Regístrate o ingresaa tu cuenta
Archivos adjuntos (0 / 3)
Compartir su ubicación
close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana de FeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento