ACTIVIDAD NÚMERO 5 (voluntaria)

Actividad Realizada por:Dionisio Tur Hernández para el curso de Joomla-FatinafarActividad nº 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.

OBJETIVO

css

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

1

2

3

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.- Hacemos clic en el nombre del módulo de ese menú.3.- En detalles ocultamos el título

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 claseclass=“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.- 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 FirefoxHacemos clic en el icono de Personalización |Herramientas|Herramientas para Diseñadores.

6.- Hacemos clic derecho sobre el menú a personalizar y Seleccionamos inspeccionar elemento.

7.- La herramienta nos informa del archivo CSS que tenemos que modificar, personal.css, y de la reglaque actualmente esta en uso.

5

6

7

8.- Localizamos en nuestro directorio el archivo personal.css. Que se encuentra ubicado en “templates\beez_20\css” 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; }

/*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;}

/* 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;

}

/* 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;

}

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-FatinafarActividad nº 5 (voluntaria)