Jump to content
Patric

[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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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 ;-)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
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.


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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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é :(

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

J'ai galéré pendant une heure pour trouver une image qui ne s'affichait pas et je suis tomber sur ce post. En 2 min c'était réglé avec firebug, merci pour l'info, je pense que cet outil va vite me devenir indispensable.

++ Cyril

Share this post


Link to post
Share on other sites

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 !!!

Share this post


Link to post
Share on other sites

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 ;)

Share this post


Link to post
Share on other sites

Tu ne peux pas changer le code avec Firebug juste pouvoir réperer et voir en temps réel ce que les lignes de code affiche :).

Share this post


Link to post
Share on other sites
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. ;)

Share this post


Link to post
Share on other sites

: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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Dans le dossier js des template j'ai vu trainer un scene.js . Peut être que les infos que tu cherche seront la dedans

Share this post


Link to post
Share on other sites

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:

Share this post


Link to post
Share on other sites

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:

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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à

Share this post


Link to post
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:

Share this post


Link to post
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....)

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

si vous l'avez importé vous devriez pourvoir l'exporter! non?

vous avez fais comment?

 

sinon utiliser un logiciel type filezilla....

 

ps: répondez moi par mp pour ne pas interférer l'objet initial du post ;)

Share this post


Link to post
Share on other sites

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 +

Share this post


Link to post
Share on other sites

salut à tous aider moi mes je créé mon boutique sur un serveur local comment peut modifier les liens (image,......) dans mon boutique j'attends à votre réponse à mes remercie :) :) .

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

Petite question, peut etre stupide pour certain mais je ne trouve pas le fichier globall.css!!

 

Il est ou exactement?

 

Merci

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

Est-il possible d'éditer et visualiser les modifications CSS du module "blocktopmenu" de PS1.6 avec FireBug, alors que son contenu n'est visible que si le curseur est au dessus ?

Share this post


Link to post
Share on other sites

Bonjour,

Sa fait un moment que j'essaye de trouver une image qui de situe dans le récapitulatif panier avec firebug et je voit pas

Je veux supprimer l'image pour mettre une autre.

Comment on trouve l'emplacement d'une image avec firebug?

 

Cordialement

Edited by RebelleFleur (see edit history)

Share this post


Link to post
Share on other sites

Bonjour,

Si c'est bien une image et non une icône:

 

Clique droit sur l'image -> afficher l'image -> Le chemin d'accès à l'image est indiquée dans la barre d'adresse

Share this post


Link to post
Share on other sites

bonjours 

 

j ais un souci j ais acheter un thème et j arrive pas a la modifier sa s enregistre pas avec le live theme configurator je chage et la fin sa ne s enregistre pas help

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Bonjour,

 

Je n'arrive pas a identifier le nom de la feuille de style dans Firebug quand je passe par un partage de connexion avec mon iphone sur mon PC, s'affiche a la place le domaine du site que je visite

 

une idée ??

Edited by Advisuel (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
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...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More