Actionchip Posted January 13, 2013 Share Posted January 13, 2013 (edited) Buenas: Estoy usando el modulo blocktopmenu que trae por defecto el Prestashop 1.5.3. Quisiera poder tener todo el rato seleccionado una categoria como muestro en la imagen. Pero no doy con el codigo para poder meter un class="selected" a esa categoria del menu horizontal superior (creo que es esto lo que tengo que hacer, pero no estoy seguro...). Dejo la imagen de como quiero que quede a ver si alguien me puede echar un cable. Gracias y un saludo, Adrian Esta es la imagen: Edited January 13, 2013 by Actionchip (see edit history) Link to comment Share on other sites More sharing options...
jmmayoral Posted January 14, 2013 Share Posted January 14, 2013 Es mucho más simple que lo del class selected.... y te lo dogo yo que me estuve pegando con esto bastante tiempo porque me empeñé en hacerlo como tu. 1.- En la configuración del módulo blocktopmenu lo primero que ves son dos cajas con opciones que se pueden añadir o eliminar. La caja de la derecha tiene todas las opciones que te aparecen en el menú. Bórralas todas (las marcas y pinchas el botón eliminar.) cuando lo hayas hecho pincha en el botón guardar. 2.- Ahora vamos a crear el nuevo menú. Justo debajo del bloque de las cajas, tienes otro bloque para añadir un enlace del menú principal. Rellena el nombre que quieres que se muestre en el menú (campo etiqueta). Por ejemplo: Inicio Rellena la URL a donde va a redirigir (por ejemplo la página inicio de tu tienda. en mi caso: http://www.elitecocina.com Pincha en el botón "Añadir" y se añadirá en el cuadro superior izquierdo (en el bloque de arriba) debajo de la etiqueta "Menú de enlaces superiores". Marcalo y pincha en "añadir" para que lo mueva a la derecha. Ya tienes tu primera opción del menú que te llevará siempre a tu página de inicio. Para el resto, tienes que hacer lo mismo. En este caso, para saber a qué URL tienes que redirigir, lo mejor es que abras el frontoffice de tu tienda como si fueras un cliente normal, navegues hasta la categoría en cuestión y copies la URL que te aparece en el navegador... y se la pegas en el campo "enlace" de la configuración del menú. Espero que te sirva. Link to comment Share on other sites More sharing options...
Actionchip Posted January 14, 2013 Author Share Posted January 14, 2013 (edited) Es mucho más simple que lo del class selected.... y te lo dogo yo que me estuve pegando con esto bastante tiempo porque me empeñé en hacerlo como tu. 1.- En la configuración del módulo blocktopmenu lo primero que ves son dos cajas con opciones que se pueden añadir o eliminar. La caja de la derecha tiene todas las opciones que te aparecen en el menú. Bórralas todas (las marcas y pinchas el botón eliminar.) cuando lo hayas hecho pincha en el botón guardar. 2.- Ahora vamos a crear el nuevo menú. Justo debajo del bloque de las cajas, tienes otro bloque para añadir un enlace del menú principal. Rellena el nombre que quieres que se muestre en el menú (campo etiqueta). Por ejemplo: Inicio Rellena la URL a donde va a redirigir (por ejemplo la página inicio de tu tienda. en mi caso: http://www.elitecocina.com Pincha en el botón "Añadir" y se añadirá en el cuadro superior izquierdo (en el bloque de arriba) debajo de la etiqueta "Menú de enlaces superiores". Marcalo y pincha en "añadir" para que lo mueva a la derecha. Ya tienes tu primera opción del menú que te llevará siempre a tu página de inicio. Para el resto, tienes que hacer lo mismo. En este caso, para saber a qué URL tienes que redirigir, lo mejor es que abras el frontoffice de tu tienda como si fueras un cliente normal, navegues hasta la categoría en cuestión y copies la URL que te aparece en el navegador... y se la pegas en el campo "enlace" de la configuración del menú. Espero que te sirva. Gracias por responder pero creo que me he explicado mal, lo que me comentas no es lo que pretendo hacer. Si te fijas en la imagen que he incluido en el primer mensaje el botón de inicio se queda como gris. Lo que quiero es meterle un Class="selected" para que se quede asi, en gris todo el rato sin tener que pasar el mouse por encima (como ahora) para que se vea asi. Pero no se como meterlo ni en donde, creo que sera con php pero en esto estoy muy pez.... Gracias y un saludo, Adrián Edited January 14, 2013 by Actionchip (see edit history) Link to comment Share on other sites More sharing options...
Actionchip Posted January 16, 2013 Author Share Posted January 16, 2013 Alguien me puede ayudar? Es que tampoco sé si estoy explicando bien lo que pretendo hacer... Link to comment Share on other sites More sharing options...
jmmayoral Posted January 17, 2013 Share Posted January 17, 2013 Es que tampoco termino de entenderlo. ¿lo que quieres es que una opción del menú tenga un color de fondo diferente? Link to comment Share on other sites More sharing options...
Actionchip Posted January 17, 2013 Author Share Posted January 17, 2013 (edited) La primera screen es como esta siempre: Y la imagen de abajo es como quiero que quede, el boton inicio en gris todo el rato. Esto lo ves asi en gris porque tengo el raton encima, cuando pasas el raton por los menus de tu tienda estos cambian de color no? Pues yo quiero que uno de los botones se quede cambiado siempre de color sin tener que pasarle el raton por encima. Esto creo que se hace asi (este es el codigo que seria en html y que no se donde hay que poner, y lo que creo es que hay que ponerlo en php...): <ul class="semiopaquemenu"> <li><a href="http://localhost/prestashop/" class="selected">Inicio</a></li> <li><a href="http://localhost/prestashop/3-frutas/">Frutas</a></li> <li><a href="http://localhost/prestashop/4-verdura/">Verduras</a></li> <li><a href="http://localhost/prestashop/7-vinos/">Vinos</a></li> <li><a href="http://localhost/prestashop/6-conservas/">Conservas</a></li> <li><a href="http://localhost/prestashop/8-dulces/">Dulces</a></li> <li><a href="http://localhost/prestashop/5-charcuteria/">Charcuteria</a></li> </ul> y en el css se pondria esto: ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{ color: black; background: -moz-linear-gradient(top, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%); /* fade from white (0.82 opacty) to 0.16 opacity */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%); background: linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 ); -moz-box-shadow: 0 0 5px #595959; /* CSS3 box shadows */ -webkit-box-shadow: 0 0 5px #595959; box-shadow: 0 0 5px #595959; padding-top: 12px; /* large padding to get menu item to protrude upwards */ padding-bottom: 20px; /* large padding to get menu item to protrude downwards */ } Y se quedaria asi (Fijaros en el boton INICIO del menu horizontal superior): Edited January 17, 2013 by Actionchip (see edit history) Link to comment Share on other sites More sharing options...
Actionchip Posted January 17, 2013 Author Share Posted January 17, 2013 (edited) Hola statictic, eso es lo que pretendo hacer. Editar el codigo del modulo para incluir el class="selected" al boton "INICIO" pero no sé como....por eso cree este hilo. Bueno, ahora creo que ha quedado algo mas claro porque por lo menos una persona lo ha entendido XD, no tengo ni idea de como se llaman muchas cosas de ahi viene todo este lio que no se me entienda, pero bueno poco a poco. Un saludo y gracias, Adrián Edited January 17, 2013 by Actionchip (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts