Cambiar fondos en Prestashop 1.7

En su momento, estuvimos hablando de cambiar el fondo del pie de página en Prestashop 1.7.

Siempre, os he recordado que usar firebug o inspeccionar elemento en Chrome os puede ayudar en estas ocasiones, pero bueno…

En esta guía, hablaremos de dos fondos “Cabecera” y “Cuerpo/contenedor de la tienda (parte central)

Cambiar el color de fondo de la cabecera:

Fondo blanco de la cabecera en Prestashop 1.7

Para la cabecera, podemos añadir en el fichero:

/themes/classic/assets/css/custom.css

Nuestro propio estilo (depende modificar el “/themes/classic/assets/css/theme.css”)

Añadiendo, por ejemplo:

#header {
background: nuevo_color_de_fondo_de_la_cabecera_en_prestashop_1.7;
}

Por ejemplo, ahora la cabecera tiene color gris 🙂

Cambiando fondo de la cabecera en Prestashop 1.7

Cambiar el fondo del cuerpo (parte central) de la página:

Fondo en Prestashop 1.7

Añadimos nuestro propio estilo en el fichero:

/themes/classic/assets/css/custom.css

#wrapper {
background: nuevo_color_de_fondo_contenedor_prestashop_1.7;
}

Nosotros hemos puesto un color “rosa”:

Fondo rosa en Prestashop 1.7

Evidentemente, solo he puesto un “mini ejemplo

Personalizar colores en Prestashop 1.7

Documento basado en Prestashop 1.7.1.0

5 comentarios sobre “Cambiar fondos en Prestashop 1.7”

  1. Que tal? acabo de hacerlo y por algún motivo no me cambia el color 🙁
    Puse blanco

    /*
    * Custom code goes here.
    * A template should always ship with an empty custom.css
    */

    #wrapper {
    background: #ffffff;
    }

  2. Estoy intentando poner imagen como fondo, en el archivo custom.css he puesto:
    #wrapper {
    background-image: url(../fondoperfumeríasesaciones.jpg)!important;
    background-repeat: no-repeat;
    background-position: center -124px;
    }

    Pero no se ve. la imagen la guarde en la misma carpeta CSS. ¿Alguna idea de porque? He limpiado el cache y en el “inspector” el código aparece tal cual…

    1. Prueba añadir en el /themes/classic/assets/css/custom.css lo siguiente:


      #wrapper {
      background: url('../img/fondoweb.jpg');
      }

      Y sube la imagen “fondoweb.jpg” al directorio:

      /themes/classic/assets/img/


      Por otro lado, para saber cómo usar la propiedad background, revisa esta guía: http://librosweb.es/referencia/css/background.html

      Y revisa con navegación privada o con la cache del navegador limpia por si las moscas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *