Fondo según sección en Prestashop 1.7

Pequeño tutorial para cambiar el fondo de la tienda según la sección donde nos encontremos.

Fondo sección de contacto en Prestashop 1.7
Fondo pantalla responsive

Por el blog, tenemos un tutorial donde cambiamos el fondo general en Prestashop 1.7 -> Cambiar fondos generales en Prestashop 1.7

La idea de este tutorial es que, por ejemplo, podamos tener un fondo distinto en la página principal y en la sección de contacto de la tienda (por poner un ejemplo).

¿Cómo podemos cambiar el fondo solo de la sección de contacto sin que afecte a las otras secciones de la tienda?

Lo primero es identificar la sección de contacto u conocer algún aspecto que nos haga diferenciarlo del resto de secciones.

Entramos en la sección de contacto de la web, y pinchamos en el botón derecho del ratón -> inspeccionar elemento (en Chrome) y nos fijamos en el ID que tiene asignado el body.

Inspeccionar elemento
Consola del navegador

Vemos que el body tiene asignado el id -> contact.

Este ID nos ayudara a identificar la sección. A continuación, vamos al fichero:

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

Y añadimos lo siguiente:

Para cambiar el fondo de la cabecera en la sección de contacto.

#contact #header {
background: #b4f44d;
}
Código CSS
Color cabecera cambiado en la sección de contacto
Color cabecera cambiado en la sección de contacto

He asignado una especie de color “verde” a la cabecera en la sección de contacto.

Para cambiar el color de fondo de la parte central (contenedor) de la sección de contacto:

Añadimos:

#contact #wrapper{
background: #b4f44d;
}
Código CSS
Código CSS
Fondo contenedor sección contacto

Para cambiar el fondo del pie de página en la sección de contacto, añadimos:

#contact #footer{
background: #b4f44d;
}
Código CSS
Fondo pie página en la sección de contacto

Si queréis cambiar el fondo del mismo formulario que se encuentra situado en la sección de contacto, es decir;

Fondo del formulario

Borde fondo del formulario de contacto (añadimos en el fichero custom.css que habíamos editado antes)

#contact main .page-content {
background: #100f0f;
}
Código CSS
Fondo negro exterior formulario contacto

Fondo del propio formulario en la sección de contacto:

En el mismo custom.css que venimos editando, añadimos:

#contact .contact-form {
background: #f87d7d;
}
Código CSS
Fondo formulario de contacto

Si bien podíamos haber cambiado directamente el fondo del formulario de contacto en el fichero /themes/classic/assets/css/theme.css, he preferido cambiarlo en el fichero custom.css, debido a las siguientes razones:

Inspeccionar elemento
  1. Recuerdo que el formulario de contacto en Prestashop 1.7 es un widget y podemos añadirlo en distintas secciones de la tienda (añadir formulario de contacto en páginas de contenido), por lo cual si cambiamos una clase genérica en el CSS, variara en todas las partes donde este el formulario de contacto y en esta ocasión solo me interesa que los colores del formulario se encuentren cambiados en la sección de contacto, por eso hemos creado una regla especifica solo para sección de contacto y la hemos añadido en el custom.css
  2. La parte externa del formulario de contacto, es decir, el fondo “negro” es una clase genérica utilizada en otras partes de la tienda.
    theme.css

    He preferido crear una regla especifica en el custom.css solo aplicable a la sección de contacto, depende modificar el fichero theme.css añadiéndole un fondo a la regla que podemos ver dentro de inspeccionar elemento.

  3. Poder crear mis propias reglas sin tener que modificar el fichero /themes/classic/assets/css/theme.css, ya que Prestashop me proporciona un fichero denominado /themes/classic/assets/css/custom.css con ese fin.

Continúa leyendo Fondo según sección en Prestashop 1.7

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

Cambiar fondo del pie de página en Prestashop 1.7

En inicios del 2013, hicimos una guía parecida, pero para cambiar el fondo del pie en Prestashop 1.5

Hace unos meses, estuvimos comentando como cambiar el Copyright del pie de página en Prestashop 1.7, pero y si además queremos cambiar el fondo blanco del pie de página, por otro tipo de fondo.

Para cambiar el color de fondo del pie de página en Prestashop (Prestashop 1.7.1.0), como siempre digo podemos hacernos una idea usando firebug o el mismo inspeccionar elemento de Chrome, pero bueno, como estamos cerca de semana santa, os diré los pasos exactos.

Color (Blanco) de fondo en Prestashop 1.7
Color (Blanco) de fondo en Prestashop 1.7

Por defecto, el fondo del pie de página en Prestashop 1.7 con la platilla Classic (que es la que viene por defecto..) es de color blanco.

La idea es cambiarlo a un color “gris”.

Color de fondo (Gris) en Prestashop 1.7
Color de fondo (Gris) en Prestashop 1.7

Simplemente, vamos al fichero:

/themes/classic/assets/css/theme.css

Pero sorpresa, no vemos el CSS, como lo veíamos antes en el global.css

Fichero general de estilos en Prestashop 1.7
Fichero general de estilos en Prestashop 1.7

Lo vemos todo en una línea por el asunto de la compresión del CSS (CSS Minifier)

Para cambiar el fondo, añadimos debajo de todo:


#footer {
background: #f9f9f9
}

Evidentemente, como os podéis imaginar, esto no es lo más optimo, pero podéis salir del paso 🙂

Tenéis un fichero: /themes/classic/assets/css/custom.css para añadir vuestros propios estilos.

Documento válido para Prestashop 1.7.1.0