Déplacer les éléments

[tim10]

Bonjour à tous

 

Je m'explique, je suis entrain de changer le site (qui est par défaut) sur prestashop et je voudrais savoir comment est il possible de déplacer les éléments (mon panier, barre de recherche, mon compte, se conncter, telle ou telle banniere ou image ... Tout quoi) , pas juste mettre en haut, à droite ou à gauche, le faire précisément et en direct, j'ai essayé avec firebug en inspectant l’élément et en utilisant l'option avec les rectangles (margin, border, padding ...), j'arrive à déplacer l’élément et je vois les changement dans style="...", le probleme c'est que j'arrive pas à trouver où est ce que je dois changer ou rajouter les changement que j'ai effectué sur firebug pour que cela soit defenitif dans le FTP OVH de mon prestashop, en gros je trouve pas le chemin pour effectuer mes changements. 

 

Du coup ma question est tout simplement comment fait on pour changer l'emplacement d'un élément ? ^^

 

Je vous remercie d'avance

[Xuân]

Bonjour,

 

tu peux le faire en CSS dans les fichiers associés ( sers toi de firebug pour les trouver ) mais je crois que ça peut poser problème pour l'affichage mobile.

Sinon, tu peux créer un hook à chaque endroit ou tu souhaites mettre les éléments et les greffer au dit hook.

 

Si tu viens d'un cms comme Wix ça peut perturber effectivement, le design est beaucoup plus dur à mettre en place sur presta, par contre le BO est bien meilleur.

[tim10]

Merci pour ta réponse Xuan, étant débutant dans le milieu du coup le déplacement d'un élément va se faire en CSS et non en HTML ? En ce qui concerne de retrouver le fichier en question n'y a t-il pas un moyen simplifié de retrouver le fichier à modifier comme par exemple un chemin nanana/blablabla/tralalala ... ? Dsl mais n'ayant pas une forte connaissance html/css ... c'est souvent incompréhensible à mes yeux ce que je vois dans firebug ^^

[Xuân]

Le déplacement ne se fera pas en HTML non ( les "style:" que tu vois sont des alias de CSS en fait, autant le faire directement en CSS ).

Pour la localisation des fichiers CSS : personnellement je me sers de mon navigateur avec F12 pour inspecter un élément : les styles associés s'affichent, avec le chemin associé jusqu'au fichier. En général, il est dans themes/nomdutheme/css/ (tu as notamment un énorme fichier global.css) ou dans nomdutheme/modules/nomdumodule/css/. Mais inspecte les éléments pour être sur, tu peux même faire les tests en live comme tu l'as déjà fait

[tim10]

Merci pour ta réponse, en effet quand je clique sur l'element "panier" (j'essaie de changer de place la barrer "panier" depuis deux jours sans espoire ...) je trouve l'emplacement, et quand je change le margin dans "apparence" à droite de firebug j'ai automatiquement un changement dans "style" (aussi à droite de firebug) (je sais pas si tu vois ce que je veux dire ^^) du coup dans le style j'ai le element.style qui appait avec mes changement mais le probleme c'est que quand je vais dans le blockart.css ya trop de chose, je comprends pas comment faire pour inserer ou changer l'element.style avec le margin que je veux ... je suis déséspéré j'ai l'impression de ne rien comprendre ...

[Xuân]

Si tu ne connais pas un peu le CSS tu vas avoir du mal oui ^^'

 

En gros ton element.style c'est un style provisoire juste pour ton navigateur quand tu fais tes modifs en live. Essaie de l'éviter.

Pour prendre l'exemple de blockart, j'ai voulu changer la couleur du bouton "commander". Avec F12, j'ai fais "inspecter l'élément" sur le bouton, j'ai vu que dans le HTML il avait un id "button_order_cart". Dans la feuille de style associée sur la droite de l'inspecteur d'éléments, y avait aussi un truc qui ressemblait à ça :

cart_block .cart-buttons a#button_order_cart span {
        padding: 7px 0;
        font-size: 1.1em;
        border: solid 1px #63c473;
        background: #43b155; }

Je vois que toutes les balises <a> ayant l'id button_order_cart (# pour les ID, . pour les classes en CSS) auront les propriétés d'en dessous.

Je fais mes tests, et quand j'ai trouvé les valeurs qui me conviennent, je regarde ou se situe la feuille de style qui est décrite dans l'inspecteur (le lien te donne le chemin, donc facile) et je modifie le fichier.

 

En l'occurrence pour mon cas, je me suis interessé au background et à la bordure, je sais que je peux régler les couleurs là. Après selon ce que tu veux faire, il y a plein de commandes en CSS. Pour le déplacement, joue avec les margin/padding par exemple. Par contre ça casse le thème mobile.

Edited June 19, 2015 by Xuân (see edit history)

[tim10]

Merci beaucoup pour ta réponse, bizarrement j'ai déjà réussi a changer le background ... c'est vraiment avec l'emplacement que j'ai du mal, j'arrive pas a trouver le margin (top, right, left ...) ou peu etre que j'arrive pas à trouver le bon margin car à chaque fois dans le fichier css il y en a plusieurs dans tous les cas je verrais ça ce soir des que je rentre à la maison, par contre tu dis que ça casse le thème mobile, il y a t-il un moyen d’éviter ça ?

Edited June 19, 2015 by tim10 (see edit history)

[Xuân]

Personnellement je ne connais pas le moyen propre de déplacer mes éléments non, mon site mobile est une atrocité.

Peut être en créant un hook personnalisé à chaque fois, j'avoue que je m'y suis pas énormément interessé.

Hésite pas à changer tes couleurs et autres par contre, moi les éléments qui sont partis en vrille sont juste ceux sur lesquels j'ai fait des margin / padding, dont j'ai changé la width ou que j'ai placé en absolute.

Edited June 19, 2015 by Xuân (see edit history)