Descuento 20% Diciembre
Plugin Optimización de Imágenes Gratuito para WordPress
Domingo, 28 Octubre 2012 21:49

Destacar un ítem de menú en Joomla

Escrito por 
CMS:  Joomla! |  Versión:  Todas |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  10 minutos


ico_item_destacadoEn este artículo veremos cómo cambiar la apariencia de un ítem de menú de un sitio web Joomla con el objeto de destacarlo y sea más llamativo para el usuario final.

Veremos cómo realizar este procedimiento con sitios web de ejemplo utilizando algunas plantillas comerciales de los packs webempresa (el proceso es similar en otro tipo de plantilla), utilizaremos el firebug para localizar y cambiar los estilos, para aprender cómo utilizar firebug revisa el artículo : Usando Firebug para modificar la apariencia de una plantilla Joomla

 

Generalidades

Son las plantillas quienes crean el menú principal de nuestro sitio y estas definen la estructura, sin embargo Joomla nos ofrece flexibilidad al crear los ítems de menú y podemos identificarlos de manera única lo cual nos permitirá destacar alguno de ellos.

 

Menú de Pack Tienda/Empresa Black&White

Utilizamos el siguiente código haciendo referencia al ítem de menú con identificador menu541


/*Cambio general de fondo*/
#menu541{
background:red!important;
}

/*cuando el mouse esta sobre el ítem*/
#menu541:hover{
background:transparent!important;
}

item_blackwhite

 

Menú de Pack Tienda Boutique

Haciendo referencia al identificador de la lista #gkDropMain541 y luego al ítem y al texto

/*por defecto*/
#gkDropMain541 a span{
background:red;
padding:4px;
margin-top:-4px;
}

/*cuando el mouse esta sobre*/
#gkDropMain541 a span:hover{
background:transparent;
}

/*agregado para cuando el item esta activo*/
#gkDropMain541 a.active span{
background:transparent!important;
}

item_boutique

 

Menú de Pack Tienda Esport

En este template localizamos el ítem de menú con id menu541

/*General definición del fondo*/
#menu541{
background:#CD4A2B;
color:white!important;
text-shadow:0 0 transparent!important;
}

/*cuando el mouse esta sobre el ítem*/
#menu541:hover{
background:transparent;
color:#CD4A2B!important;
}

/*agregado, cuando el ítem esta activo*/
#menu541.active{
background:transparent;
color:#CD4A2B!important;
}

item_sport

 

Menú de Pack Reservas Music

En este caso trabajamos también con el ítem de menú, con id menu557

/*color destacado general*/
#menu557{
background:red;
}

/*cuando el mouse esta sobre el ítem*/
#menu557:hover{
background:transparent;
}

/*agregado para el ítem activo*/
#menu557.active{
background:transparent;
}

item_reservas

 

Menú de Pack Tienda Yourshop

En este caso este template incluye imágenes como fondos por lo que sólo destacaremos el texto

/*destacando el color de texto*/
#menu541 span{
color:red;
}

/*cuando el mouse pasa sobre el ítem*/
#menu541 span:hover{
color:white;
}

/*agregado cuando el ítem esta activo*/
#menu541.active span{
color:white;
}

item_yourshop

 

En el siguiente video se explica de manera práctica cada uno de los puntos explicados anteriormente.

 


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop




Plugin Optimización de Imágenes Gratuito para WordPress