Jump to content

[Tuto] Installation et utilisation de Firebug pour modifications du template (couleurs, images, ...)


Recommended Posts

Installation et utilisation de Firebug pour modifications du template

De nombreuses personnes viennent régulièrement demander sur ce forum comment modifier tel ou tel élément du template (couleurs, …) ou bien où se trouve telle ou telle image.

Voici donc un bref tuto expliquant comment installer et utiliser un outil bien utile qui leur permettra de trouver en quelques secondes réponse à leurs questions : Firebug.

Firebug est un add-on du navigateur Firefox.

Installer Firefox

Firebug ne peut être utilisé que sous Firefox, le navigateur de la fondation Mozilla, dont la réputation n'est plus à faire.

Se rendre à l'adresse http://www.mozilla-europe.org/fr/firefox/ pour télécharger Firefox.
Lors de l'installation :
* il est proposé de l'adopter comme navigateur par défaut (ce serait bête de s'en priver),
* on peut importer différents éléments depuis Internet Explorer (favoris, page d'accueil, etc.).

Installer Firebug

* Lancer Firefox.
* Se connecter à la page https://addons.mozilla.org/fr/firefox/addon/1843 pour accéder directement à Firebug, ou bien se connecter à https://addons.mozilla.org/fr/firefox/ et rechercher Firebug dans le champ de recherche.
* Une fois sur la page de Firebug, cliquer sur Ajouter à Firefox.
* Une boîte de dialogue apparaît pour demander confirmation. Attendre le décompte du bouton Installer (5 secondes) et cliquer sur Installer maintenant.
* Firebug s'installe.
* Redémarrer Firefox.
* Firebug apparaît maintenant dans la liste des modules complémentaires (Outils > Modules complémentaires) et une petite bébête apparaît en bas à droite de la fenêtre de Firefox.

Utilisation de Firebug pour inspecter les objets d'une page

* Ouvrir la page à analyser (par exemple une boutique PrestaShop).
* Cliquer sur la bestiole en bas à droite => un panneau s'affiche en bas de la fenêtre de Firefox.
* Cliquer sur le bouton Inspecter, en haut à gauche de ce panneau et balader la souris sur la page Web à analyser. Chaque élément survolé s'entoure alors d'un cadre bleu.
* Cliquer sur l'élément à analyser ; par exemple le logo PrestaShop en haut à gauche.
=> La partie gauche du panneau affiche alors la ligne de code correspondant à cet élément (en surbrillance).
La partie droite affiche tous les attributs CSS entrant en jeu dans la mise en forme de l'élément cliqué, ainsi que le fichier et la ligne où l'on peut trouver ces attributs.
Il est possible de modifier les valeurs des attributs CSS pour voir en temps réel l'impact sur les éléments concernés.

Voici un topic proposant un document détaillé : http://www.prestashop.com/forums/viewthread/40367


--------------------------------------------------------
template, thème, couleur, graphisme, background, fond

6786_qnAjN3uS4bZ3zqDkqz7E_t

6787_H1HhVAwzsOoRCPxgYKF4_t

  • Like 4
Link to comment
Share on other sites

j'en profite pour mettre ici des liens de documentations utiles pour s'auto-former (et poser moins de question)

html/css : http://www.alsacreations.com/tutoriels/

SMARTY : http://www.smarty.net/manual/fr/smarty.for.designers.php

jQuery : http://docs.jquery.com/Tutorials#Tutoriaux_en_Fran.C3.A7ais

et bien sur : http://www.prestashop.com/wiki/FR_Guide_du_graphiste/

Tout ce qu'il faut pour tordre dans tous les sens le template de base de prestashop.

  • Like 2
Link to comment
Share on other sites

Je pense qu'il serait utile que ce post soit en post-It de la partie graphisme


Malheureusement on ne peut pas mettre tous les tutos en post-it, ça ne ressemblerait plus à rien...

C'est d'ailleurs le but essentiel de ce topic :
http://www.prestashop.com/forums/viewthread/5668
qui est sensé regrouper tous les topics intéressants. Même si j'avoue avoir du mal maintenant à trouver le temps pour le tenir à jour.
Link to comment
Share on other sites

Je suis d'accord, mais il n'y a aucun post-it dans la partie graphisme et pourtant on y répond la même astuce une fois sur deux.
ça pourrait quand même avoir son utilité (tout le monde n'a pas les même réflexes pour chercher les infos)

Link to comment
Share on other sites

  • 3 weeks later...
  • 5 weeks later...
Installation et utilisation de Firebug pour modifications du template..........................................................................................................................................................................
..................
Il est possible de modifier les valeurs des attributs CSS pour voir en temps réel l'impact sur les éléments concernés.

--------------------------------------------------------
template, thème, couleur, graphisme, background, fond


est-il possible d' enregistrer directement les modification sans passer par un éditeur comme topstyle? il y a bien un onglet "editer" dans firebug mais je ne trouve pas la sauvegarde.
Link to comment
Share on other sites

Bonjour

Non, firebug n'est pas un client ftp, il ne communique pas avec le serveur qui héberge le site.

Une fois qu'on est satisfait des modifs ils faut les copier coller dans le fichier correspondant avec l'éditeur de texte ou de code de ton choix - et replacer le fichier sur le serveur.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 5 weeks later...

Il y a une application pour Mac qui fait le même boulot, et qui est vraiment géniale (il y a une version gratuite).
Elle s'appelle CSSEdit http://macrabbit.com/cssedit/
Seul problème, elle s'appuie sur le moteur html de Safari, donc faut ensuite vérifier que les modifications apportées fonctionnent sous les autres navigateur (mais bon, c'est un peu pareil avec Firebug)
A quand une appli de ce type permettant de simuler le rendu sur tous les principaux navigateurs ?

Link to comment
Share on other sites

  • 1 month later...
Bonjour

Non, firebug n'est pas un client ftp, il ne communique pas avec le serveur qui héberge le site.

Une fois qu'on est satisfait des modifs ils faut les copier coller dans le fichier correspondant avec l'éditeur de texte ou de code de ton choix - et replacer le fichier sur le serveur.


Bonjour
Je travaille en local pour le moment
Comment fait-on ces modifs

Bonjour,

Je rejoins la question ci-dessus
Avec Firebug c'est très bien de localiser le texte à modifier mais on ne sait pas forcément lorsque l'on est débutant
dans quel fichier faire la copie exemple " Propulsé par Prestashop "
J'ai la charte standard et désire changer les couleurs des modules de gris vers une autre couleur, je n'arrive pas
trop à saisir comment faire
Cordialement
Link to comment
Share on other sites

bonjour, j'effectue des modif sur le fichier html grâce a firebug, mais je ne trouve pas emplacement,t de ce fichier dans le dossier prestashop quelqu'un pourrais m'indiquer ou il se trouve s'il vous plait, j'ai juste trouver le global.css


Bonjour,

J'ai le même souci et ai fait le post précédent, pour le moment je n'ai pas trouvé et n'ai pas encore de réponse
Bonne soirée
Link to comment
Share on other sites

Firebug peut vous dire quelles sont les fichiers CSS concernés, mais pas quels sont les pages HTML étant donné qu'elles n'existent pas mais sont générées à la volée. Pour faire les modifications, il faut trouver les fichier TPL correspondant à la page que vous voulez modifier.

Link to comment
Share on other sites

Firebug peut vous dire quelles sont les fichiers CSS concernés, mais pas quels sont les pages HTML étant donné qu'elles n'existent pas mais sont générées à la volée. Pour faire les modifications, il faut trouver les fichier TPL correspondant à la page que vous voulez modifier.


Bonjour et merci pour ce renseignement

Je vais chercher dans les fichiers tpl, ce n'est pas très facile car il y en a un certain nombre

Autre souci, la possibilité de reclasser ou déplacer des catégories ou des sous catégories

Merci pour votre aide bénévole

Bonne journée
Link to comment
Share on other sites

oui merci, afin je suis arrivé a le comprendre tout seul, firebug indique quel module est concerné en fait sur le fichier html, les ficher tpl sont un peu plus dur à modifier mais on s'y retrouve merci pour votre réponse, et pour cet excellent logiciel, qui est en fait une base complètement modifiable, mais avec une tres solide base de créer, il suffit juste de faire test sur test pour arrivé à en comprendre le mecanisme.

Link to comment
Share on other sites

  • 3 weeks later...

Par contre avec Firebug !

j'ai noté que si tu changes une couleur dans un cadre par exemple, entre la couleur choisi #......... en y déposant le meme #........ il s'avère que j'ai des différences de couleur !

pourquoi je sais pas vraiment, mais si je choisi par exemple un bleu foncé, le bleu donné sera beaucoup plus claire

peu être que je manipule mal !

Link to comment
Share on other sites

  • 1 month later...

Mille mercis pour ce tuto !!!!

Il vient de me tirer une sacrée épine du pied : où se trouvent les éléments qui font appel au panier, pour pouvoir transformer Prestashop en simple catalogue. 4 jours que je cherchais (je sais, je suis mauvais), 10 minutes pour le faire une fois que j'ai installé firebug ;-P .

Le pire, c'est que grâce à ça, quand mon client aura compris l'intérêt de la vente en ligne, ça me prendra 10 minutes pour le remettre en place :cheese: .

Je vais (encore) passer pour un informaticien de génie !!!

Link to comment
Share on other sites

  • 1 month later...

Bonsoir;

je parle pas bien francais :P

c'est tres bien le FireBug eh! merci bcp pour le tuto, mais j'ai veut changer le code, mais je ne peut pas trouver un bouton de sauvgarder apres les changement que je realise...

Quelqu'un peut m'aider??

Merci BcP ;)

