Cómo crear un nuevo estilo de módulo en una plantilla Joomla!

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:

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".

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).

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, &$params, &$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".

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.

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