Cómo se personaliza el menú horizontal de Prestashop 1.6 (blocktopmenu)

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:

 

 

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.