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

Quitar sombras de los productos en Prestashop 1.7

En todos los sitios donde vemos los listados de productos en Prestashop 1.7, vemos que rodea a los productos una especie de sombra.

Sombra productos Prestashop

La idea es dejar los productos de la siguiente forma:

Productos sin sombra

Cuando intentamos inspeccionar el elemento, por ejemplo desde Chrome (F11 / botón derecho del ratón -> inspeccionar elemento).

Inspeccionar elemento

Vemos en el fichero:

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

#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {
position: relative;
margin-bottom: 1.563rem;
height: 318px;
width: 257px;
background: #fff;
box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
}

El efecto lo está haciendo el “box-shadow“.

Información sobre “box-shadow” aquí:
http://librosweb.es/libro/css_avanzado/capitulo_1/sombras.html

Es cierto que puedes editar el fichero y quitar el box-shadow solamente, pero como tenéis el fichero:

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

para añadir vuestras propias personalizaciones, os será más sencillo añadir esta única instrucción:

#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {
box-shadow: none;
}
Instrucción añadida en el fichero custom.css

De esta forma, estamos sobrescribiendo el valor del box-shadow que teníamos en el theme.css

Por otro lado, si vamos a la ficha del producto vemos que siguen las sombras:

Sombra ficha del producto
Inspeccionar elemento ficha del producto

Añadimos en el fichero:

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

.product-images>li.thumb-container>.thumb {
box-shadow: none;
}
.product-cover img {
box-shadow: none;
}
Sombra quitada

Tener en cuenta que estamos tocando “clases” en el css, mucho cuidado porque una clase afecta a distintas partes.

Documento construido bajo Prestashop 1.7.2.4 con la plantilla por defecto.

Banner de la página principal en la cabecera en Prestashop 1.7

En este pequeño documento, vamos a cambiar de localización del módulo de banner que se muestra en la página principal para colocarlo en la cabecera de la tienda.

Banner principal en Prestashop 1.7

La idea es dejar ese banner en la cabecera de la tienda.

Banner cabecera

Vemos que en el fichero: /themes/classic/templates/_partials/header.tpl (versión 1.7.2.4 de Prestashop) disponemos de la siguiente línea de código:

{block name='header_banner'}
<div class="header-banner">
{hook h='displayBanner'}
</div>
{/block}
header.tpl

Y la vamos a dejar del siguiente modo (hemos encerrado la impresión del hook -> displayBanner dentro de un div con clase container):

{block name='header_banner'}
<div class="header-banner">
<div class="container">
{hook h='displayBanner'}
</div>
</div>
{/block}
header.tpl

El siguiente paso es ir a la pestaña Diseño -> posiciones de los módulos, pulsamos en “Insertar un módulo

Insertar módulo hook

Y vemos que no encontramos el hook -> displayBanner

No aparece hook -> displayBanner

Vamos a crear nosotros el hook, mediante el módulo gratuito de Vekia: Crear Hook mediante el módulo de Vekia

Una vez hayamos creado el hook:

Creando hook

Volvemos a la pestaña Diseño -> Posiciones de los módulos y ahora si podremos anclar el módulo del banner en el hook -> displayBanner

Anclando módulo en el displayBanner

Finalmente, lo veremos del siguiente modo:

Logo cabecera

Vemos que queda demasiado ajustado, podemos meterle un relleno, añadiendo, por ejemplo, en el fichero:

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

La siguiente instrucción:

#header .header-banner {
padding: 1em;
}

Continúa leyendo Banner de la página principal en la cabecera en Prestashop 1.7

[DOC] Ver CSS descomprimido en Prestashop 1.7

Documento que nos sirve para descomprimir el fichero: theme.css que viene comprimido por defecto en Prestashop 1.7.

Para ver como descomprimir el fichero, debéis pinchar en la siguiente imagen:

Acceder al manual para Prestashop 1.7 que permite ver el fichero theme.css descomprimido
Acceder al manual para Prestashop 1.7 que permite ver el fichero theme.css descomprimido

No se ve el enlace de contacte con nosotros en la cabecera de Prestashop 1.7

Hace tiempo que no escribo, y aquí va otro post chorra sobre Prestashop 🙂

En las variantes actuales de Prestashop 1.7 (al menos en la 1.7.2.3 y anteriores variantes de Prestashop 1.7) no aparece el enlace de Contacte con nosotros en la cabecera cuando se muestra el número de teléfono de la tienda.

Enlace “Contacte con nosotros” en la cabecera de Prestashop 1.7
Teléfono cabecera Prestashop 1.7

¿Cómo es posible si estamos hablando del módulo: “Información de contacto“?

