Comment changer le fond du header par une image avec transparence? Template 1.4.5 Prestashop

[ALC]

Bonsoir à tous,

 

J'ai changé l'image (logo à gauche) sur le template Prestashop 1.4.5.

 

L'image fait toute la largeur de la page.

 

Et comme l'image fait toute la largeur, elle "pousse" vers le bas en partant de la ligne où se trouve "contact", "plan du site", etc.

 

De fait, la hauteur du header est rallongée.

 

Où dois je intervenir dans le global.css pour insérer mon image (qui contient des zones de transparence) dans le header.

 

Sachant que j'ai changé la couleur à la ligne 56 du global.css.

/* ************************************************************************************************

generic style

************************************************************************************************ */

body{

font:normal 11px/14px Arial, Verdana, sans-serif;

color:#222;

background:#93dd00 <<< ligne 56

}

 

 

Je voudrais que la tête du chat se retrouve juste au dessus du rectangle "RECHERCHER".

Voir la capture écran en pièce jointe.

 

Merci à vous!!

 

Cordialement,

 

Eric

[iXs]

Salut ALC,

 

si ta boutique est online donne le lien, ca sera plus facile pour t'aider.

[ALC]

Hello iXs,

Merci pour ton message, mais la boutique n'est pas encore en ligne!

Je peux par contre donner d'autres infos (techniques) mais, bon, débutant, je ne sais pas trop par où commencer.

En fait, ce que je peux dire, c'est que le header d'origine (template 1.4.5 prestashop) prévoit à gauche

un emplacement pour le logo de la boutique. Mais ses dimensions "autorisées" sont bien en-deçà du logo que j'ai substitué à l'original et qui fait toute la largeur de la page d'accueil.

J'ai mis en pièce jointe le haut de la page d'accueil du template 1.4.5 d'origine où l'on voit bien le logo Prestashop the best e commerce experience.

 

J'espère que ceci aura pu compléter la description du problème

 

Merci!

[iXs]

Bon je n'ai jamais travaillé sur le nouveau template d'origine donc je te conseille d'utiliser le navigateur Chrome et d'utiliser le clic droit -> inspecter l'élément. Sur la colonne de droite vont s'afficher les CSS que tu peux modifier et voir le résultat immédiatement sur la page. A noter que les autres navigateur le permettent aussi mais je n'ai pas la démarche en tête.

[Bondaty and Co]

Salut,

je ne sais pas comment est ton template.

Dans l'absolu le plus simple serait d'avoir un div header qui englobe <div id="header">le logo et le header right</div> qui soit égale à la largeur de ta page,les tailles du logo + header right ne doit pas être supérieur à la lageur du header total

puis tu insère ce code dans ton global CSS:

#header {

backgroung: transparent url('url de ton image') no-repeat top center;

}

[ALC]

Hello,

 

Je reviens après avoir bien lu vos conseils.

 

J'ai fait un print écran en pièce jointe.

 

En fait mon logo que je voudrais sur toute la largeur du site, ne doit pas se trouver au dessus du header_right qui englobe "contact", "plan du site", etc.

 

Le logo (ou bannière puisqu'il fait toute la largeur de la page d'accueil) doit s'intégrer en fond du header_right.

 

J'ai vu aussi qu'il y avait du css avec le blockuserinfo.css qui intègre en première ligne de code #header_right #header_user.

 

Je continue à chercher.

 

Et pour le div englobant le logo et le header right, je ne vois pas trop comment faire? Dans quel fichier? Et faut il supprimer d'autres lignes du fichier concerné?

 

Merci

 

Eric

[Bondaty and Co]

Si il fait la largeur de la page, il pousse automatiquement le header right

[Bondaty and Co]

  On 2/20/2012 at 10:15 PM, ALC said:

 

Et pour le div englobant le logo et le header right, je ne vois pas trop comment faire? Dans quel fichier? Et faut il supprimer d'autres lignes du fichier concerné?

 

Le plus simple:

crais un bandeau de fond de la largeur du site tu le coupe en 2, la partie gauche de la largeur du header-logo et la droite du header-right.

tu ajoute la ligne background: transparent url("ton url de fond"); dans header_logo et header_right du global css.

tu insère ton logo dans le back office (inférieur à la taille de ton logo header)

[Bondaty and Co]

  On 2/22/2012 at 5:21 PM, Bondaty and Co said:

Le plus simple:

crais un bandeau de fond de la largeur du site tu le coupe en 2, la partie gauche de la largeur du header-logo et la droite du header-right.

tu ajoute la ligne background: transparent url("ton url de fond"); dans header_logo et header_right du global css.

tu insère ton logo dans le back office (inférieur à la taille de ton logo header)

 

Encore plus simple:

dans le global CSS de ton template tu insère

juste avant #header_logo

 

#header {background: transparent url("url de ton bando") top left;
width:980px;
height:hauteur de ton headerpx;
margin-bottom:10px}

 

il n'y a rien à changer dans le header.tpl normalement le div header est déjà présent.

 

Tu insères ton logo par le BO de la largeur de ton #header_logo

 

