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

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

Sigue leyendo

Eliminar logo en Prestashop 1.7

Eliminar logo en Prestashop 1.7

Eliminar logo en Prestashop 1.7

Para ocultar/eliminar el logo de la cabecera en Prestashop 1.7, podemos hacerlo de varias formas, ocultándolo por CSS, eliminando la instrucción del TPL, etc..

En nuestro caso vamos a quitarlo desde el fichero TPL, para ellos nos vamos al fichero:

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

Aquí, vamos a buscar el siguiente código:

<div class="col-md-2 hidden-sm-down" id="_desktop_logo">
<a href="{$urls.base_url}">
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
</a>
</div>

Y lo vamos a comentar:

{* <div class="col-md-2 hidden-sm-down" id="_desktop_logo">
<a href="{$urls.base_url}">
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
</a>
</div> *}

Recordar que para comentar código en Smarty, utilizamos {* *}

¿Cómo se ve ahora la cabecera en Prestashop 1.7?

Sin logo en Prestashop 1.7

Testeado en Prestashop 1.7.1.0