Logo dans barre de navigation

Céline.B · November 3, 2015

Bonjour à tous,

Je cherche à insérer mon logo (qui se situe au dessus du menu haut horizontal), dans la barre de navigation tout en haut à gauche, et le supprimer du menu haut.

Je suis sous Prestashop 1.6.1.1. Est-ce possible ?

J'ai chercher dans "position" mais je ne vois pas comment le dégreffer et le positionner ailleurs.

De plus, il doit y avoir un .css a modifier... ?

Quelqu'un peut-il m'aider s'il vous plait ?

Merci beaucoup

Céline.B · November 16, 2015

Bonjour,

S'il vous plait, quelqu'un aurait-il la même question et quelqu'un pourrait-il m'aider ??

Merci par avance.

2FR3 · November 16, 2015

Bonjour,

Pour le logo dans la bannière (?), il vous faut aller dans le module configuration du theme et changé l'image de base.

Pour le menu, il faut simplement le desactiver.

Céline.B · November 17, 2015

Bonjour,

Merci pour votre réponse.

J'ai réussi à supprimer le logo de son emplacement initial.

Cependant je ne souhaite pas le mettre dans la bannière (que je souhaite désactiver), je voudrais mettre le logo dans la barre de navigation (div class = nav) (que j'ai fixée) et à la place du numéro de téléphone qui s'affiche par défaut à gauche.

Merci par avance.

Céline

unmonde-montagnes · April 10, 2016

Bonjour,

Merci pour votre réponse.

J'ai réussi à supprimer le logo de son emplacement initial.

Cependant je ne souhaite pas le mettre dans la bannière (que je souhaite désactiver), je voudrais mettre le logo dans la barre de navigation (div class = nav) (que j'ai fixée) et à la place du numéro de téléphone qui s'affiche par défaut à gauche.

Merci par avance.

Céline

Bonjour Céline,

As-tu trouvé comment faire ?

Je cherche à réaliser la même chose mais je ne trouve pas comment y parvenir.

Merci

Céline.B · April 11, 2016

Bonjour,

Non malheureusement je n'y suis pas arrivé...

Mon mari reprend notre projet depuis quelques jours, peut être y arrivera t-il...je n'hésiterai pas à poster une réponse si jamais nous trouvons comment faire!

Bon courage.

Vincent Decaux · April 11, 2016

Bonjour,

Le logo n'est pas un module, il s'agit juste d'une ligne de HTML dans le fichier header.tpl de votre thème.

Vous devez déplacer ces 3 lignes et les mettre où vous souhaitez :

<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>

Vous verrez dans ce fichier aussi la class ".nav". Vous pouvez couper / coller ces lignes dedans.

Céline.B · April 11, 2016

Merci pour votre réponse, nous testerons cela.

unmonde-montagnes · April 13, 2016

Bonjour,

Le logo n'est pas un module, il s'agit juste d'une ligne de HTML dans le fichier header.tpl de votre thème.

Vous devez déplacer ces 3 lignes et les mettre où vous souhaitez :
<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>
Vous verrez dans ce fichier aussi la class ".nav". Vous pouvez couper / coller ces lignes dedans.

J'ai essayé en local mais je ne dois pas coller les lignes où il faut.

Concrètement ça se matérialise comment sur mon fichier header.tpl ?

Je copie colle coupe où ?

Désolée mais autant j'arrive à me débrouiller sur les .css mais les tpl, c'est un mystère pour moi....

Merci d'avance

* 2007-2015 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2015 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7"{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8"{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}><![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9"{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}><![endif]-->
<html{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}>
<head>
<meta charset="utf-8" />
<title>{$meta_title|escape:'html':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
<meta name="description" content="{$meta_description|escape:'html':'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
<meta name="keywords" content="{$meta_keywords|escape:'html':'UTF-8'}" />
{/if}
<meta name="generator" content="PrestaShop" />
<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
<meta name="viewport" content="width=device-width, minimum-scale=0.25, maximum-scale=1.6, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link rel="stylesheet" href="{$css_uri|escape:'html':'UTF-8'}" type="text/css" media="{$media|escape:'html':'UTF-8'}" />
{/foreach}
{/if}
{if isset($js_defer) && !$js_defer && isset($js_files) && isset($js_def)}
{$js_def}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri|escape:'html':'UTF-8'}"></script>
{/foreach}
{/if}
{$HOOK_HEADER}

<!--[if IE 8]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{else} show-left-column{/if}{if $hide_right_column} hide-right-column{else} show-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}">
{if !isset($content_only) || !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode}
<div id="restricted-country">
<p>{l s='You cannot place a new order from your country.'}{if isset($geolocation_country) && $geolocation_country} <span class="bold">{$geolocation_country|escape:'html':'UTF-8'}</span>{/if}</p>
</div>
{/if}
<div id="page">
<div class="header-container">
<header id="header">
{capture name='displayBanner'}{hook h='displayBanner'}{/capture}
{if $smarty.capture.displayBanner}
<div class="banner">
<div class="container">
<div class="row">
{$smarty.capture.displayBanner}
</div>
</div>
</div>
{/if}
{capture name='displayNav'}{hook h='displayNav'}{/capture}
{if $smarty.capture.displayNav}
<div class="nav">
<div class="container">
<div class="row">
<nav>{$smarty.capture.displayNav}</nav>
</div>
</div>
</div>
{/if}
<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>
</header>
</div>
<div class="columns-container">
<div id="columns" class="container">
{if $page_name !='index' && $page_name !='pagenotfound'}
{include file="$tpl_dir./breadcrumb.tpl"}
{/if}
<div id="slider_row" class="row">
{capture name='displayTopColumn'}{hook h='displayTopColumn'}{/capture}
{if $smarty.capture.displayTopColumn}
<div id="top_column" class="center_column col-xs-12 col-sm-12">{$smarty.capture.displayTopColumn}</div>
{/if}
</div>
<div class="row">
{if isset($left_column_size) && !empty($left_column_size)}
<div id="left_column" class="column col-xs-12 col-sm-{$left_column_size|intval}">{$HOOK_LEFT_COLUMN}</div>
{/if}
{if isset($left_column_size) && isset($right_column_size)}{assign var='cols' value=(12 - $left_column_size - $right_column_size)}{else}{assign var='cols' value=12}{/if}
<div id="center_column" class="center_column col-xs-12 col-sm-{$cols|intval}">
{/if}

Edited April 13, 2016 by unmonde-montagnes (see edit history)

unmonde-montagnes · April 21, 2016

J'ai essayé en local mais je ne dois pas coller les lignes où il faut.

Concrètement ça se matérialise comment sur mon fichier header.tpl ?

Je copie colle coupe où ?

Désolée mais autant j'arrive à me débrouiller sur les .css mais les tpl, c'est un mystère pour moi....

Merci d'avance

Bonjour,

Le logo n'est pas un module, il s'agit juste d'une ligne de HTML dans le fichier header.tpl de votre thème.

Vous devez déplacer ces 3 lignes et les mettre où vous souhaitez :
<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>
Vous verrez dans ce fichier aussi la class ".nav". Vous pouvez couper / coller ces lignes dedans.

Pour moi c'est ok, en fait je n'avais pas ouvert le bon .tpl

Il ne me reste qu'à trouver comment réduire la hauteur de la barre de navigation et comment aligner barre de recherche, panier et onglet connexion.

Merci Vincent

Sign In

Logo dans barre de navigation

Recommended Posts

Céline.B

Link to comment

Share on other sites

Céline.B

Link to comment

Share on other sites

2FR3

Link to comment

Share on other sites

Céline.B

Link to comment

Share on other sites

unmonde-montagnes

Link to comment

Share on other sites

Céline.B

Link to comment

Share on other sites

Vincent Decaux

Link to comment

Share on other sites

Céline.B

Link to comment

Share on other sites

unmonde-montagnes

Link to comment

Share on other sites

unmonde-montagnes

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com