Link to comment
Share on other sites

  • 4 weeks later...
Bonsoir;

je parle pas bien francais :P

c'est tres bien le FireBug eh! merci bcp pour le tuto, mais j'ai veut changer le code, mais je ne peut pas trouver un bouton de sauvgarder apres les changement que je realise...

Quelqu'un peut m'aider??

Merci BcP ;)

une foi ton code repéré et modifié, tu va le chercher dans ton fichier presta-shop, tu l ouvre avec un éditeur (bloc note) tu modifie ton fichier avec les infos de firebug, tu enregistre et repose ton fichier via ftp. ;)
Link to comment
Share on other sites

  • 5 weeks later...

:gulp:

ça a l'air très intéressant, et surtout très utile, mais j'avoue non sans honte...je n'y comprends rien...

tout ça est quand même très compliqué quand on est néophyte :down:
j'ai téléchargé firebug lite, et je n'arrive pas à l'utiliser...

edit:
si c'est bon, je l'ai mis dans ma barre de favoris...donc quand je clique dessus, ça m'ouvre l'encart!

Link to comment
Share on other sites

  • 2 months later...

Bonjour

Oui c'est très utile. Ça marche très bien sur Mac.

Du coup j'ai du installer Firefox, ce qui me permet de visualiser avec Firefox (avec firebug) et Safari (mon navigateur habituel), et de voir des… différences… d'affichage…

Donc quand je modifie ou teste des pages, je regarde sur les 2 navigateurs, et je jette un œil sur un PC avec IE.

Merci pour l'info

Link to comment
Share on other sites

  • 2 months later...

Salut !
Sans prétentions, quelques conseils :

Une fois vos modifications effectuées, un snap shot du site sous différents navigateurs est toujours appréciable pour corriger le CSS et autres.

J'utilise http://browsershots.org mais il y en a d'autres.

@DJweb75 :"j’ai noté que si tu changes une couleur dans un cadre par exemple, entre la couleur choisi #……… en y déposant le meme #…….. il s’avère que j’ai des différences de couleur"
----> utilise Colorzilla qui propose beaucoup d'aides à l'instar de Firebug (le zoom d'image vaut le détour !), une nouvelle version vient d'arriver, néanmoins la pipette à apparemment une erreur de 1% (mm souci sous photoshop, rarement vu une pipette être fiable).

N'oubliez de valider votre site sur W3C, bien sûr !

Link to comment
Share on other sites

  • 2 months later...

Bonjour,

Merci pour toute vos indications ... Je cherche à debugger mon site qui a des problèmes d'interprétation CSS sous IE7 (problème de placement de quelques objets: http://www.DFphoto.fr). J'ai installé IE Debug Bar mais je ne comprends pas comment on peut faire des modification en live avec ce logiciel. J'ai tenté d'installé FireBug Lite mais je malgré avoir ajouté la ligne de script dans le header de mes pages, rien ne se lance lorsque je charge ma page... bref je galère !

Quelqu'un connait-il une astuce qui peut me permettre de debugger mon site sous IE7 aussi simplement que je le fais habituellement avec Firebug + Firefox ?

Merci par avance pour votre aide,

Dominique

PS: je hais IE

Link to comment
Share on other sites

  • 1 month later...
  • 4 weeks later...
Merci pour ce super programme. J'ai juste une question, comment savoir quelle page il faut modifier ? il ni à pas le titre de la page affiché quelques part ?merci


Le nom du fichier apparait à droite en bleu ainsi que le numéro de la ligne entre parenthèse.
Link to comment
Share on other sites

  • 1 month later...

Bonjour,

Avez-vous une astuce pour savoir quels éléments il faut modifier à l'intérieur d'un "mouseover" par exemple sur les tags des scènes de prestashop? On ne peut pas passer la souris à l'intérieur (bon il se trouve que sur prestashop il y a les fichiers scenes.tpl et scenes.css dédiés donc ce n'est pas trop difficile...)

Link to comment
Share on other sites

  • 5 months later...

Super idée tuto Zendik , mais du coup sur deux pages là je me sens bien seul : suis-je donc le seul a utiliser les outils dev de chrome ?

 

Ils sont présents en natifs et je dois dire qu'à par certains cas particuliers, je n'utilise presque plus du tout ff pour ça.

 

J'aime bien la console js aussi , chrome power ... :lol:

Link to comment
Share on other sites

  • 2 weeks later...

Super firebug, :) une question cependant : qu'est-ce que cela signifie lorsque une propriété du css est barrée.

 

En fait j'ai modifié blockcart.css avec color: red; et au bilan ça ne change pas la couleur et ça me barre la propriété. :mellow:

 

Dans le même ordre de grandeur je modifie le fichier blockcart.tpl pour supprimer le ligne "expédition" du panier mais elle apparaît toujours ... même si c'est mis en commentaires , voire même supprimé du fichier tpl !!! J'y comprends rien, il doit y avoir un détail qui m'échappe ! :huh:

Link to comment
Share on other sites

  • 2 weeks later...

Bonjour, oui c'est l'histoire de parent vs enfant, ça veut dire (en gros) que tu dois avoir un ID ou une balise plus haut qui à une propriété déjà établi....En gros, mais je te conseil devoir ça dans des site spécialisé sur la CSS.

 

bonne continuation

Link to comment
Share on other sites

  • 2 months later...
  • 3 months later...

Ce tutos est vraiment super merci.

 

Par contre je souhaite pour l'instant juste modifier la couleur de fond de ma boutique, puis de quelques autres éléments mais ou trouver les différents codes couleur possibles?

J'ai bien trouvé une liste de 18 codes, mais ce sont ceuxutilisés pour la version classiques prestashop.

En tapant des codes au hasards je tombe parfois sur d'autres coloris, mais celà n'est pas très pratique.

 

