Cambio apariencia a menu joomla con css

9,792 views
9,316 views

Published on

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.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
9,792
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
43
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cambio apariencia a menu joomla con css

  1. 1. ACTIVIDAD NÚMERO 5 (voluntaria)Hemos realizado un menú que sólo pueden ver nuestros clientesregistrados. Como sabemos, este menú enlaza con un artículodonde 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 clientesregistrados. Actividad Realizada por: Dionisio Tur Hernández para el curso de Joomla-Fatinafar Actividad nº 5 (voluntaria)
  2. 2. OBJETIVO cssSe pretende modificar la apariencia de un menú respecto al resto para hacerlo másllamativo. Para ello utilizaremos CSS
  3. 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 22.- Hacemos clic en el nombre delmódulo de ese menú.3.- En detalles ocultamos el título 3
  4. 4. 44.- En Opciones Avanzadas en el campo Sufijo clase Menú añadimos el nombre de lanueva clase a la que posteriormente le aplicaremos formato con CSS. Le ponemos unnombre cualquiera , pero es importante indicar que es mejor dejar un espacio, para que laclase 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. 5.- Ahora tenemos que averiguar la visibilidad de la clase que hemos creado. Para ellopodemos utilizar la herramienta para desarrolladores que incluye el navegador GoogleChrome o instalar la extensión Web Developer para FirefoxHacemos clic en el icono de Personalización |Herramientas|Herramientas paraDiseñadores.6.- Hacemos clic derecho sobre el menú a personalizar y 5Seleccionamos inspeccionar elemento.7.- La herramienta nos informa del archivo CSS que 6tenemos que modificar, personal.css, y de la reglaque actualmente esta en uso. 7
  6. 6. 8.- Localizamos en nuestro directorio el archivo personal.css. Que se encuentraubicado 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. 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. 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. 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. 10. OBSERVACIÓNEl método aquí explicado funciona con losprincipales navegadores a excepción deMozilla Firefox versión 3.6.28 Actividad Realizada por: Dionisio Tur Hernández para el curso de Joomla-Fatinafar Actividad nº 5 (voluntaria)

×