Centrar logo PrestaShop 1.6

[TiendasPS]

La diferencia con la solución aportada por el gran VEKIA (cuanto he aprendido contigo),  es que no necesitamos incluir el <div id="header_logo"> en blocksearch-top.tpl, solo vamos a modificar un poco el header.tpl y vamos añadir unas lineas de código al global.css de nuestro theme.

 

Podéis verlo funcionando en http://demo.tiendasprestashop.es/

 

Abrimos el archivo header.tpl de nuestro tienda: mitienda/theme/default-bootstrap/header.tpl

 

buscamos la siguientes lineas de código, mas o menos por la linea 88

<div>                    
<div class="container">
<div class="row">
<div id="header_logo">
<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
</a>
</div>
{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
</div>
</div>
</div>

 

y lo reemplazamos por esto

<div>
<div id="header_logo" class="contenedor">
<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
</a>
</div>
<div class="container">
<div class="row">
{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
</div>
</div>
</div>

Ahora vamos a nuestro global.css y añadimos al final lo siguiente:

/* ------ Logo Centrado ------ */

.contenedor img {
position: relative;
margin: auto;
}

/* ------ Fin Logo Centrado ------ */

Recordad que tenéis que forzar la compilación y vaciar la cache para que se vean los cambios.

 

Se nos quedara algo asi.

 

 

 

Espero que les sea útil en sus proyectos.

Edited July 18, 2015 by TiendasPS (see edit history)

[LopezDAT]

Buenas amigo, y como hago para llevar el cuadro de buscar hacia la derecha? muchas gracias por el aporte saludos

[Eusebio100]

Este es otro tema que se ha tratado bastante y cada uno lo hacemos de una manera.

A mi la forma de hacerlo que más me gusta para mover el logo es la siguiente:

1) Quitar del header el div correspondiente al logo.

2) Crear y descargar un contentbox con el nombre content_Logo (o el nombre que quieras), instalar el módulo a continuación y añadirlo al hook display Top.

3) configurar el módulo y meter dentro la imagen del logo, previamente subida a la carpeta de imágenes de prestashop.

 

Con esto ya tenemos el logo instalado y alineado con el carrito y el buscador, ahora en posiciones de los módulos podemos decidir si lo queremos en el centro, a la derecha o a la izquierda y lo podemos mover cuando queramos sin tocar código.

[tiendatutorial]