¿Como crear títulos para los Módulos con Múltiples Colores?

Entonces, sigue las siguientes instrucciones:

1. Abre el  archivo (Si no existe créalo) "templates/NombreDeTuPlantilla/html/modules.php".
   Ahora agregue el siguiente código al final del archivo:
   

   
   <?php
   
    function modChrome_mascolores($module, &$params, &$attribs)
   
    {
   
    $headerLevel = isset($attribs['headerLevel']) ? (int)  $attribs['headerLevel'] : 3;
   
    if (!empty ($module->content)) : ?>
   
   
    <?php if  ($module->showtitle) : ?>
   
    <h<?php echo $headerLevel; ?>><?php
   
    $title = $module->title;
   
    $title = split(' ', $title);
   
    $title[0] = '<span>'.$title[0].'</span>';
   
    $title= join(' ', $title);
   
    echo $title;
   
    ?></h<?php echo $headerLevel; ?>>
   
    <?php endif;  ?>
   
    <?php echo  $module->content; ?>
   
   
    <?php endif;
   
    }
   
    ?>
   
   

Con ellos ya hemos creado la Función Module Chrome, que nos permitirá una salida personalizada para los Modulo (Este punto lo debemos en detalles en el Nivel avanzado del Curso de Diseño Web Joomla)

1. Ahora, pues, abre " templates/NombreDeTuPlantilla/index.php".
   Como sabrás para cargar una posición donde se encuentran determinados Módulos, tienes que hacerlo usando la siguiente sintaxis:
   

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

2. Vamos a asumir que queremos cargar los Módulos que se encuentren en la posición “left”  y queremos cargar dichos Módulos con el nuevo estilo de carga que hemos creado (mascolores). Editamos dicha línea por esta:
   

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

   Esto Significa que cargaremos los Módulos de la Izquierda usando en estilo de carga “mascolores” .  
   Solo para comparar la salida. Analicemos el  Modulo  Ultimas Noticias (ponlo en la posición Left). El estilo de carga XHTML generada el siguiente código:
   

   <div class="moduletable">
   <h3>  Latest News</h3>
     ..................
     </div>
   
   

   Pero nuestro nuevo estilo “mascolores” genera el siguiente código:
   

   <div class="moduletable">
   <h3><span>Latest</span>  News</h3>
     ..................
   </div>
   
   

   Como te daras cuenta, este nuevo estilo agrega la etiqueta <span> a la primera palabra del título del modulo.
3. Ahora lo que necesitamos hacer es darle Estilo CSS a la salida del  título. De  tal manera que el titulo general tenga un color determinado, pero el texto que está  dentro de la etiqueta <span> dentro del título tenga otro color. Produciendo el efecto de un título con 2 colores.
   Para ello abrimos alguna de las Hojas de estilos que usa nuestra actual plantilla (Normalmente es template.css), busca la sentencia: div.moduletable h3 y agrégale estilos: color : #CC0000;, para que el titulo genere sea de color rojo.
4. Ahora después de definir  div.moduletable h3 agregamos el siguiente estilo para la etiqueta <span>:
   

    
   div.moduletable  h3 span {
    color  :#0000CC; // Color verde
     } 
   
   

   De esa forma la primera palabra del título será de color verde y el resto de color rojo.
   Puedes cambiar los valores de los colores a agregar estilos adicionales.