Intentamos explicar como cambiar la apariencia de un menú respecto al resto utlizando los sufijos personalizados. Actividad realizada por Dioni Tur para el curso de Joomla! 2.5, realizado con la entidad Fatinafar.

1. ACTIVIDAD NÚMERO 5 (voluntaria)
Hemos realizado un menú que sólo pueden ver nuestros clientes
registrados. Como sabemos, este menú enlaza con un artículo
donde se le informa de una oferta.
El objetivo de esta actividad es cambiar la apariencia del menú
utilizando CSS para que resulte más llamativo para nuestros clientes
registrados.
Actividad Realizada por:
Dionisio Tur Hernández para el curso de Joomla-Fatinafar
Actividad nº 5 (voluntaria)

2. OBJETIVO
css
Se pretende modificar la apariencia de un menú respecto al resto para hacerlo más
llamativo. Para ello utilizaremos CSS

3. 1
1.- Accedemos al panel de control y
hacemos clic en el icono de acceso
rápido “Gestor de Módulos”. También
podemos acceder por el menú
Extensiones|Gestor de Módulos
2
2.- Hacemos clic en el nombre del
módulo de ese menú.
3.- En detalles ocultamos el título
3

4. 4
4.- En Opciones Avanzadas en el campo Sufijo clase Menú añadimos el nombre de la
nueva clase a la que posteriormente le aplicaremos formato con CSS. Le ponemos un
nombre cualquiera , pero es importante indicar que es mejor dejar un espacio, para que la
clase herede propiedades y no tengamos que crearla desde cero.
Al dejar un espacio estaremos creando la clase
class=“menu personalizado”
Y heredará propiedades de la clase “menu”
Si no hubiésemos dejado un espacio la clase sería:
class=“menupersonalizado”
Y tendríamos que crearla desde cero.

5. 5.- Ahora tenemos que averiguar la visibilidad de la clase que hemos creado. Para ello
podemos utilizar la herramienta para desarrolladores que incluye el navegador Google
Chrome o instalar la extensión Web Developer para Firefox
Hacemos clic en el icono de Personalización |Herramientas|Herramientas para
Diseñadores.
6.- Hacemos clic derecho sobre el menú a personalizar y
5
Seleccionamos inspeccionar elemento.
7.- La herramienta nos informa del archivo CSS que 6
tenemos que modificar, personal.css, y de la regla
que actualmente esta en uso.
7

6. 8.- Localizamos en nuestro directorio el archivo personal.css. Que se encuentra
ubicado en “templatesbeez_20css” de nuestro sitio en Joomla!
9.- Editamos el archivo y al final del mismo incluimos el siguiente código:
/* Código añadido para la personalización del menú Ofertas*/
/*Aumentamos Tamaño a la fuente */
ul.menu.personalizado
{
font-size:16px;
}

7. /*Color de los enlaces normales y visitados de color rojo*/
ul.menu.personalizado li a:link,
ul.menu.personalizado li a:visited
{
color: #F00;
background:url(../images/nature/karo.gif) 12px 12px no-repeat;
}

8. /* Color del enlace activo, es decir, cuando estamos viendo la oferta*/
ul.menu.personalizado li.active a:link,
ul.menu.personalizado li.active a:visited
{
color: #C30;
}

9. /* Color de fondo y color de texto para cuando el ratón está sobre el enlace*/
ul.menu.personalizado li a:hover,
ul.menu.personalizado li a:active,
ul.menu.personalizado li a:focus,
ul.menu.personalizado li.active a:hover,
ul.menu.personalizado li.active a:active,
ul.menu.personalizado li.active a:focus
{
background: #f00;
color:#fff;
}

10. OBSERVACIÓN
El método aquí explicado funciona con los
principales navegadores a excepción de
Mozilla Firefox versión 3.6.28
Actividad Realizada por:
Dionisio Tur Hernández para el curso de Joomla-Fatinafar
Actividad nº 5 (voluntaria)