(Tiempo estimado: 3 - 6 minutos)

Los estilos de los módulos te permiten presentar la información o contenido de un módulo de una forma determinada.

Por defecto en Joomla! tenemos varios definidos y que podemos utilizar e incluso modificar mediante override.

Lo bueno de Joomla! es que también te permite crear los que necesites para poder adaptarlos al diseño de tu plantilla.

Qué es y dónde se declara un estilo de módulo en Joomla!

Como ya te he comentado, se trata de la forma en que se va a presentar la información de un módulo (título, contenido y otros parámetros de configuración como sufijos, etiqueta del módulo, etiqueta de encabezado, tamaño de Bootstrap...).

Esta información se declara, generalmente, en el fichero index.php de la plantilla cuando añades la línea de código que va a mostrar un módulo:

<jdoc:include type="modules" name="posicion"></jdoc:include>

Estilos de módulo nativos de Joomla!

También te he comentado que, por defecto, tenemos los siguientes estilos definidos en Joomla! (se ponen en el atributo style):

  • rounded: presenta la información con un estilo con bordes redondeados.
  • none: presenta la información sin estilos.
  • table: presenta la información en formato tabla.
  • horz: presenta la información también en formato tabla.
  • xhtml: presenta la información en formato HTML (con divs).
  • html5: presenta la información en formato HTML (con Bootstrap).
  • outline: presenta la información de previsualización del módulo.

Tienes toda la información en la documentación oficial de Joomla!: Módulo estándar Chromes (también en inglés).

Cabe decir que si no se pone nada en el atributo style, se toma por defecto el valor "none".

También es importante decir que casi todas las plantillas desarrolladas tienen overrides de estos estilos y que cuentan con propios desarrollados (según el framework en el que se basen).

Cómo crear un nuevo estilo de módulo

A continuación de voy a mostrar los pasos que hay que hacer para crear un nuevo estilo de módulo en una plantilla Joomla!.

Para ello voy a utilizar, como suelo acostumbrar en estos tutoriales, la plantilla Protostar (que es la que viene por defecto en una instalación Joomla!

El fichero en donde hay que declarar tanto los overrides como los nuevos estilos de módulos es en modules.php que se encuentra localizado en el directorio "templates/mi_plantilla/html".

Si no se encuentra este fichero es que la plantilla no tiene overrides ni estilos propios.

Si te fijas en el fichero modules.php de la plantilla protostar verás que hay 2 estilos propios: "no" y "well".

estilos modulos propios protostar

A la hora de utilizarlos en un módulo, lo podemos ver en la configuración del módulo dentro de la pestaña de "Avanzado", en el último campo llamado "Estilo del módulo" (que por defecto tendrá el que se haya definido para esa posición - como se ve en el código de declaración jdoc - o none si no tiene nada en este atributo).

estilos modulos propios protostar back

Según puedes ves en el código, el primero, estilo no (modChrome_no), únicamente muestra el contenido del módulo sin nigún formato (no muestra ni título ni tiene en cuenta otros parámetros de configuración).

El segundo, estilo well (modChrome_well), muestra el contenido en un div con la clase well (propio de Bootstrap) y tiene en cuenta los siguientes parámetros de configuración:

  • Etiqueta del módulo ($moduleTag): por defecto div (pero puede ser section, aside, nav, address o article).
  • Tamaño Bootstrap ($bootstrapSize): por defecto 0 (pero puede ser cualquier valor de 0 al 12).
  • Clase del módulo ($moduleClass): para los sufijos (se añadirán a la clase well que viene por defecto).
  • Etiqueta de encabezado ($headerTag): por defecto h3 (pero puede ser h1-h6, p o div).
  • Clase de encabezado ($headerClass): por defecto no lleva nada (pero se puede utilizar cualquier clase existente o crearla posteriormente en la hoja de estilos).

Otras cosas a tener en cuenta en este código son los siguientes condicionales, if:

  • Si hay contenido ($module->content): en este caso muestra el contenido del módulo.
  • Si se marca "Mostrar título" ($module->showtitle): en este caso muestra el título del módulo dentro contenido ($module->title).

Ahora que ya tienes una visión clara de lo que puede tener un estilo de módulo, te voy a mostrar cómo crear un nuevo.

Lo voy a llamar "nuevo" y como características mostrará el contenido de un módulo en un div con color azul (del tipo "alert-info" propio de Bootstrap).

  1. Crear la función: modChrome_nuevo.
  2. Copiar el mismo código que el estilo "well".
  3. Modificamos el código de la línea class="well... por class="alert alert-info....

Te muestro el código completo:

function modChrome_nuevo($module, &amp;$params, &amp;$attribs)
{
  $moduleTag     = $params->get('module_tag', 'div');
  $bootstrapSize = (int) $params->get('bootstrap_size', 0);
  $moduleClass   = $bootstrapSize != 0 ? ' span' . $bootstrapSize : '';
  $headerTag     = htmlspecialchars($params->get('header_tag', 'h3'));
  $headerClass   = htmlspecialchars($params->get('header_class', 'page-header'));
 
  if ($module->content)
  {
    echo '<' . $moduleTag . ' class="alert alert-info ' . htmlspecialchars($params->get('moduleclass_sfx')) . $moduleClass . '">';
 
      if ($module->showtitle)
      {
        echo '<' . $headerTag . ' class="' . $headerClass . '">' . $module->title . '';
      }
 
      echo $module->content;
    echo '';
  }
}

Ahora puedes ver que en el campo desplegable de "Estilo del módulo" de la pestaña "Avanzado" aparece el nuevo estilo creado "nuevo".

estilos modulos nuevo protostar back

El restultado de este módulo lo puedes ver a continuación: el primero, "Popular Tags", utiliza el estilo well y el segundo, "Latest Articles", utiliza el estilo nuevo.

estilos modulos front


Hasta aquí este pequeño tutorial sobre cómo crear un estilo de módulo en una plantilla Joomla!

Espero que te haya resultado de interés.

Y recuerda que puedes aprender más sobre desarrollo de plantillas Joomla! en el curso gratuito que te ofrezco.

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

#2 sergiois 21-01-2017 10:57
Hola Evy,

Me alegro que te vaya bien los tutoriales.

En cuanto a tu pregunta decirte que sí es posible. Puedes hacerlo a través de una imagen o, mejor, a través de CSS (aquí te dejo una web en la que puedes crearlos y coger el código: http://www.cssmatic.com/es/gradient-generator).

Para integrarlo con Joomla puedes hacerlo a través de clases e integrando el código css generado a partir de la herramienta anterior.

Gracias por comentar! ;)
Citar
#1 Evy 21-01-2017 07:08
Voy por un segundo tutorial y me ha venido muy bien. Gracias por tu ayuda con esto ¿Es posible colocar color de fondo en degradado o degradé, para un módulo?

Mil gracias (Y)
Citar

Escribir un comentario

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



Código de seguridad
Refescar

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