Modification graphique prestashop

[phil3001]

bonjour

J'essai de mettre en vain dans la partie haute du template (header) une image qui fasse toute la largeur du template mais j'y arrive pas.

Ce que j'aimerai c'est que dans mon image se trouve également la barre de recherche ainsi que les icones contact, plan du site, favori

j'ai essayé en modifiant la partie css mais ca marche pas vraiment

merci de votre aide !!!

[Ann]

bonjour

J'essai de mettre en vain dans la partie haute du template (header) une image qui fasse toute la largeur du template mais j'y arrive pas.

Ce que j'aimerai c'est que dans mon image se trouve également la barre de recherche ainsi que les icones contact, plan du site, favori

j'ai essayé en modifiant la partie css mais ca marche pas vraiment

merci de votre aide !!!

Bonjour, tu devrais trouver ça dans le dossier prestashop/img/logo

[Pierre-Yves]

Bonjour,

Pour faire cela tu vas devoir mettre la main à la pâte...

La méthode consiste à faire un div (qui existe déjà) en haut dans le header, ce DIV aura les dimensions de ton image. Ensuite tu mets ton images en background de ce DIV (comme cela tu peux ajouter du contenu dans le div au dessus de l'image).

Si tu comprends pas trop, je te mettrais un code (mais là je suis au taf donc pas trop le temps )

[phil3001]

effectivement un exemple serait le bienvenue car je patoge là

merci encore

[phil3001]

bonsoir à tout le monde

j'avance petit à petit dans mon header

voila le code changer de header.tpl

<!-- Header -->



 

 

                   {$HOOK_TOP}
**

j'ai encore quelque soucis

en bas de mon bandeau j'aimerai qu'il y est plus d'espace (entre le bas du bandeau et le champs categorie a gauche et panier à droite).

et j'aimerai aussi placer les elements encadré en rouge (sur la photo ci jointes) ou je le desire.

comment faire svp

merci d'avance

Philippe

[phil3001]

Bon c'est dimanche, donc j'avance tout seul petit à petit.

J'ai trouvé comment laisser une marge entre le bas de mon image et les box qui se situent juste après.

Il faut aller dans Global.css
et trouver le code suivant :

h1#logo {
   float: left;
   width: 29%;
   margin-top:0em;

il suffit simplement de rajouter après la dernière ligne le code suivant :

margin-bottom:1em;

Par contre je bloque toujours pour le reste.

[phil3001]

encore un point de résolu.

j'ai réussi à deplacer la barre de recherche et aussi à supprimer le fond gris.

j'ai modifié ce code toujours dans global.css

#header #search_block_top p { padding: 5em 0 0.4em 1em; }

par celui ci :

#header #search_block_top p { 
position:absolute;
   top: 291px;
   left: 807px;

}

ce qui m'a permis de placer la barre ou je le voulais exactement.

et pour ce qui est du fond gris.

j'ai simplement supprimé

#header #search_block_top {
   background: #e5e6e7 url('../img/block_search_bg.jpg') no-repeat top right;
   height: 28px;
   width: 330px;
   float: left;

je vous joint l'image de la transformation avec en rouge les problème existant encore.

[phil3001]

Bonjour à tous.

par rapport à toutes les modifictations que j'ai faites, j'ai un gros soucis.

sur internet explorer y a aucune soucis mais sur firefox c'est n'importe quoi.

quelqu'un peut m'expliquer pourquoi et comment faire pour que l'affichage soit identique partout ?

je vous joint 2 copie d'ecran 1 avec internet explorer, et l'autre avec firefox

merci d'avance

[Pierre-Yves]

Il doit y avoir un problème d'alignement avec tes div

Ca doit venir d'un float ou d'un text-align (enfin tout ce genre de truc qui sont fait pour l'alignement).

[phil3001]

toutes les modifications que j'ai apporté ont étaient données plus haut.

Pourriez vous m'eclairez plus sur le sujet

que je dois rentrer comme ligne de code pour que le resultat soit identique sur internet explorer et sur firefox ?

merci