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.
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.
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.
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.
Puedes ver el código que se ha generado.
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:
- Ir a Administrator > Extensiones > Plantillas y hacer clic en el nombre de la plantilla que queremos editar.
- Abrir el fichero template.css que tenemos dentro de la carpeta "css" (lo podemos ver en el menú de la izquierda).
- Añadimos la clase "destacado" al final del fichero.
.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:
- Buscar el módulo desde Administrator > Extensiones > Módulos
- Editar el módulo y añadir la clase "destacado" (sin las comillas) en el campo "Clase CSS del módulo".
- 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.
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.
