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

[Patric Codron]

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-e...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.mozil...efox/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.prestasho...iewthread/40367


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

Attached File(s)

•  Tuto Firebug - bestiole.png (8bytes)
  Number of downloads: 23661
•  Tuto Firebug - panneau.png (32bytes)
  Number of downloads: 24670

[Atch]

Merci Zendik, ça va faire gagner du temps...

Bonus : Il existe l'équivalent mais moins poussé pour IE

http://www.microsoft...&displaylang=en

V++

Atch

[Peha]

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

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

SMARTY : http://www.smarty.ne...r.designers.php

jQuery : http://docs.jquery.c...n_Fran.C3.A7ais

et bien sur : http://www.prestasho...e_du_graphiste/

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

[Patric Codron]

From 1239527607:

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.prestasho...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.

[Peha]

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)

[Damien Metzger]

Pour les autres navigateurs, prenez Firebug Lite -> http://getfirebug.com/lite.html

[ROSE]

Bonjour,

Il existe un véritable outil pour Internet Explorer, encore plus puissant et fiable que Firebug avec Firefox.

C'est DebugBar V5.2.2 pour IE.

Vous pouvez également effectuer des modifications de code en live.

http://www.debugbar.com/

Merci
Rose

[Julien Breux]

I love FireBug Lite !

[troc56]

From 1239461050:

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.

[Peha]

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.

[jimblog]

merci pour l'info ! ça me permet d'éviter d'emcombrer le forum de pleins de petites questions et par la même occasion de mieux comprendre le fonctionnement du CSS. Encore merci ;-)

[Alekhine]

Je viens d'installer un équivalent (DebugBar pour IE), pinaise, ça change la vie :o Merci pour l'info !!

[Matthieu Brunet]

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 ?

[dandav55]

From 1244016126:

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

[Laurent_hunter]

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

[dandav55]

From 1251303325:

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

[Laurent_hunter]

pourtant il existe vu qu'on peut faire des changement par firebug, j'ai beau chercher je le trouve pas, et sans cela, je peux faire aucune modification approprié :(

[Patric Codron]

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.

[dandav55]

From 1251349089:

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

[Patric Codron]

From 1251349604:

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

Hors sujet.

Merci de créer un topic pour dans la bonne section du forum.