30 Agosto


Aplicando estilos a los módulos de Joomla! en nuestro template.

La forma más organizada que tenemos en Joomla! para darle estilos a nuestros módulos es aprovecharnos de algo que se llama Custom Module Chrome y que consiste en que crear un archivo que se llame modules.php en la ruta /templates/mi-template/html

O sea, quedaría: /templates/mi-template/html/modules.php

Dentro del mismo ponemos:

<?php 
  defined( '_JEXEC' ) or die;
  function modChrome_top( $module, &$params, &$attribs ) 
  {
    echo '<div class="top-title-styles">' . $module->title . '</div>';
    echo '<div class="top-content-styles">' .$module->content. '</div>';
  }
?>

Donde defined( '_JEXEC' ) or die; es para evitar  la ejecución de este archivo desde fuera de Joomla!

function modChrome_top( $module, &$params, &$attribs ) es la función Module Chrome que vamos a utilizar y en la cual le asignamos un nombre que es el que va seguido de modChrome_ , en nuestro caso se llama top.

Luego con echo '<div class="top-title-styles">' . $module->title . '</div>'; modificamos el estilo del título que el módulo trae por defecto y le asignamos la clase  top-title-styles.

Hacemos lo mismo con el contenido del módulo usando echo '<div class="top-content-styles">' .$module->content. '</div>'; asignándole la clase top-content-styles.

Despúes sólo debemos incluir el Chrome style a la hora de insertar el módulo en su posición dentro del template con style="top":

<jdoc:include type="modules" name="top" style="top"/>

Y por último agregamos las clases en el CSS de nuestro template:

.top-content-styles {
	/* ESTILOS AQUI */
}

.top-title-styles {
	/* ESTILOS AQUI */
}

Más sobre esto aquí y aquí.


Artículos Relacionados