Bref, comment avoir la liste de toutes les nuances que l'on peu utiliser.

 

Merci pour votre aide.

Link to comment
Share on other sites

bonjour,

 

les nuances possibles sont infinies, cela dépend de vos besoins.

si vous avez crée un e maquette , récuperer les valeurs Héxadécimales (ex: #ffffff pour le blanc) sinon utilisez un site de gestion de couleurs en ligne comme http://kuler.adobe.com/#create/fromacolor

 

ensuite grâce à firebug, cliquez sur les éléments que vous souhaitez modifier pour connaître l'emplacement et sur quel code intervenir.

pour votre fond par ex, cela devrait vous orienter vers le #body{} au debut du fichier globall.css de votre thème.

donc éditez le fichier globall.css, repérez le #body{} et ajoutez background-color:#ffffff; pour mettre un fond blanc par ex.

 

#body { background-color:#ffffff; }

 

il est fort probable que le #body contienne déjà du code donc simplement rajouter le background-color: #ffffff; au reste.

 

voilà

Link to comment
Share on other sites

Merci beraucoup pour ce site de gestion de couleur. Je ne connaissais pas du tout et j'ai pu trouver le code d'un fond qui me convient bien c'est vraiment génial et très simple du coup. :)

 

Et merci pour le reste des précisions, j'avais bien repéré où changer mon code pour le fond de boutique, par contre, je n'arrive pas à comprendre comment éditer mes modifs pour aller les mettre dans prestashop. :unsure:

Link to comment
Share on other sites

pour votre fond par ex, cela devrait vous orienter vers le #body{} au debut du fichier globall.css de votre thème.

donc éditez le fichier globall.css, repérez le #body{} et ajoutez background-color:#ffffff; pour mettre un fond blanc par ex.

 

#body { background-color:#ffffff; }

 

il est fort probable que le #body contienne déjà du code donc simplement rajouter le background-color: #ffffff; au reste.

 

voilà

 

dans votre thème, il doit y avoir un dossier CSS qui contient un fichier globall.css

ça ne sera pas le seul à modifier si vous avez un gros travail d'adaptation mais en tout cas vous y trouverez l'ensemble de la structure du thème (body, title etc....)

Link to comment
Share on other sites

Bonsoir encore 1 question car j'ai beau être tout près enfin de faire ma modif je bloque encore.

 

J'ai bien trouvé mon fichier global.css dans mon dossier html.

Je me retrouve donc sur une liste de codes identique à celle que je vois dans firebug donc là çà va.

 

Par contre je ne peux pas faire mes modifications directement dedans. Donc je l'ai copié sur open office. J'ai fais ma modification, mais ensuite, impossible de la renvoyer dans le mettre dans mon fichier.css.

Comment faites vous?

Link to comment
Share on other sites

 

une foi ton code repéré et modifié, tu va le chercher dans ton fichier presta-shop, tu l ouvre avec un éditeur (bloc note) tu modifie ton fichier avec les infos de firebug, tu enregistre et repose ton fichier via ftp. ;)

 

 

En gros, comment reposer mon fichier via ftp?

Merci de votre aide

Link to comment
Share on other sites

  • 5 months later...

slt tous le monde j'ai un probléme : je utilise light box pour afficher la page produit mais le probléme c'est que j'affiche la page compléte par contre je veux afficher seulement le contenu le melieux de la page est j'arrive pas a effacé le header et le footer de ma pages produit +

Link to comment
Share on other sites

  • 2 weeks later...
  • 4 weeks later...
  • 4 months later...

Bonjour :)

je me permet de faire revivre se topic :rolleyes:

Je crée actuellement une nouvelle boutique en ligne et je viens enfin de savoir comment modifier la couleur du thème de prestashop.

En faite j'ai réussi a changer la couleur du fond sur les cotés, au milieu j'ai laisser en blanc et j'ai réussi a modifier les couleur du titre des blocks.