Se debe a que en el fichero: “/themes/classic/modules/ps_contactinfo/nav.tpl“, disponemos de un condicional que dice “Si se muestra el número de teléfono no se muestra el enlace de “Contacte con nosotros”

Código Módulo Prestashop 1.7

Una de las posibles opciones para que se vea el enlace de “Contacte con Nosotros” al lado del “Teléfono” cuando tengamos configurado el número de teléfono de la tienda, es copiar la siguiente línea de código:


<a href="{$urls.pages.contact}">{l s='Contact us' d='Shop.Theme.Global'}</a>

Continúa leyendo No se ve el enlace de contacte con nosotros en la cabecera de Prestashop 1.7

Cambiar tamaño del logo en Prestashop 1.7

Si en la pestaña Diseño -> Temas y logotipo, intentamos subir un logo, por ejemplo, del siguiente tamaño:

Elección del logo para Prestashop 1.7
Elección del logo para Prestashop 1.7
Subiendo logo en Prestashop 1.7

Vemos que reduce en exceso el tamaño del logo:

Logo muy pequeño en Prestashop 1.7
Logo muy pequeño en Prestashop 1.7

Una solución, es cambiar el tema de las rejillas (grid), vamos al fichero:

/themes/classic/templates/_partials/header.tpl

Y aquí:

<div class="col-md-2 hidden-sm-down" id="_desktop_logo">

El valor “2” col-md lo vamos a variar.

Para saber cómo funciona el tema de las rejillas, os invito a visitar esta guía:
http://librosweb.es/libro/bootstrap_3/capitulo_2/tipos_de_rejillas.html

En nuestro caso lo hemos cambiado a “6“.

Dejándolo así:

<div class="col-md-6 hidden-sm-down" id="_desktop_logo">

El problema ahora es que el logo se ve mejor, pero el menú horizontal y el buscador ha bajado de golpe y ya no está a la misma altura que el logo…..

El logo ha bajado el menú horizontal y el buscador en Prestashop 1.7

Para solucionar esto, nos vamos al mismo fichero, buscamos esta línea de código:

<div class="col-md-10 col-sm-12 position-static">
<div class="row">
{hook h='displayTop'}
<div class="clearfix"></div>
</div>
</div>

Y vamos a cambiar el: “col-md-10” en nuestro caso por “col-md-6”, dejándolo así:

<div class="col-md-6 col-sm-12 position-static">
<div class="row">
{hook h='displayTop'}
<div class="clearfix"></div>
</div>
</div>

Finalmente, veremos el bloque del logo, menú y buscador de la siguiente forma:

Logo normal en Prestashop 1.7
Logo normal en Prestashop 1.7

Pues si reducimos el navegador, vemos que se ve bien hasta cierto punto…

Logo pequeño en resolución pequeña en Prestashop 1.7
Logo pequeño en resolución pequeña en Prestashop 1.7

¿Cómo podemos hacer un apaño para que cuando la web en resolución mínima no quede mal el logo (en nuestro caso particular)?

Añadimos en nuestro caso en el fichero /themes/classic/assets/css/custom.css 

La siguiente instrucción:

@media (max-width: 767px) {

#header .header-nav .top-logo a img {
max-height: 200px;
}
#header .header-nav {
max-height: 225px;
}
}

La imagen del logo en el CSS (en el theme.css) tiene una altura máxima establecida de 50px nosotros se la cambiamos a 200px.

El bloque que engloba al logo y a los otros elementos cuando la resolución es menor tiene una altura máxima de 50px nosotros se la cambiamos a 225px.

Por supuesto estos cambios solo se aplican en el @media (max-width: 767px) que hemos indicado, aunque con un poco de ingenio podríamos hacerlo para distintas resoluciones con el @media, pero bueno eso ya lo dejo a vosotros.

Evidentemente ha sido un pasaje muy rápido, por lo que es posible que tengáis que hacer más cambios. (De todos modos, tener en cuenta que esto ha sido para Prestashop 1.7.1.1, por lo que quizás en futuras variantes de la 1.7.X.X sea diferente)

Por cierto, si vosotros usáis inspeccionar elemento u firebug, veréis que hace referencia al theme.css, pero para no tocar el css original, simplemente hacemos una sobreescritura de los valores que necesitamos en el fichero custom.css

Por cierto, ¿recordáis que también hicimos unas guías, por si queremos cambiar el logo de ubicación o si queremos eliminar el logo de la cabecera?

Ah se me olvidaba, recordar:

  1. Limpiar cache en la pestaña Parámetros Avanzados -> Rendimiento

    Limpiar cache en Prestashop 1.7
  2. Si los cambios del CSS no los ves, limpia la cache de tu navegador.

Documento construido bajo Prestashop 1.7.1.1

Añadir ficheros CSS y JavaScript en Prestashop

