[RESOLU] placer un bandeau tout en haut du site

[marty69]

Bonsoir,

Je cherche à placer un bandeau tout en haut de mon site sur toute la largeur et y intégrer l'un à la suite de l'autre les liens "mon compte", "contact", "sitemap"...

Dans l'idée j'ai fait un truc du genre :

- dans mon global.css j'ai rajouté un style #topsite dans lequel j'intègre mon image que je répète sur toute la largeur.

- Ensuite j'imagine qu'il faut insérer une ligne du type

dans le header.tpl pour afficher ce bandeau. J'avoue obtenir quelque résultats mais j'y vais à tatons et je n'aime pas trop ne pas savoir ou je met les pieds !

- ensuite j'imagine qu'il faut retoucher le CSS pour adapter les liens souhaités à ce fameux bandeau

Du coup mes question sont :

- ou insérer ce fameux DIV dans le header.tpl ? (si c'est bien ici que ca se passe !) D'ailleurs j'imagine qu'il ne suffit pas forcément d'insérer une simple ligne et qu'il faut modifier le tpl plus en profondeur... mais la ca me dépasse !

- quels CSS modifier pour adapter ces liens à positionner dans ce bandeau ? ce sont des modules greffés dans le hook TOP ?

Ouf ! faut souffrir pour apprendre !!!

Merci pour vos bons conseils

Bonne soirée à tous.

[minirj01]

Bonjour, pourquoi ne pas simplement mettre le bandeau en image background? Ensuite organiser les liens via le global.css.

[marty69]

bonjour,

Heu... je sais pas... bonne question !

Parcequ'en fait j'ai déja une image de fond, en fait une image répétée en x et y. Et je me disais que le bandeau devait aussi pouvoir prendre toute et s'adapter à la largeur de l'écran quelque soit sa résolution. Si je met en place une image de fond il faudra quoi qu'il en soit trouver une astuce avoir le rendu voulu ?

Je me disais qu'il était plus simple de le mettre en surrimpression... j'imagine que ca ne doit pas être très compliqué ? pour quelqu'un qui maitrise le sujet !

[Atch]

Salut,

Ce que tu souhaites faire c'est un peu comme ici ?

http://atchworks.free.fr/grunge/

Pour cela
j'ai appliqué un bg en x comme évoqué par minirj01 et modifier un peu le tpl header_links pour un affichage optimisé (+ css bien sure).

V++

Atch

[marty69]

Salut Atch,

Etonnant ! Ca ne pouvait pas être plus à propos, c'est précisément ce que j'essaie de faire pour le bandeau et les liens !!!

Alors voyons si j'ai bien compris ton template, pour moi :

- tu as un morceau de ton image de fond que tu appliques en bg et "repeat"

- tu as un morceau de ton bandeau que tu appliques également en bg en x en surrimpression sur ton fond

- tu modifie ton header_links.tpl et son css depuis le global.css pour adapter les liens au bandeau

Si j'ai juste... quelle est ta manière de procéder pour appliquer ce fameux bandeau ?
Comme dit dans mon premier message, j'essaie de l'insérer quelque part dans le header.tpl mais ca donne rien de bien convaincant...

Merci pour tes lumières

[Atch]

Dans l'ordre :

J'ai créer un DIV id="toppage" dans le header avant le DIV id="Page".
Ceci permet d'avoir le bandeau sur 100% de ton. A l'intérieur j'ai un autre div="header" qui me permet de centrer le contenu de mon bandeau.

Je n'applique qu'un seul BG, celui se trouvant dans "toppage" en X


Ensuite j'ai modifier le blockpermanentlinks.tpl :

>
<!-- Block permanent links module HEADER -->
</pre>
<ul>
{l s='contact' mod='blockpermanentlinks'}
{l s='sitemap' mod='blockpermanentlinks'}
[removed]writeBookmarkLink('{$come_from}', '{$shop_name|addslashes|addslashes}', '{l s='bookmark' mod='blockpermanentlinks'}');[removed]

{l s='Your Account' mod='blockpermanentlinks'}

       {l s='Welcome' mod='blockpermanentlinks'},{if $logged} {$customerName} ({l s='Log out' mod='blockpermanentlinks'})
       {else}
{l s='Log in' mod='blockpermanentlinks'}
       {/if}

</ul>
<br><!-- /Block permanent links module HEADER 

Pour y ajouter une partie du code se trouvant dans blockuserinfo.

un peu de css et voilà le bandeau est en place.

V++

Atch

[marty69]

Atch tu es mon maître !

Sur tes conseils avisés mon bandeau prend forme mais j'avoue qu'il reste quelques points noirs.
J''ai créé mon #toppage et la sur la mise en forme tout va comme je veux.

Ceci dit j'ai inséré le code suivant dans le header.tpl juste avant la balise

mais je doute que ce soit aussi simple ! car j'ai bien le bandeau comme je le souhaite, mais les liens sont toujours en dessous du bandeau et non à l'intérieur. J'imagine qu'il faut inclure un bout du code dans ces balises div toppage... mais lesquelles ?

<!-- AJOUT BANDEAU TOP PAGE -->
        
<!---->

Ensuite j'ai modifié mon blockpermanentlinks.tpl comme tu le suggérais en remaniant le css à ma sauce et ajoutant ces fameuses lignes supplémentaire récupérées du blockuserinfo.tpl pour avoir le lien "mon compte" et "se connecter". Cependant si les liens d'origine du permanentlinks s'affichent bien, impossible d'afficher les liens rappatriés du blockuserinfo. Quelle est l'astuce ?

Je sens que je touche au but mais je bloque c'est frustrant !

Merci pour tes conseils en tout cas.

[Atch]

aller pour faire avancer encore un peu :

                   {$HOOK_TOP}

Atch

[marty69]

eheh ! effectivement ca fonctionne mieux comme ca

Par contre je n'arrive toujours pas a afficher les liens "mon compte" et "se connecter" ! what's wrong ?
J'ai bien le module greffé dans le hook "top of pages" et les modifs ajoutées comme tu l'as suggéré mais nada !

PS : en passant dans ton template "grunge" c'est toi qui a créé le menu horizontal ou c'est un module que tu as récupéré ? si oui tu pourrais me dire lequel ? j'en ai pas trouvé de convaincant jusque la.

thx

[minirj01]

pour contourner insère les référents des liens manquants + icône éventuelle (dans le même fichier .tpl que celui renvoyant le sitemap et le bookmark) et garde les blocks en positions d'origine, le principal ce n'est pas le BO mais le global.css
Pour la barre de menu horizontale la meilleure sur Prestashop 1.2.4 c'est celle de Julien Breux partie modules du site, télécharge et installe-la après configure et stylise (le + long).

[marty69]

Bonsoir minijr et merci pour ta réponse.
Je vais effectivement me concentrer sur le css et les tpl.

En fait j'ai bien réussi à afficher les liens d'origine du blockpermanentlinks.tpl mais ceux que j'ai rajouté comme l'avait aussi suggéré Atch (les liens présents dans blockuserinfo.tpl) ne s'affichent pas !

mon blockpermanentlinks.tpl (les deux dernieres balises sont importées du blockuserinfo.tpl) :

>
<!-- Block permanent links module HEADER -->
</pre>
<ul>
{l s='contact' mod='blockpermanentlinks'}
{l s='sitemap' mod='blockpermanentlinks'}
[removed]writeBookmarkLink('{$come_from}', '{$shop_name|addslashes|addslashes}', '{l s='bookmark this page' mod='blockpermanentlinks'}');[removed] 

{l s='Your Account' mod='blockpermanentlinks'}

       {l s='Welcome' mod='blockpermanentlinks'},{if $logged} {$customerName} ({l s='Log out' mod='blockpermanentlinks'})
       {else}
{l s='Log in' mod='blockpermanentlinks'}
       {/if}

</ul>
<br><!-- /Block permanent links module HEADER --&gt

Ce qui m'étonne dans tout ca c'est que je ne retrouve pas les définitions des id spécifiés dans ce tpl dans mon global.css...

Il y a forcément quelque chose qui m'échappe, mais quoi ? Je sèche...

[GillesNew]

Bonjour à tous :

Etant novice, je cherche à faire quelque chose de BEAUCOUP plus simple (mais surement moins joli et moins abouti que vos sites...).

Je souhaite décaler à DROITE le pavé DEVISES et le pavé RECHERCHES.

Je pense que ma demande vous paraitra plus simple si vous suivez le lien www.luxuryspirit.com

Comment mettre les 2 modules qui se trouvent actuellement au centre vers la DROITE ?

Merci

Gilles

[minirj01]

Marty69 il n'y a pas un en trop dans ton code? En tout cas c'est le bon fichier, au pire simplifie les liens. Aussi fais des changements de css les liens apparaissent peut-être hors écran suivant ta résolution.

GillesNew ça se passe dans le fichier global.css de ton thème avec un float: right; tape ces mot-clefs + firebug dans le moteur de recherche pour + de précisions.

[marty69]

Bonjour,

Merci pour les suggestions, je continue de regarder tout ca mais jusque la impossible de trouver une soluion.

Une petite question. J'essaie de vérifier comme tu me l'a suggéré le CSS pour être sur que les infos sont affichées de manière visible, sait-on jamais ! J'ai modifié mon blockpermanentlinks.tpl mais dans le mien comme dans celui d'origine dont le code est le suivant :

<!-- Block permanent links module -->

   <!-- Sitemap -->

 
{l s='sitemap' mod='blockpermanentlinks'}

   <!-- Contact -->

 
{l s='contact' mod='blockpermanentlinks'}

   <!-- Bookmark -->

       [removed]writeBookmarkLink('{$come_from}', '{$shop_name|addslashes|addslashes}', '{l s='bookmark this page' mod='blockpermanentlinks'}', '{$img_dir}icon/star.gif');[removed] 


<!-- /Block permanent links module -->

je ne retouve pas les définitions class et id des DIV dans le global.css ! ou puis-je retrouver ces définitions CSS ?

Et au passage, à quoi sert le blockpermanentlinks_header.tpl dans le dossier du module blockpermanentlinks ?

[marty69]

Hummmm,

Bon et bien je suis définitivement à sec !

Finallement je suis arrivé à mes fin quand même mais en modifiant le blockuserinfo.tpl en attribuant l'ID utilisé dans le blockpermanentlinks.tpl aux liens souhaités.

Mais quand même j'ai un petit gout de frustration de défaite dans la gorge !

Merci à tous pour votre aide précieuse et... à très vite

[minirj01]

Sinon tu peux créer tes ids dans le blockpermanentlinks-header.tpl tu devrais ainsi avoir des lignes (ici sans les hyperliens href) comme

• 
  
• 
  

[benj0612]

Hello,

y aurait-il une solution finale et claire ?

C'esactement ce que j'aimerais avoir comme rendu (cf le sit cité plus haut).

Je suis débutant et ce serait très interessant pour tous.

Merci bien

B'