[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla

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

[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)   02 Marzo 2016    [Tips Joomla](https://sergioiglesias.net/blog/joomla)   2 - 4 minutos    Visitas: 24100  -
- [ Formación Joomla ](https://sergioiglesias.net/etiquetas/formacion-joomla)
- [ Cursos Joomla ](https://sergioiglesias.net/etiquetas/cursos-joomla)
- [ Desarrollo Joomla ](https://sergioiglesias.net/etiquetas/desarrollo-joomla)
- [ Plantillas Joomla ](https://sergioiglesias.net/etiquetas/plantillas-joomla)

   ![](https://sergioiglesias.net/images/blog/tips/clase-sufijo-modulos-plantilla.jpg) 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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/sufijos/sufijos-modulos-joomla-campo-clase_1230.png?version=7061008af831af46363b92ac81312e93)

Generalmente cada plantilla tiene las suyas propias, o bien las que vienen por defecto en el framework de Frontend utilizado ([Bootstrap](http://getbootstrap.com/), [UiKit](http://getuikit.com/)...).

## 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](http://getbootstrap.com/2.3.2/base-css.html)

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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/sufijos/modulo-front-sin-clases_1230.png?version=13aa9cc50ca477f3f79511ac1ab228b1)

Para cambiarlo puedes editar y utilizar una de las [clases que tiene Bootstrap llamadas "alert alert-info"](http://getbootstrap.com/2.3.2/components.html#alerts).

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

![modulo sufijo modificado](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/sufijos/modulo-sufijo-modificado_1230.png?version=c4df89c3816c523f92908ca4b3650a45)

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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/sufijos/modulo-front-con-clases-modificado_1230.png?version=8085ef04e1895b6a06b7789c6cb8eff0)

Puedes ver el código que se ha generado.

![sufijos codigo modificado](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/sufijos/sufijos-codigo-modificado_1230.png?version=4143e31e271692c51e872104a2e110f2)

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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/sufijos/editar-ficheros-plantilla_1230.png?version=0645c48c6a550c8830af527cb150e1fc)
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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/sufijos/sufijos-joomla-editar-fichero-css_1230.png?version=aa6e078ac57f3ddd9a90de5e53121eca)
3. Añadimos la clase "destacado" al final del fichero.

    ![sufijos joomla crear clase](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/sufijos/sufijos-joomla-crear-clase_1230.png?version=4879c8259bf13fb323c44d2eea7eb45d)

     ```
    .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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/sufijos/sufijos-joomla-nueva-clase_1230.png?version=9df939e6cd21ed0c40f67789115f108a)
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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/sufijos/modulo-front-con-clase-nueva_1230.png?version=e2dfbf9ce24bbf0a79c28b254d108aa3).

---

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!**](https://sergioiglesias.net/curso-online-joomla-desarrollo-plantillas/) regístrate en mi newsletter y recibe un curso gratis.

[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado

### ¿No sabes bien en qué estado

está tu web Joomla?

Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden.

Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML

[ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables

[![Sergio Iglesias](https://sergioiglesias.net/images/sergiois-joomla-web.png)](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior

Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS.

[](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias")

### 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**.

[Quiero apuntarme!](https://sergioiglesias.net/newsletter)

###  3 comentarios

- [ ![](https://www.gravatar.com/avatar/9bc2d6e22e135e1f995c6b856eda5795602006d781ba9aeca7425afbb0219db8?s=48&r=G&d=mp) ](https://www.gravatar.com/9bc2d6e22e135e1f995c6b856eda5795602006d781ba9aeca7425afbb0219db8)

     86Arlie

     [ Sábado, 12 Agosto 2017 22:54 ](https://sergioiglesias.net/blog/joomla/como-crear-clase-estilo-modulos-plantilla-joomla?akengage_cid=179#akengage-comment-179)

      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
- [ ![](https://www.gravatar.com/avatar/b66fba1a78a3ea7b41e98a8e43ec390a0f33e7df0759e8a53879ec6be4be9d0f?s=48&r=G&d=mp) ](https://www.gravatar.com/b66fba1a78a3ea7b41e98a8e43ec390a0f33e7df0759e8a53879ec6be4be9d0f)

     sergiois

     [ Jueves, 10 Marzo 2016 09:22 ](https://sergioiglesias.net/blog/joomla/como-crear-clase-estilo-modulos-plantilla-joomla?akengage_cid=115#akengage-comment-115)

      Gracias Raúl por tus comentarios!!
- [ ![](https://www.gravatar.com/avatar/db5d25abdd95245896001aa2b2b77227d965c809f696b3b467495f2f373d16d9?s=48&r=G&d=mp) ](https://www.gravatar.com/db5d25abdd95245896001aa2b2b77227d965c809f696b3b467495f2f373d16d9)

     Raúl Rojas

     [ Jueves, 10 Marzo 2016 00:31 ](https://sergioiglesias.net/blog/joomla/como-crear-clase-estilo-modulos-plantilla-joomla?akengage_cid=114#akengage-comment-114)

      Saludos desde Venezuela Sergio, muy pedagógico y precisos tus articulos. Éxitos

###  Deja tu comentario

 En respuesta a Some User

 Nombre \*

 Dirección de email \*

 Texto del comentario \*

 Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*