Si ton #header_logo est plus large il faut diminuer la rtaille de ton #header_right

[ALC]

Hello!

 

Alors voilà ce que j'ai dans mon css au niveau du header, aucun autre fichier n'ayant été modifié:

 

 

/* ************************************************************************************************

HEADER

************************************************************************************************ */

#header {position:relative;

background-color: transparent;

}

 

#header {background: transparent url(img/logo.jpeg) top left;

width:980px;

height:159px;

margin-bottom:10px

}

#header_logo {

float:left;

display: block;

}

 

#header_right {

position:relative;

float: right

}

 

 

/* ************************************************************************************************

 

Et dans le BO, j'ai bien la banniere qui est sur toute la largeur.

 

Et cela donne cela , voir le fichier joint.

 

J'aurais préféré que la bannière se mette bien "en fond": entre le haut identifié sur la droite par " plan du site" etc et juste au dessus de la barre de menu avec "a propos" et "catégories".

 

Je pense que j'ai "merdouillé" quelque part. Forcément!

 

Pas évident!

[Bondaty and Co]

1 la bonne syntaxe: background: transparent url('2 points/img/logo.jpeg') top left;

2 La bannière doit être dans ton fichier, envoyée par ftp renommée autrement que logo. et non envoyée par la BO en remplacement du logo. Le logo doit faire la taille de ton header logo, il manque donc un width dans ton header_logo et right

 

Si tu as mis la bannière à la place du logo comme elle fait toute la largeur c'est normale qu'elle pousse le reste.

 

PS supprime par le FTP ton logo et remplace le par le logo qui fait la taille du header_logo.

[ALC]

Hello

 

Je reviens car n'ayant pu reprendre le problème que maintenant.

 

Alors, je voulais préciser que ce que j'appelle "bannière" ou logo fait bien toute la largeur de la page. Et non la largeur du logo "d'origine" du template prestashop. Donc je ne vois pas pourquoi il faut redimensionner la bannière avec la largeur du header_logo. Si c'est cela, la bannière sera "illisible".

 

Je continuer à chercher....

 

[ALC]

d'après un sujet déjà posté sur la problématique quasi-identique, pour l'instant, j'ai désactivé l'appel du header_logo (voir en gras):

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">

<head>

<title>{$meta_title|escape:'htmlall':'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 http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<meta name="generator" content="PrestaShop" />

<meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />

<link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />

<link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />

<script type="text/javascript">

var baseDir = '{$content_dir}';

var static_token = '{$static_token}';

var token = '{$token}';

var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};

var priceDisplayMethod = {$priceDisplay};

var roundMode = {$roundMode};

</script>

{if isset($css_files)}

{foreach from=$css_files key=css_uri item=media}

<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />

{/foreach}

{/if}

{if isset($js_files)}

{foreach from=$js_files item=js_uri}

<script type="text/javascript" src="{$js_uri}"></script>

{/foreach}

{/if}

{$HOOK_HEADER}

</head>

 

<body {if $page_name eq '404'}id="pagenotfound"{elseif $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/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">{$geolocation_country}</span></p>

</div>

{/if}

<div id="page" class="container_9 clearfix">

 

<!-- Header -->

<div id="header" class="grid_9 alpha omega">

{*<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 id="header_right" class="grid_6 omega">

{$HOOK_TOP}

</div>

</div>

 

<div id="columns" class="grid_9 alpha omega clearfix">

<!-- Left -->

<div id="left_column" class="column grid_2 alpha">

{$HOOK_LEFT_COLUMN}

</div>

 

<!-- Center -->

<div id="center_column" class=" grid_5">

{/if}

 

Maintenant il faut que j'essaie de comprendre comment intégrer la bannière sur toute la largeur...

 

A suivre...

 

ps: un vrai jeu de piste et de réflexions! Les neurones chauffent!

[ALC]

bon, j'ai ajouté dans le global.css, le code suivant

 

/* ************************************************************************************************

HEADER

************************************************************************************************ */

#header {position:relative;

background-color: transparent;

}

 

#banniere {background: transparent url('..img/logo.jpeg') no-repeat top left;

float: left;

height: 159;

width: 979;

}

 

#header_logo {

float:left;

display: block;

}*/

 

#header_right {

position:relative;

float: right

}

ET DANS le HEADER.TPL, j'ai ajouté (voire la zone en gras)

 

<!-- Header -->

<div id="header" class="grid_9 alpha omega">

{*<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 id="header_right" class="grid_6 omega">

{$HOOK_TOP}

<div id="banniere">

</div>

</div>

</div>

 

<div id="columns" class="grid_9 alpha omega clearfix">

 

Mais là, cela ne donne rien.

 

La banniere ne s'affiche pas?

 

Où est le problème...

 

Il faut que je revois le code avec les DIV en utilisant firebug, peut être que ca m 'aidera???

[ALC]

Je me demande aussi comment on accède au fichier "global" qui compile tout (head/body, etc avec les div)?

Dans le dossier prestashop, je ne vois que des fichiers php, tpl, et css...

 

est ce que les DIV ne passent que par les fichiers TPL?

[Bondaty and Co]

  On 2/27/2012 at 5:52 PM, ALC said:

bon, j'ai ajouté dans le global.css, le code suivant

 

/* ************************************************************************************************

HEADER

************************************************************************************************ */

#header {position:relative;

background-color: transparent;

}

 

