Réorganisation page d’accueil

[Habapa]

Bonsoir, je n’arrive pas à réorganiser ma page comme dans l’exemple ( http://demonstration.prestashop-template.fr/product.php?id_product=6 ) où le logo en est haut, le bouton de recherche à l’intérieur du logo. Si quelqu’un savait comment faire ça m’aiderait bien, merci

[Patric]

Topic déplacé.

[scoobi]

Bonsoir,

Ce n'est pas un logo mais une image qui tiens sur tout le bloch header
Pour déplacer "rechercher", va dans global.css et ajoute des margin-top et margin-left...

[jeckyl]

Salut,

Tu peux aussi utiliser firebug pour regarder dans le css de ce site.

[Habapa]

Salut,

Tu peux aussi utiliser firebug pour regarder dans le css de ce site.

Merci pour cette astuce

[Habapa]

Bonsoir,

Ce n'est pas un logo mais une image qui tiens sur tout le bloch header
Pour déplacer "rechercher", va dans global.css et ajoute des margin-top et margin-left...

Ok merci, mais je ne trouve pas "rechercher" dans global.css, je travaille avec la version 1.3 de prestashop.

[Patric]

Ok merci, mais je ne trouve pas "rechercher" dans global.css, je travaille avec la version 1.3 de prestashop.

Firebug te permet de déterminer la classe ou l'ID CSS de ce bloc dans le fichier global.css.

[Habapa]

Ok merci, mais je ne trouve pas "rechercher" dans global.css, je travaille avec la version 1.3 de prestashop.

Firebug te permet de déterminer la classe ou l'ID CSS de ce bloc dans le fichier global.css.

Ok, pas mal ce module en effet, par contre pour déplacer un bloc les "margin-top, left" etc ça rapetisse (écrase) le bloc, y a t-il une autre commande qui permet de déplacer un bloc ?

Edit : j'ai fait la manip ci-dessous :

#header_links #header_link_contact a {
   background-image: url('../img/icon/contact.gif');
   margin-left:20px;

[Atch]

Ok merci, mais je ne trouve pas "rechercher" dans global.css, je travaille avec la version 1.3 de prestashop.

Firebug te permet de déterminer la classe ou l'ID CSS de ce bloc dans le fichier global.css.

Ok, pas mal ce module en effet, par contre pour déplacer un bloc les "margin-top, left" etc ça rapetisse (écrase) le bloc, y a t-il une autre commande qui permet de déplacer un bloc ?

Bonjour,

Oui la fonction de base de Prestashop...

Rendez vous dans votre admin et :

Admin/modules/positions...

Selon les "hook" vous pouvez déplacer l'odre d'affichage des modules...

Pour le header c'est le hook top...etc...

PS : La fonction "greffer" est aussi utile pour déplacer un block d'un hook à l'autre

V++

Atch

[jeckyl]

Salut,

Et comme toujours, je conseil http://www.alsacreations.com/tutoriels/

Bon, maintenant je vais vraiment être accusé de faire de la pub, mais c'est pour la bonne cause.

[Habapa]

Ok merci, mais je ne trouve pas "rechercher" dans global.css, je travaille avec la version 1.3 de prestashop.

Firebug te permet de déterminer la classe ou l'ID CSS de ce bloc dans le fichier global.css.

Ok, pas mal ce module en effet, par contre pour déplacer un bloc les "margin-top, left" etc ça rapetisse (écrase) le bloc, y a t-il une autre commande qui permet de déplacer un bloc ?

Bonjour,

Oui la fonction de base de Prestashop...

Rendez vous dans votre admin et :

Admin/modules/positions...

Selon les "hook" vous pouvez déplacer l'odre d'affichage des modules...

Pour le header c'est le hook top...etc...

PS : La fonction "greffer" est aussi utile pour déplacer un block d'un hook à l'autre

V++

Atch

Ok merci je vais tenter cette méthode, par contre si vous pouviez me dire ce que c'est qu'un "hook", je suis encore débutant sur PS.

[jeckyl]

Les hook, sont des zones d'accroche des modules, il en existe plusieurs en fonction des pages, mais tu as les plus utilisées, header, left, right, footer.

[Habapa]

Les hook, sont des zones d'accroche des modules, il en existe plusieurs en fonction des pages, mais tu as les plus utilisées, header, left, right, footer.

Ok merci, je suis parvenu à déplacer le bloc "contact" par cette méthode

[Habapa]

Une autre question : puis-je agrandir la taille d'un texte ("contact" par exemple) ?

[jeckyl]

CSS -> firebug -> http://www.alsacreations.com/tutoriels/

[Habapa]

CSS -> firebug -> http://www.alsacreations.com/tutoriels/

Merci pour le lien

[Habapa]

Pour ceux que ça intéresse, pour modifier la taille d'un bloc (ici "contact")

Code CSS original :

#header_links #header_link_contact a {
background-image: url('../img/icon/contact.gif');
}

Code CSS modifié (rajout de font-size + taille (meduim dans mon exemple))

#header_links #header_link_contact a {
background-image: url('../img/icon/contact.gif');

font-size: medium;

}