Aprovechas la barra superior de tu Prestashop para colocar una promoción u oferta, pero te aparecen unas franjas negras a cada lado. Solución cambiar el color de fondo del top banner
Prestashop cambiar el color de fondo del top banner
La parte superior de la pantalla de tu Prestahop se una zona muy interesante para colocar cualquier información sobre promociones, ofertas o aquello que hace a tu tienda especial, ya que es una zona que se lee y se ve con mucha facilidad.
Prestashop, tanto si trabajas con el tema por defecto como si tienes tu propia plantilla, te ofrece la opción de activar este «top banner». Que no es más que una franja estrecha que va de izquierda a derecha de la pantalla. ¿Cuánto ocupa? el 100% de la pantalla, y ¿cuánto es eso? pues depende de la pantalla.
Entonces, ¿de qué tamaño diseño mi imagen para cubrir esa zona del top banner si no sé cuánto puede medir? Hazla de la longitud que quieras. Si es muy estrecha, la tienda añadirá a cada lado un relleno a modo de fondo negro. Pero esto puede que no combine con la estética de tu web, o simplemente, que no te apetezca tener un fondo negro «añadido» en esa parte tan vital de la web.
Ejemplo:
Ejemplo: relleno en fondo negro (por defecto) de los laterales del top banner
En esta captura, el banner o imagen que el cliente ha creado es texto sobre fondo blanco. Al ser más estrecho que la pantalla mostrada en este equipo, la tienda ha añadido el relleno negro a cada lado hasta completar las zonas.
Si la imagen colocada hubiera sido sin fondo, es decir, por ejemplo, un png transparente, el efecto hubiera sido el mismo: fondo negro de relleno hasta los márgenes laterales y en este caso, también tras la imagen.
Solución
Si no te gusta el fondo negro, cámbialo. Y como no puedes diseñar una imagen de un tamaño que se adapte a todos los dispositivos, te sugiero lo siguiente:
- Crea una imagen que contenga la información relevante en la parte central y luego «respire» hacia los lados. Si la pantalla de navegación es muy estrecha, la información importante quedará centrada y no recortada, y si es ancha, se verá perfectamente.
- Una vez hayas decidido cuál es el color de fondo de tu imagen, simplemente ve a tu Prestashop a cambiar el color de fondo del top banner para que sean el mismo y no aparezcan franjas que no deseas. Si tu imagen tiene fondo transparente, pues decide qué color de fondo queda acorde con el resto de tu web, e igualmente cámbialo como te explico a continuación:
Accede al fichero /themes/tu-tema/css/global.css y localiza las líneas siguientes:
header .banner {
background: black;
max-height: 100%; }
En la segunda línea es donde indicas el color de fondo. Sustituye «black» (negro) por el que hayas decidido en el apartado anterior. Recuerda que puedes expresarlo en hexadecimal directamente, por ejemplo background: #235698;
Y ya está, en este momento, tu top banner ya no tiene nada que no tenga que tener a cada lado. En el ejemplo anterior, quedaría así:
header .banner {
background: white;
max-height: 100%; }
Ejemplo:
Ejemplo: color de fondo lateral modificado a blanco
Pruébalo, y si tienes cualquier duda, aquí estamos para echarnos una mano. Mucha suerte y mucho ecommerce! 🙂