Prestashop 1.6 incluye un módulo de serie para mostrar el menú horizontal, donde se organizan las distintas categorías, productos o enlaces. Se trata del módulo (blocktopmenu) o Menú horizontal superior.
Se accede a él a través del backoffice: – Módulos y Servicios – y poniendo “menu” en el buscador de módulos. Pulsando sobre “Configurar” podemos entrar para añadir nuevos enlaces, categorías, productos, etc..
Accediendo desde el Backoffice al frontal de la tienda online, es posible modificar la estética general de la tienda, la fuente de letras y el juego de colores, de igual forma, estos cambios también afectan al menú. Pero no permite cambiar el tamaño de la fuente de letras de los enlaces del menú ni su espaciado.
Muchas veces, si incluimos más enlaces o categorías en el menú, puede suceder que el espacio se quede pequeño, y por consiguiente varias opciones pasen a la siguiente línea. Esto además de ser muy poco estético, también puede provocar problemas de accesibilidad, ya que se superponen las subcategorías superiores, sobre las categorías de la segunda línea.
Para solucionar este problema, no hay más remedio que modificar el CSS que controla el módulo. Damos por sentado en este tutorial que el tema instalado en Prestashop es el “por defecto” (default-bootstrap). Otros temas pueden tener otros archivos y otra estructura.
El primer paso es acceder vía FTP a la zona donde se encuentra ese archivo CSS:
/public_html/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css
Es recomendable descargar el archivo “superfish-modified.css” al escritorio para ser editado. También es muy recomendable cambiar el nombre del archivo que se queda en FTP, en el servidor, por algún nombre fácil de recordar, a modo de copia. Una buena práctica sería ponerle el nombre “superfish-modified-OLD.css” para saber que es el archivo original.
Para editar el archivo CSS que acabamos de descargar, es posible utilizar el “editor de textos” de Windows. Aunque para modificar cualquier archivo online, siempre es mejor utilizar algún editor especializado, como NotePad ++:
https://notepad-plus-plus.org/download/v6.9.2.html
Ya que conserva la estructura original, no modifica el “BOM” abreviatura de “Byte Order Mark” y no cambia el formato de codificación.
Una vez abierto el archivo CSS con el editor, en la línea 60 veremos esto:
.sf-menu > li > a {
font: 600 18px/21px "Open Sans", sans-serif;
text-transform: uppercase;
color: #484848;
display: block;
padding: 17px 22px;
border-bottom: 3px solid #e9e9e9; }
En la línea 61, después de “font: 600” es posible modificar esos dos valores, por ejemplo por esto 14px/18px. Cuanto más pequeño sea el valor, más pequeña se verá la fuente.
Para cambiar el espacio entre los enlaces del menú, debemos modificar la línea 65, dejando siempre el primer valor igual, ya que hace referencia al espacio vertical y no al espacio horizontal. Un ejemplo sería, poner esto:
padding: 17px 10px;
Con lo que en lugar de haber 22 pixels de distancia, habrá 10 pixles, y se reducirá el espacio entre los enlaces, y por consiguiente entrarán más enlaces o categorías.
Lo ideal es encontrar un equilibrio entre el tamaño de la fuente de letra y el espacio entre los enlaces, para evitar textos demasiado pequeños o espacios demasiado cortos.
Sobre Jose García
Creador de negocios online, portal de citas, tiendas sex shop, tiendas dropshipping, aplicaciones móviles (APPS) y páginas web de empresa. Desarrollo de páginas web y Apps para Android. Director cualificado de Franquicia de Impacto. CEO de Franquicia Global y Tienda Online Gratis. Profesor de desarrollo de videojuegos en Udemy y Tutellus. Especialista en WordPress y Prestashop.
- Web |
- More Posts(110)
Interesante artículo, justo lo que estaba buscando para modificar mi menú. Pero tengo un problema y es que mi menú no reconoce los estilos del archivo “superfish-modified.css”? porque por mucho que modifico ese archivo no hay manera. De hecho al inspecionar elemento en el menú, me aparecía dicho archivo, para hacer pruebas, pero ahora nada. ¿A que puede deberse?
Hola, para que en Prestashop los cambios en cualquier archivo del tema se muestren, debes configurar en Parámetros Avanzados – Rendimiento, en la opción “Forzar Compilación” y además “vaciar el caché”. Saludos.
Hola, Lo que comentas ya lo hice, pero nada, siguen sin verse los cambios. Reinstale el tema y tampoco y siguen sin verse los cambios. A ver si consigo solucionarlo. Muchas gracias por responder 🙂