Cambio de colores en el topmenu

[cardielweb]

Buenas, gracias de antemano a todos los que participan en este foro, porque sin vosotros gente como yo no podría ni siquiera acercarse a este programa.

Al lío. Mi duda o ignorancia trata de cómo cambiar los colores en el bloque topmenu de la página principal en la que estoy trabajando.

Me explico: El menú consta de cuatro categorías, una de ellas es inicio, que no quiero tocarla, y las otras tres corresponden a las tres categorías generales de la tienda. El caso es que lo que quiero es que cada una tenga un color de fondo diferente. Es decir: Productos Naturales con fondo verde; Control Vital con fondo rojo; Productos Ecológicos con fondo azul.

Me da la impresión que eso implica tocar el código pero no se dónde tocarlo, a parte que el PHP me da pavor.

Si fuera HTML ya lo habría solucionado colocando etiquetas <span style>, por ejemplo pero en PHP no tengo ni idea.

Si toco el CSS aplicaría el cambio a todo el menú y no quiero eso. Podría poner una imagen de fondo en cada cartela, pero no se cómo implementar dicha imagen para que aparezca en la página. 

En fín, que sois mi última opción.

 

Os dejo por aquí la página en cuestión para que veáis lo que quiero decir: www.naturforma.es

 

Muchas gracias

[quimfrcr]

Yo también estoy interesado.

 

He intentado hacerlo por css en global. Pero no consigo cambiar el color cuando pasa el cursor por encima.

 

 

Por cierto cardielweb, que modulo usas para el menu? O es el que viene de serie modificado?

 

Gracias

[cardielweb]

Hola quimfrcr, utilizo el módulo blockmenu que viene en el tema por defecto.

 

Gracias

[quimfrcr]

Hola quimfrcr, utilizo el módulo blockmenu que viene en el tema por defecto.

 

Gracias

 

Y como consigues ese cambio? tocando global.css?

 

Has conseguido cambiar el color del menu de cada apartado?

[cardielweb]

No, ahora mismo está como venía por defecto. No he tocado nada. El problema es que si toco el css afecta a todo el menú. Y lo que yo quiero es cambiar los colores de las tres categorías por separado. Podría generar tres estilos diferentes, uno para cada categoría pero no se cómo aplicar ese estilo al div que corresponde.

[quimfrcr]

No, ahora mismo está como venía por defecto. No he tocado nada. El problema es que si toco el css afecta a todo el menú. Y lo que yo quiero es cambiar los colores de las tres categorías por separado. Podría generar tres estilos diferentes, uno para cada categoría pero no se cómo aplicar ese estilo al div que corresponde.

 

Ayer estuve toqueteando css y si, solo puedes tocar el color del menú general o subcategorias y no para cada parte.

 

Entonces entiendo que tienes una plantilla no? Porque mi prestashop 1.6 el menú por defecto viene diferente , por ejemplo cuando pasas encima de una categoría se te abre las otras en un estilo distinto y luego si pasas encima de estas otras se te abre a la derecha en tu web. A mi me gustaría algo parecido pero en el default no se como hacerlo.

 

Gracias

[2ESTILOS]

Acabo de encontrar la solución... gracias al enlace que ha puesto en su día cardielweb (se que este hilo es de hace tiempo, pero puede servir para nuevas consultas).

He estado revisando el código fuente de la pagina enlazada y esta es la conclusión. Os dejo aquí el código simplificado:

<ul id="menu-con-decoraciones-diferentes">
  <li><a href="#">enlace1</a>
  <li><a href="#">enlace2</a>
  <li><a href="#">enlace3</a>
  <li><a href="#">enlace4</a>
  <li><a href="#">enlace5</a>
  <li><a href="#">enlace6</a>
</ul> 

.CSS

#menu-con-decoraciones-diferentes > li + li + li > a {
background:#f00 !important;
} /* esto hace que a partir del 3º li el color del fondo cambie.*/

/* si queremos entonces el 4º li no tenga color o tenga otro color... */
#menu-con-decoraciones-diferentes > li + li + li + li > a {
background:#none !important;
} 

NOTAS:
1º Esto es la base, luego cada cual tendrá que experimentar para conseguir lo que busca. Como por ejemplo hacer efectos diferentes con el ratón sobre el botón.
2º Dependiendo de como esté escrito el código fuente, puede ser necesario usar la clase .menu-con-decoraciones-diferentes en lugar del id #menu-con-decoraciones-diferentes... pero eso ya depende de cada programación en concreto.

Un saludo!!!

Edited September 24, 2015 by 2ESTILOS (see edit history)