En esta ocasión, vamos hablar de un aporte desarrollado por el usuario Tuni-Soft de la Comunidad de Prestashop, que nos permite cargar nuestros propios ficheros *.css y *.js para luego cargarlos tanto en la tienda como en el mismo panel de administración.

La instalación y subida del módulo, sin problemas, desde la pestaña módulos -> módulos

El módulo, no ofrece ninguna configuración adicional y funciona de la siguiente forma:

En el directorio del módulo:

/modules/medialoader/

No debemos fijar en las siguientes 4 carpetas:

Carpeta para cargar nuestros CSS Y JS en Prestashop mediante un módulo
  • css -> Aquí metemos los ficheros CSS que luego cargaran en la tienda
  • js -> Aquí metemos los ficheros JS que luego cargaran en la tienda
  • bo_css -> Aquí metemos los ficheros CSS que cargaran en el panel de administración de tu tienda
  • bo_js -> Aquí metemos los ficheros JS que cargaran en el panel de administración de tu tienda

A nivel de código el módulo simplemente se instala en dos “hooks” en el displayHeader (hook donde cargan JS y CSS en el front-office) y en el displayBackOfficeHeader (hook donde cargan los JS y CSS en el back-office (panel)) y luego dentro de la función de los hooks, lo que hace es buscar dentro de los directorios que hemos comentado anteriormente y hacer uso de la función addCSS (para añadir los CSS) y de la función addJSS (para añadir los JS). (Si tenéis interés revisar el fichero medialoader.php)

¿Dónde puedo descargar este aporte para poder cargar mis ficheros JS y CSS en Prestashop?

https://www.prestashop.com/forums/topic/386184-free-medialoader-module-load-your-js-and-css-files-easily/

Enlace alternativo de una versión antigua del módulo por si falla el enlace fuente.

Por cierto, ¿Recordáis que también podíamos usar contentbox para cargar nuestros ficheros JS y CSS en la sección “Load Files on HTML Header ?

Continúa leyendo Añadir ficheros CSS y JavaScript en Prestashop

Cambiar logo de ubicación en Prestashop 1.7

Vamos a cambiar el logo de ubicación (bajo la plantilla por defecto de Prestashop 1.7) y colocarlo encima del bloque de “Contacte con nosotros, carrito, etc..”

Logo en Prestashop 1.7 con la plantilla por defecto
Logo en Prestashop 1.7 con la plantilla por defecto

Por defecto, en Prestashop 1.7, vemos logo así:

¿Y si quisiéramos que el logo se viera de la siguiente forma?

Ubicación del logo cambiada en Prestashop 1.7
Ubicación del logo cambiada en Prestashop 1.7

Existen varias formas 🙂

Una de ellas es la siguiente,

El primero paso es -> Eliminar/ocultar el logo de Prestashop 1.7

El segundo paso es en el mismo fichero donde hemos ocultado el logo, que recordamos que es el fichero:

/themes/classic/templates/_partials/header.tpl

Justo debajo de:

<nav class="header-nav">

Añadimos el siguiente código:

<div class="container"><a href="{$urls.base_url}">
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}" />
</a></div>
Código logo Prestashop 1.7 cambio ubicación
Código logo Prestashop 1.7 cambio ubicación

Continúa leyendo Cambiar logo de ubicación en Prestashop 1.7

Cambiar altura del slider en Prestashop 1.7

En la pestaña Módulos -> Módulos -> Módulos Instalados, si buscamos el módulo:

ps_imageslider / carrusel de imágenes

Vemos que no tenemos ninguna opción de configuración para ajustar la altura del contenedor del slider en Prestashop 1.7 (al menos en Prestashop 1.7.1.0 con la versión 2.0 del módulo)

¿Dónde se configura la altura del contenedor del Slider en Prestashop 1.7?
¿Dónde se configura la altura del contenedor del Slider en Prestashop 1.7?

Desde firebug / inspeccionar elemento, vemos que es debido a que la instrucción:

Altura del Slider en Prestashop 1.7
Altura del Slider en Prestashop 1.7

.carousel .carousel-inner tiene limitada el “height” (altura) a 340px;

Podríamos ir directamente al fichero:

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

Y aunque podríamos modificar directamente la línea:


.carousel .carousel-inner {
height: 340px;
}

Lo que vamos hacer es añadir una nueva línea en el fichero en el fichero:

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

.carousel .carousel-inner {
height: nueva_alturapx;
}

CSS personalizado en Prestashop 1.7
CSS personalizado en Prestashop 1.7

En nueva_altura, definimos el numero de pixeles que nosotros queremos definir para la altura del slider en Prestashop 1.7

Este documento fue creado para Prestashop 1.7.1.0