Jump to content

(resolu merci;) insértion de ma bannière me deregle le header

haio

By haio
in PrestaShop pour les développeurs

 Share

Recommended Posts

haio Newbie

haio

Posted
Posted

Bonjour

 

jai essayer d'intégrer ma bannière via le FTp cela na pas fonctionné, je me dis alors que la maniere la plus simple c'est via le back office, en téléchargenat le logo de l'en tete comme une bannière, mais le probleme c'est que ca m'agrandit le header (voir photo) en me laissant un grand espace entre la bannière et mon menu horizontal, comment puis je faire pour la mettre dans le back office sans qu'il y est ce probleme? merci

post-323047-0-15176100-1330185071_thumb.jpg

Link to comment
Share on other sites
Stéphane Chonez Newbie

Stéphane Chonez

Posted
Posted

bonjour,

 

le mieux pour vous serait de mettre votre bandeau en background de votre header.

il semblerait que votre bandeau intègre votre logo, il faudra donc "désactiver" le code appelant le logo.

 

ouvrez votre fichier header.tpl de votre thème afin de comprendre la structure. vous devriez avoir quelque chose ressemblant à ceci:

<!-- Header -->
  <div id="header">
   <div id="header_right">
 {$HOOK_TOP}
   </div>
   <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
 <img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
   </a>
  </div>

 

donc pour mettre le bandeau en arriere plan on va devoir intervenir sur les css de <div id="header"> dans le fichier globall.css se trouvant dans le daossier css de votre thème.

 

repérez #header s'il n'existe pas créer le et ajouter ceci dans globall.css

#header {
background: transparent url(../img/VOTRE_IMAGE.jpg) no-repeat;
min-height: HAUTEUR_IMAGEpx
}

remplacez le nom de l'image (elle doit être dans le dossier img de votre thème) et précisez la hauteur minimum de l'image en px

 

donc si vous avez pas besoin du logo le mieux est de commenter le code du header.tpl comme présenté avant:

<!-- Header -->
  <div id="header">
   <div id="header_right">
 {$HOOK_TOP}
   </div>
  {* <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
 <img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
   </a> *}
  </div>

pour commenter un code la bonne pratique est d'utiliser les {* VOTRE CODE *}

 

voilà j'espère que ça cvous aidera ;)

 

Stéphane

Link to comment
Share on other sites
haio Newbie

haio

Posted
  • Author
Posted

merci stéphane alors moi dans le header tpl. j'ai uniquement apres "HOOK TOP " ceci :

{$HOOK_TOP}

</div>

</div>

tout est vide entre les DIV, donc je sais pas si il faut rajouter quelque chose pour que ca puisse marcher, apres quand j'ajoute uniquement les lignes de codes au # header, pour le background avec mon image,

(dans global.css) et rien ne se passe :(

Link to comment
Share on other sites
haio Newbie

haio

Posted
  • Author
Posted

dans le header tpl. jai ces lignes de codes à partir du head jusqu'au HOOK top ,

 

</head>

 

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>

{if isset($ad) && isset($live_edit)}

{include file="$tpl_dir./live_edit.tpl"}

{/if}

{if !$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.'} <span class="bold">{$geolocalization_country}</span></p>

</div>

{/if}

 

 

<div id="pageh" ></div>

 

<div id="page">

<div id="header" style="height:auto; margin-bottom:10px; background-position:bottom center; clear:both; position:relative; float:left">

<div style="position:relative; float:left">

<h1 id="logo" style="margin-top:10px; padding:10px"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>

</div>

<div style="width:500px; position:relative; float:right">

{$HOOK_TOP}

</div>

</div>

Link to comment
Share on other sites
Stéphane Chonez Newbie

Stéphane Chonez

Posted
Posted

on va s'intéresser à cette partie du code :

<div id="header" style="height:auto; margin-bottom:10px; background-position:bottom center; clear:both; position:relative; float:left">
<div style="position:relative; float:left">
<h1 id="logo" style="margin-top:10px; padding:10px"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>
</div>
<div style="width:500px; position:relative; float:right">
{$HOOK_TOP}
</div>
</div>

 

on remplace par

<div id="header">
{* <div style="position:relative; float:left">
<h1 id="logo" style="margin-top:10px; padding:10px"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>
</div> *}
<div style="width:500px; position:relative; float:right">
{$HOOK_TOP}
</div>
</div>

 

c'est a dire que l'on retire les style dans <div id="header"> qui peuvent polluer notre modif et on desactive le logo...

 

ensuite si tu as laissé dans le globall.css les infos sur #header, fais un test...

 

bien sur, fais une sauvegarde de ton fichier header.tpl, si tu n'es pas satisfait tu pourra tjrs remettre à l'initial....

Link to comment
Share on other sites
haio Newbie

haio

Posted
  • Author
Posted

J'ai bien insérer les codes que tu m'a dis pour le header tpl. ca a donc bien désactivé le logo, (voir photo) le header est donc pret a recevoir le bandeau, maintennant c'est au niveau du global css qu'i ya un problème, j'ai rajouté les lignes de codes en plus mais comme il ya deja des anciens codes dans le #header , c'est peut etre ca qui pose problème, mes codes du # header se compose ainsi et moi j'ai rajouté en plus les lignes de codes (en rouges) pour mon bandeau, il faut peut etre que 'enlève certains codes de base du header, je sais pas quoi enlever comme code pour que cela fonctionne

 

#header {

float: left;

width:980px;

height:75px;

text-align: right;

color:#595959;

font-size:11px;

font-family:Verdana, Arial, Helvetica, Sans-Serifpx;

margin-left:-0px;

position:relative

background: transparent url(../img/BASWEET.jpg); no-repeat;

min-height: 287px;

post-323047-0-13913400-1330336693_thumb.jpg

Link to comment
Share on other sites
  • 7 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...