#banniere {background: transparent url('..img/logo.jpeg') no-repeat top left;

float: left;

height: 159;

width: 979;

}

 

#header_logo {

float:left;

display: block;

}*/

 

#header_right {

position:relative;

float: right

}

ET DANS le HEADER.TPL, j'ai ajouté (voire la zone en gras)

 

<!-- Header -->

<div id="header" class="grid_9 alpha omega">

{*<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 id="header_right" class="grid_6 omega">

{$HOOK_TOP}

<div id="banniere">

</div>

</div>

</div>

 

<div id="columns" class="grid_9 alpha omega clearfix">

 

Mais là, cela ne donne rien.

 

La banniere ne s'affiche pas?

 

Où est le problème...

 

Il faut que je revois le code avec les DIV en utilisant firebug, peut être que ca m 'aidera???

Le problème est partout, un div bannière qui englobe rien une class grid_6 omega qui n'existe pas

[Bondaty and Co]

  On 2/27/2012 at 6:15 PM, Bondaty and Co said:

Le problème est partout, un div bannière qui englobe rien une class grid_6 omega qui n'existe pas

 

Envoyez moi en MP votre global CSS, votre header.tpl, votre bannière à support@bondaty-and-co.fr

[ALC]

Eh bien ok. J'ai vu effectivement qu'il y avait aussi une class type "grid" à prendre en compte!

Je vous envoie cela.

Merci!

[ALC]

Ca avance! (voir pièce jointe) << merci M. Christophe Bondaty

 

Maintenant, il s'agit de repositionner les colonnes par rapport au bloc du menu horizontal! Car les colonnes sont remontées ..légèrement au dessus du bloc du menu horizontal.

 

[ALC]

J'avance.

J'ai remonté de 10 px le bloc du menu horizontal en modifiant la ligne margin-top qui était à 10px.

Il faut aller prendre le fichier superfish-modified.css (drôle de nom!) que l'on retrouve dans le répertoire: prestashop/modules/blocktopmenu/css/

Maintenant, il faut trouver comment baisser les colonnes (gauche, centrale et celle de droite).

A priori, via le fichier grid_prestashop.css, les essais ne sont pas concluants.

Il va falloir chercher ailleurs! ;-)

[Bondaty and Co]

  On 2/28/2012 at 1:24 PM, ALC said:

J'avance. J'ai remonté de 10 px le bloc du menu horizontal en modifiant la ligne margin-top qui était à 10px. Il faut aller prendre le fichier superfish-modified.css (drôle de nom!) que l'on retrouve dans le répertoire: prestashop/modules/blocktopmenu/css/ Maintenant, il faut trouver comment baisser les colonnes (gauche, centrale et celle de droite). A priori, via le fichier grid_prestashop.css, les essais ne sont pas concluants. Il va falloir chercher ailleurs! ;-)

 

Dans le global CSS ligne 39 ( structure ) remplace le code par celui ci et ajuste les margin-top

#page {}
#header {z-index:10}
#columns {z-index:1}
 #left_column { margin-top:20px}
 #center_column { margin-top:20px}
 #right_column { margin-top:20px}
#footer {}

tu peux jouer avec des décalagescolone de gauche plus bas que la droite, etc...

[ALC]

Hello à tous,

Bon eh bien la nuit porte conseil!

Au lieu de déplacer les blocs, j'ai ajouté un margin-bottom de 35 px au #header dans le global.css.

De fait, tout se recale parfaitement.

Yesssss!

Et merci à Bondaty & Co! Je n'hésiterai pas à lui faire le buzz!

bon, maintenant, il faut que je vois comment on marque résolu???

[ALC]

lol! Hello M. Bondaty, je n'avais pas lu votre réponse! En fait, il y a donc au moins 2 solutions! Cool!

Bravo!

[ALC]

euhhh, comment marque t on que le sujet est Résolu??? Je suis allé voir dans mon profil s'il n'y avait pas une fonction dédiée dans la liste des sujets publiés, mais, sauf erreur, je n'ai rien trouvé.

[Delphilie]

  On 2/28/2012 at 11:13 AM, ALC said:

Ca avance! (voir pièce jointe) << merci M. Christophe Bondaty

 

Maintenant, il s'agit de repositionner les colonnes par rapport au bloc du menu horizontal! Car les colonnes sont remontées ..légèrement au dessus du bloc du menu horizontal.

Votre discution est très intéressant mais malheureusement, vous ne dites pas comment vous avez résolu le problèle pour le header.tpl

j'ai le même problème est je n'ai pas trouvé comment faire

la version 1.5.3.1 a completement changé et je trouve beaucoup plus difficiel de trouver les fichier à modifier, même avec firebug

Pouvez vous nous communiqué la solution

merci

[abderrezak]

merci