Mais la ou je bloc c'est pour modifier la couleur de l'en tete du site :(

Je ne sais pas ou appliquer les modif dans le fichier global css, ni meme sur firebug

Quelqu'un pourrait il m'aider svp ???

Cordialement :)

Link to comment
Share on other sites

  • 2 weeks later...

Bonjour :)

je me permet de faire revivre se topic :rolleyes:

Je crée actuellement une nouvelle boutique en ligne et je viens enfin de savoir comment modifier la couleur du thème de prestashop.

En faite j'ai réussi a changer la couleur du fond sur les cotés, au milieu j'ai laisser en blanc et j'ai réussi a modifier les couleur du titre des blocks.

Mais la ou je bloc c'est pour modifier la couleur de l'en tete du site :(

Je ne sais pas ou appliquer les modif dans le fichier global css, ni meme sur firebug

Quelqu'un pourrait il m'aider svp ???

Cordialement :)

 

Bonjour

Envoyez moi par messagerie privée via le forum ,un topo de ce que vous désirez

et je vous enverrais une réponse détaillé

Cordialement

Edited by Maury Girard (see edit history)
Link to comment
Share on other sites

  • 1 month later...
  • 2 months later...
  • 2 months later...

@Peha, j'ai appris à utiliser FireBug c'est effectivement génial. En revanche je ne parviens pas à trouver dans mon ftp les fichiers à modifier.

Je n'ai que des fichiers PHP ou TPL. Je pensais qu'il allait y avoir un fichier HTML unique avec toute la HP par exemple pour modification mais ça ne fonctionne apparemment pas comme ça...

Si vous pouviez m'aider ce serait vraiment top.

Bonne soirée à vous,

Alex

Link to comment
Share on other sites

  • 4 weeks later...
  • 1 year later...
  • 3 months later...
  • 2 months later...
  • 1 month later...
  • 4 weeks later...

Pour info, pour faire des modifs comme celle-ci, il n'y a pas besoin d'extensions, les outils de développement des navigateurs suffisent ;)

Pour Chrome, clic droit sur l’élément que vous voulez examiner, puis inspecter l’élément.

Pour Firefox, clic droit sur l’élément que vous voulez examiner, puis examiner l’élément.

 

Personnellement, le css est contenu dans des fichiers cache, alors je trouve sa un peut bizzare, non ?

Exemple : v_3_4969511065a3e168f23a5490a55c5a59_all.css

Link to comment
Share on other sites

  • 2 months later...
  • 4 months later...

Pour info, pour faire des modifs comme celle-ci, il n'y a pas besoin d'extensions, les outils de développement des navigateurs suffisent ;)

Pour Chrome, clic droit sur l’élément que vous voulez examiner, puis inspecter l’élément.

Pour Firefox, clic droit sur l’élément que vous voulez examiner, puis examiner l’élément.

 

Personnellement, le css est contenu dans des fichiers cache, alors je trouve sa un peut bizzare, non ?

Exemple : v_3_4969511065a3e168f23a5490a55c5a59_all.css

 

Bonjour,

dans Préférences puis Performances, il faut désactiver "Smart cache" pour les feuilles de style" ( mettre  NON ), cela permet de voir le chemin des fichiers css

Link to comment
Share on other sites

  • 3 years later...

Je pense qu'une majorité savent que Firebug n'existe plus depuis 2017, et se trouve remplacé directement par un Firefox spécial dev : Firefox Quantum: Developer Edition.

M'étant remis depuis peu à vouloir réutiliser Firebug, je  découvre donc cette version de Firefox, j'y reconnais bien Firebug et apprécie globalement cette version de Firefox.

 

Bref :

  • Que pensez-vous de Firefox Quantum: Developer Edition ?
  • Qu'utilisez-vous actuellement comme outils d'aide au dev ?

Pour inspiration et perfectionnement de chacun.

Edited by calypsoh (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...