Le TutoBlog

Pour les heureux utilisateurs de Firefox et d'un thème personnalisable, il existe un outil ô combien pratique lorsqu'il s'agit de modifier votre feuille de style CSS, plus communément appelé Da Webmaster Code : Web Developer Toolbar. Il permet entre autres de modifier votre feuille de style et de voir l'effet donné en direct, tout en étant sûrs de ne causer aucun dommage réel à la présentation de votre blog, car tout ce que vous ferez avec ne sera qu'éphémère : dès que vous le fermez, ça redevient comme avant. Et il suffit de copier/coller dans votre espace bulle les modifications réussies pour qu'elles soient définitives !

Voici le lien pour installer la barre d'outil Web Developer. Dans la section "Web Developer 1.1.5fr-FR pour Firefox"cliquez sur "installer" (ou "télécharger" si vous préférez avoir une copie du fichier d'installation, puis ouvrir le fichier.) Vous recevrez un premier message vous demandant si vous voulez autoriser joliclic.free.fr à installer un plug-in, autorisez-le. Cliquez une nouvelle fois sur le lien, cette fois un autre message apparaît qui vous avertit que le plug-in n'est pas "signé" et vous demande si vous êtes sûr de vouloir l'installer; installez-le tout de même.
Après redémarrage de Firefox vous vous retrouvez avec une jolie barre d'outils.

Maintenant, puisque le but est de modifier le Da Webmaser Code de votre blog, ouvrez-le, dans une nouvelle fenêtre de préférence car si vous devez changer d'onglet vous perdrez le travail en cours. 

Dans le menu "CSS", choisissez "Editer les CSS" (et non pas "Voir les CSS" qui ouvre un nouvel onglet non modifiable).

Il s'affiche en bas les feuilles de style CSS :

Vous avez trois onglets :

1. "mon_style.css" présente la feuille de style qui est générée automatiquement à partir des options que l'on a dans l'espace bulle ("remplacer les images", "modifier le couleurs" ...). Vous ne pourrez pas copier-coller les changements faits ici, par contre vous pouvez rapidement essayer différentes couleurs par exemple et noter les codes des couleurs qui vous ont plu pour les mettre dans les bonnes cases de "modifier les couleurs" dans votre espace bulle.
2. "style_core.css", c'est votre Da Webmaster Code, c'est donc lui qui nous intéresse le plus. Modifiez-le comme vous auriez modifié votre Da Webmaster Code, avec le stress de tout casser en moins ! À la moindre bêtise, il vous suffit de faire Ctrl+Zpour revenir un pas en arrière. Quand vous êtes satisfait(e) du résultat, copiez-collez vos changements dans le Da Webmaster Code de votre espace bulle.
3. "style_ubi.css" est une feuille de style que l'on ne peut pas modifier "pour de vrai" et donc nous est inutile.

Vous avez aussi la possibilité, si vous n'avez pas fini et que vous n'avez pas envie de mettre en ligne votre design qu'à moitié fait, d'enregistrer votre travail sur votre disque dur en cliquant sur la disquette, et la prochaine fois que vous vous y remettrez charger le fichier enregistré en cliquant sur le dossier pour reprendre d'où vous en étiez.
La paire de ciseaux efface l'onglet en cours, et les flèches en rond annule toutes les modifications que vous avez faites. Je n'ai pas compris l'utilité des deux boutons suivants, en revanche le champ de recherche se révèle très pratique pour ne pas avoir à lire tout le code pour trouver où on modifie le menu par exemple. Il suffit d'y écrire "menu" et de cliquer sur la loupe, et il vous emmène aux endroits où il trouve le mot écrit.