SERGIOIGLESIAS

Blog sobre Joomla

Cómo crear una clase para dar estilo a los módulos en una plantilla Joomla!

Las clases (o sufijos como se conocían en versiones anteriores) son una de las características que puedes aplicar para dar estilos a los diferentes módulos (o posiciones) que tienes a tu disposición en una plantilla Joomla!

Una forma de diferenciar estos módulos mediante colores, tipografías, imágenes de fondo, etc.

Si quieres ver cómo se utilizan o cómo se crea una nueva clase sigue leyendo...

Qué es una clase (o sufijo) en un módulo Joomla!

Se trata de una clase de CSS (una "palabra clave") que nos permite dar un estilo u otro a un módulo dentro de una posición de una plantilla Joomla!.

Esta clase se pone a través del campo "Clase CSS del módulo" que tenemos en la pestaña "Avanzado" en la configuración del módulo.

sufijos modulos joomla campo clase

Generalmente cada plantilla tiene las suyas propias, o bien las que vienen por defecto en el framework de Frontend utilizado (Bootstrap, UiKit...).

Cómo utilizar una clase en un módulo de Joomla!

Para el ejemplo de este artículo voy a utilizar la plantilla Protostar que viene por defecto en Joomla! 3.x

Esta plantilla está basada en el framework de Frontend Bootstrap 2.3.2

Voy a usar el módulo llamado "Image Module" (que viene por defecto en una instalación con datos de ejemplo) y que es de tipo "HTML personalizado".

En la parte de Front se ve así por defecto.

modulo front sin clases

Para cambiarlo puedes editar y utilizar una de las clases que tiene Bootstrap llamadas "alert alert-info".

Entras en la edición del módulo y vas al campo que te he comentado anteriormente.

modulo sufijo modificado

Como ves en la imagen anterior pones esas clases (alert alert-info) en dicho campo (recuerda dejar un espacio en blanco al principio).

Ahora el módulo desde Front se ve de esta manera.

modulo front con clases modificado

Puedes ver el código que se ha generado.

sufijos codigo modificado

Como puedes ver, se ha añadido 2 veces esta clase y por eso se muestra de esa manera el módulo.
(Esto se podría solucionar haciendo un override del módulo en cuestión).

Cómo crear una nueva clase para un módulo en Joomla!

Para crear una nueva clase en una plantilla Joomla es muy fácil.

Sigue estos pasos:

1/ Crear una clase con la palabra clave que queramos utilizar en el fichero CSS de la plantilla

Para este ejemplo voy a crear la clase "destacado" en el fichero template.css que tenemos en la plantilla Protostar.

Para ello seguimos estos pasos:

  1. Ir a Administrator > Extensiones > Plantillas y hacer clic en el nombre de la plantilla que queremos editar.

    editar ficheros plantilla
  2. Abrir el fichero template.css que tenemos dentro de la carpeta "css" (lo podemos ver en el menú de la izquierda).

    sufijos joomla editar fichero css
  3. Añadimos la clase "destacado" al final del fichero.

    sufijos joomla crear clase

    .destacado{background:red; padding:20px; border-radius:8px;}

    Explicación: ponemos un fondo de color rojo, con un espacio entre el borde y el contenido de 20 píxeles y hacemos que el borde sea redondeado.

2. Editar el módulo al que queramos aplicar esta clase

Como hemos hecho anteriormente a la hora de aplicar una clase a un módulo, seguiremos los mismos pasos:

  1. Buscar el módulo desde Administrator > Extensiones > Módulos
  2. Editar el módulo y añadir la clase "destacado" (sin las comillas) en el campo "Clase CSS del módulo".

    sufijos joomla nueva clase
  3. Guardamos la configuración del módulo.

Ya está.

Con estos 3 pasos hemos editado el módulo y, ahora, lo podrás ver así desde el Front.

modulo front con clase nueva.


Espero que este mini-tutorial Joomla! sobre cómo utilizar las clases en un módulo de Joomla! y/o cómo crear una nueva clase para un módulo en una plantilla Joomla! te haya resultado de interés.

Si quieres ayudarme, y te ha gustado, comparte el artículo con tus amigos a través de las redes sociales.

Y si quieres aprender más sobre Desarrollo de Plantillas Joomla! regístrate en mi newsletter y recibe un curso gratis.

3 comentarios

  • I see you don't monetize your site, don't waste your traffic, you can earn extra cash every month because you've got high quality content.<br />If you want to know what is the best adsense <br />alternative, search in google: adsense alternative Mertiso's <br />tips

Suscríbete a mi newsletter

¿Te ha gustado el artículo? Suscríbete a mi newsletter y recibe contenido exclusivo.
Podrás hacer gratis un Curso de desarrollo de plantillas Joomla.

Artículos relacionados

Solicita presupuesto

¿Quieres una página web que funcione?

Contacta conmigo y hablemos de tu proyecto.