monitojoomla

Module Chrome, Ejemplo Práctico

Jueves, 24 Junio 2010 | Escrito por Jhon Marreros Guzman

Detalles Tutorial - Nivel : Avanzado, Versión Joomla : 1.5.x, Formato : texto y video
Module Chrome nos permite envolver a través de etiquetas html el código de salida de los módulos de un template en Joomla, en este tutorial se muestra un ejemplo de module chrome personalizado.

En el siguiente video se muestra un ejemplo de personalización de module chrome, se asume un diseño CSS de acuerdo a una estructura Html determinada, se utiliza como base el archivo modules.php del template beez y se personaliza de acuerdo a las necesidades de diseño.

1-¿Que es Module Chrome?

Module Chrome es el nombre con el que se conoce a la técnica que permite tener un control sobre la salida de los módulos de Joomla de una determinada posición. Básicamente Module Chrome consiste en envolver con código Html la salida de código de los módulos, esto con la finalidad de facilitar la codificación de archivos de estilos sobre esas etiquetas de envoltura.

Sintaxis para la asignación de módulos de una determinada posición en el diseño de un plantilla de Joomla

Algunos estilos de Module Chrome por defecto de Joomla son: rounded, none, table, xhtml, para ver una lista completa de los estilos visitar el siguiente link

2-Estructura Html de diseño propuesto

Para efectos de este tutorial la salida Html final que se quiere tener en la plantilla de joomla debe tener la siguiente estructura:

El estilo xhtml que trae joomla por defecto se acerca bastante a nuestra salida Html, excepto por las dos etiquetas de color verde.

3-Cambiando la estructura Html del Template usando Module Chrome

Debido a que el estilo xhtml de Joomla no cumple con la salida Html deseada, trabajaremos con un module chrome personalizado, para esto nos ayudaremos del archivo modules.php del template beez, templates/beez/html/modules.php. Copiamos el archivo a nuestro directorio html de nuestro template y procedemos a modificarlo como se muestra a continuación:

//se modifico el nombre del estilo a monitojoomla
function modChrome_monitojoomla($module, &$params, &$attribs)
{
 $headerLevel = isset($attribs['headerLevel']) ? (int) $attribs['headerLevel'] : 3;
 if (!empty ($module->content)) : ?>
 <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
 
 <?php if ($module->showtitle) : ?>
 <h<?php echo $headerLevel; ?>><?php echo $module->title; ?></h<?php echo $headerLevel; ?>>
 <?php endif; ?>
 <div><div> <?php //agregado ?>
 <?php echo $module->content; ?>
 </div></div> <?php //agregado ?>
 </div>
 <?php endif;
}

En el codigo anterior, se agregó las etiquetas Html <div> adicionales y también se cambió el nombre del estilo por monitojoomla. El llamado de este nuevo estilo en nuestro template sería de la siguiente manera:

<!--right-->
 <div id="right">
 <jdoc:include type="modules" name="right" style="monitojoomla"/>
 </div>
 <!--Fin Right-->

4-Conclusión

Module Chrome ofrece a los diseñadores y programadores de templates la flexibilidad para poder realizar salidas personalizadas para todos los módulos de una determinada posición, esto es diferente de la técnica de Template Overrides (ver tutorial en monito joomla), en la cual la personalización de la salida de código se realiza sobre un módulo específico.

• Descargar html con css
• Ver on line

Comparte este post