chanis Posted April 1, 2013 Share Posted April 1, 2013 (edited) Buenas noches! Me gustaría modificar el menú horizontal, poniendo cada pestaña de un color diferente. ¿Me podríais orientar sobre como hacerlo? Mil gracias! Edited April 14, 2013 by hortusbio (see edit history) Link to comment Share on other sites More sharing options...
chanis Posted April 1, 2013 Author Share Posted April 1, 2013 Hola! Hablo del módulo que lleva por defecto, aunque no descarto instalar otro módulo de menú horizontal si hay alguno que me convence. Me gustaría hacer algo parecido a lo que aparece en esta plantilla: http://addons.presta...emo/FO5271.html, osea, cada pestaña de un color diferente. Link to comment Share on other sites More sharing options...
marcoscv Posted April 25, 2013 Share Posted April 25, 2013 No sé cómo he llegado aquí, veo que no se ha comentado que la solución que dieron es mediante css3, dando un color a cada posición del <a> de cada <li> en el menú, algo que queda como así: .sf-menu > li > a { color:red; } .sf-menu > li + li > a { color:blue; } .sf-menu > li + li + li > a { color:etc; } Saludos Link to comment Share on other sites More sharing options...
chanis Posted April 25, 2013 Author Share Posted April 25, 2013 Hola marcoscv!. Muchísimas gracias por tu ayuda. Bueno en realidad no me dieron ninguna solución, puse solucionado para cerrar el tema porque no había mucha intervención. Antes de nada te diré que no sé programación web. Voy aprendiendo cosas, pero todavía soy bastante muñón. Lo que comentas lo ví en la plantilla que me gustaba inspeccionando el elemento, pero no sabía en qué lugar debía ponerlo exáctamente. Si me ayudaras con eso...pues ya sería la bomba Muchísimas gracias de nuevo y un saludo. Link to comment Share on other sites More sharing options...
marcoscv Posted April 25, 2013 Share Posted April 25, 2013 Sin problema! Esto que te pongo es código CSS, que va en las hojas de estilo, la general del prestashop es la global.css, que se encuentra en el theme de apariencia directorio css/. este archivo contiene el grueso de los estilos de prestashop, el rollo viene cuando lo que queremos modificar es un módulo, como en tu caso el "blocktopmenu", tenemos que crear un directorio dentro de css/modules/ con el nombre del modulo, quedaría así: "Theme/css/modules/blocktopmenu" ahí metes todas las imágenes y css que tenga el módulo (lo puedes encontrar en tu prestashop, desde tu carpeta raíz /modulos/). Aquí se encuentran todos los módulos que descargas e instalas, llevan multitud de archivos, pero sólo nos interesan los archivos css y imágenes. Una vez lo tengas copiado abres el "superfish-modified.css" del módulo blocktopmenu, añades al final las lineas que comentaba antes con los colores de back que quieras para cada uno de ellos, guardas y listo Comentar que se hace de esta forma porque la prioridad de carga css que hace prestashop, primero carga el global.css, y luego los css de los módulos, por lo que si en global creas un estilo ".pepe" para un <li class="pepe"> que de un color de fondo rojo, siempre será remplazado por el valor que tenga el módulo, ya que el estilo se vuelve a cargar y por tanto remplaza los valores previamente cargados en global.css, hay gente que lo soluciona poniendo después del estilo un "!important", ejemplo: .pepe { color:red !important; } Esto hace que independientemente de cuándo sea cargado el estilo, antes o después, ese valor sea el que prevalezca sobre todos. Lamentablemente el !important no funciona en todos los navegadores, y no puedo recomendar este uso hasta que todos los navegadores de uso corriente lo acepten. Al final me he enrollado mucho.. Suerte! Link to comment Share on other sites More sharing options...
Sergio Ruiz Posted April 25, 2013 Share Posted April 25, 2013 (edited) No sé cómo he llegado aquí, veo que no se ha comentado que la solución que dieron es mediante css3, dando un color a cada posición del <a> de cada <li> en el menú, algo que queda como así: .sf-menu > li > a { color:red; } .sf-menu > li + li > a { color:blue; } .sf-menu > li + li + li > a { color:etc; } Saludos Voy a probarlo. Edited April 25, 2013 by Rubalcaba (see edit history) Link to comment Share on other sites More sharing options...
Sergio Ruiz Posted April 25, 2013 Share Posted April 25, 2013 (edited) Esto hace que independientemente de cuándo sea cargado el estilo, antes o después, ese valor sea el que prevalezca sobre todos. Lamentablemente el !important no funciona en todos los navegadores, y no puedo recomendar este uso hasta que todos los navegadores de uso corriente lo acepten. Casi en todos los navegadores habituales y versiones actuales funciona el !important, por ejemplo la version de IE 6 y inferiores de la 6 creo que no era compatible, pero hoy en dia, no se usan esas versiones tan antiguas de navegadores, y en caso de que se usen es raro raro su uso. Edited April 25, 2013 by Rubalcaba (see edit history) Link to comment Share on other sites More sharing options...
marcoscv Posted April 26, 2013 Share Posted April 26, 2013 No puedo asegurarlo, pero creo que en IE7 no funcionaba, existía otro tag tipo !hotdog o algo así Si esto es así, entre ie6 e ie7 igual aún quedan en torno al 7% de usuarios con estos retro navegadores Al final cuando te acostumbras a remplazar la css del módulo vas rápido, y ahorras muchas líneas con !important.... Digo esto, pero luego el diseño responsivo de mis prestashop lo hago todo con !inpprtants, jejejeje Link to comment Share on other sites More sharing options...
chanis Posted April 29, 2013 Author Share Posted April 29, 2013 Muchísimas gracias marcoscv!! Te agradezco mucho que te hayas enrollado, porque me has aclarado varias dudas que tenía. A ver si tengo un ratito y lo pongo en práctica. Saludos!! Link to comment Share on other sites More sharing options...
Recommended Posts