(Tiempo estimado: 2 - 4 minutos)

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.

Sobre el autor, Sergio Iglesias

Sergio Iglesias

Sergio Iglesias es formador, desarrollador y front-end del CMS Joomla!. A través de su blog y sus cursos puedes aprender a desarrollar tu propio portal web autogestionable.

 

¿Te ha gustado el artículo? ¡Suscríbete YA!

¿Necesitas un sitio web que funcione?

¿No quieres depender de nadie para gestionar tu página web?

Recibe contenido exclusivo y GRATIS mi curso sobre desarrollo de plantillas Joomla!


Me apunto ya!

Comentarios

#3 86Arlie 12-08-2017 22:54
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.
If you want to know what is the best adsense
alternative, search in google: adsense alternative Mertiso's
tips
Citar
#2 sergiois 10-03-2016 09:22
Gracias Raúl por tus comentarios!!
Citar
#1 Raúl Rojas 10-03-2016 00:31
Saludos desde Venezuela Sergio, muy pedagógico y precisos tus articulos. Éxitos
Citar

Escribir un comentario

Puedes publicar el comentario que quieras, pero si lo considero SPAM será eliminado automáticamente.

 

SergioIglesias.NET te informa que los datos de carácter personal que nos proporciones rellenando este formulario serán tratados por Sergio Iglesias Sánchez como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es, únicamente, para gestionar los comentarios de este blog. La legitimación se realiza a través del consentimiento del interesado. Te informamos que los datos que nos facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting). Ver política de privacidad de Siteground. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@sergioiglesias.net así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad.

¿Quieres tener un sitio web que funcione?

Contacta conmigo