¿Alguna vez se te ha antojado que un menú de tu sitio Joomla, se vea de colores?.

Imagina un sitio dedicado a niños, donde necesitas que cada item de menú sea de un color diferente y que éste cambie al azar cada vez que abras o recargues la página.

Es muy sencillo de hacer.

En resumen. 

Deberás realizar un override del módulo menú (mod_menu) y agregarle una pequeña modificación que hará el trabajo. 

Paso a paso 

Asegúrate que dentro de la carpeta de tu template (el que esté predeterminado) contenga una carpeta llamada "html" y dentro otra llamada "mod_menu"

Dentro de esta carpeta y utilizando tu programa FTP favorito (filezilla por ejemplo),  copia y pega los archivos: 

• tusitio/modules/mod_menu/tmpl/default.php
• tusitio/modules/mod_menu/tmpl/default_component.php
• tusitio/modules/mod_menu/tmpl/default_url.php

... y a editarlos 

default.php

Ubica la línea: 

foreach ($list as $i => &$item) :

Justo después coloca el siguiente código que explico a continuación: 

$Color = ''; //dentro de esta variable agregaremos un número hexadecimal de 6 dígitos al azar
while(strlen($Color)<6){ //como necesitamos 6 dígitos repetimos el proceso 6 veces
      $Color.= sprintf("%02X", mt_rand(66, 255)); //explico esto a continuación
}

Recordemos que los colores en html y css los podemos expresar mediante un signo "#" seguido de 6 díguitos hexadecimales. La función sprintf nos va a devolver un dígito en este formato (indicado con el primer argumento), y un número comprendido entre 66 y 255 al azar (indicado con la función mt_rand), donde 255 es el color más claro y el 66 el más oscuro. Si deseas incluir colores aun más oscuros, tendrías entonces que modificar el 66 a un número más pequeño, incluso cero. El 255 es el número más alto, que equivale a F (blanco)

Ahora tenemos que indicar en dónde aplicar el color. Editemos...

default_component.php

Por la línea 23 encontrarás una instrucción:

switch ($item->browserNav) :

Localiza las líneas que contienen "<a <? echo $class; ?>...etc." dentro de cada "case" y agrega justo después de "<a" lo siguiente:

style="color:#<? echo $Color; ?>;" (también las comillas)

...y deja un espacio. Quedará así:

<a style="color:#<? echo $Color; ?>;" <?php echo $class; ?>...etc.

 Ahora a modificar el archivo...

default_url.php

Por la línea 25 encontrarás una instrucción:

switch ($item->browserNav) :

Haremos exactamente lo mismo donde encontremos la etiqueta en cada case "<a": justo después de cada etiqueta <a> agregaremos:

style="color:#<? echo $Color; ?>;" (cuídado con las comillas, hay que incluirlas) 

¡Listo! Ahora tus menús, lucirán de colores. Cada item de un color diferente y al azar. 

Conclusión

Es muy sencillo realizar este override que te dará un buen detalle en tus menús al convertirlos en un color distito cada item. Es muy útil para sitios de niños, kinder gardens, pastelerias, fiestas infantiles y un largo etcétera.

Mas información sobre las funciones php que utilizamos. 

mt_rand: http://php.net/manual/en/function.mt-rand.php

sprintf: http://php.net/manual/es/function.sprintf.php

Más información sobre colores hexadecimales: http://es.wikipedia.org/wiki/Colores_web

Notas finales

Seguramente te preguntarás qué hacer si solo quieres aplicar a ciertos menús este efecto. Bueno, pues adjunto encontrarás un módulo llamado mod_menu_colores, que no es más que una copia modificada del mod_menu original con las modificaciones antes mencionadas. Instálalo como una extensión normal y solo deberás elegir este tipo de módulo para darle el estilo de colores a tus menús. Nota que en los parámetros del mod_menu_colores existe la opción para indicar el color más claro (por default 66).

¿Que por qué no compartí el módulo y ya?... pues siempre es bueno aprender algo nuevo, ¡¿no?!

¡Buena suerte!