Pour modifier l'affichage de votre site il est préférable d'utiliser le navigateur Firefox.  De plus, nous recommandons fortement de vous équiper de Firebug.  En plus d'être un débuggeur JavaScript et un inspecteur DOM évolué, cette extension de Firefox est aussi un excellent outil d'aide à l'intégration XHTML/CSS.  Parmi ses principales fonctionnalités, on trouve un inspecteur de source HTML, styles associés, événements, mise en page. Cette dernière fonctionnalité est particulièrement intéressante à plusieurs niveaux :

  • Repérer facilement les erreurs de balisage à travers l'arbre du document;
  • Visualiser instantanément les règles de style associées à chaque élément sélectionné ainsi que leur provenance;
  • Désactiver certaines propriétés CSS et en visualiser en temps réel les effets sur l'affichage de la page;
  • Ajouter de nouvelles déclarations à l'instar d'un éditeur CSS.

 

Pour installer Firebug sur Firefox:

  • Aller au menu de Firefox Outils->Modules complémentaires
  • Faire une recherche : Firebug
  • Installer le module
  • Firefox doit redémarrer pour que l’extension fonctionne.

 

Pour utiliser Firebug:

Pour utiliser FireBug (après l'avoir installé), tu dois cliquer sur l'insecte incluse dans la barre d'outils de FireFox. Le code de la page apparait. En le survolant, les parties du site concernées se mettent dans une couleur spéciale et si tu cliques sur un élément, son style apparait à droite et tu peux le modifier (en local hein !). Tu peux aussi éditer l'HTML avec un aperçu en temps réel !

Ces modifications ne seront pas enregistrées sur le serveur d'hébergement web.  Ces modifications ne servent qu'à visualiser ce que votre site aurait l'air si vous lui appliquez les modifications souhaitées ou pour vous aider à identifier les erreurs.  

  • Mettre votre curseur sur l’item que vous voulez changer, cliquez sur le bouton droit de la souris;
  • Cliquer sur « Inspecter l'élément avec Firebug»;
  • Une nouvelle fenêtre apparaît à l’intérieur de la page;
  • Cette fenêtre est divisée en deux parties;
  • À gauche c’est le HTML, c'est là où vous trouverez le texte que vous voulez modifier.
  • À droite c’est le CSS, c’est ce qui affecte l’affichage de la page. Dans cette section, vous pouvez changer la valeur de la propriété pour voir le résultat que cela donnerait.

Exemple pour modifier la grosseur des polices de caractère:

  1. Il est affiché: font-size: 0.8em;
  2. Vous voulez le changer pour: font-size: 0.5em;
  3. Alors simplement remplacer le 8 par le 5 et vous verrez automatiquement votre page être modifiée.

Il se peut que vous deviez chercher un peu dans la fenêtre de gauche pour trouver la propriété.  Vérifiez à l'intérieur de la balise <body>, puisque c'est dans cette balise qu'est contenu les données de votre site.

Une fois que vous avez apporté une modification et que vous voulez la conserver pour la transférer sur votre site:

  1. Faire un une copie des éléments modifiés;
  2. Utiliser Firebug pour identifier le chemin du fichier à corriger en glissant votre curseur sur le nom du fichier qui apparaît dans la fenêtre de droite (Onglet "Style").  Si le fichier est dans votre template, vous pouvez le modifier du côté administrateur de votre site comme suit:
  3. Ouvrir le site administratif de votre site web;
  4. Retrouver et ouvrir le fichier à modifier;
  5. Sélectionner la fonction "Source" dans votre fichier;
  6. Identifier-retrouver l'endroit où cette modification doit être appliquée;
  7. Coller la modification et effacer, s'il y a lieu, la partie devenue inutile.

Si le ficher n'est pas dans le template:  Vous devrez utiliser votre compte FTP pour modifier votre fichier.

TRÈS IMPORTANT DE TOUJOURS FAIRE UNE SAUVEGARDE DE TOUT FICHIER AVANT DE PROCÉDER À TOUTE MODIFICATION.

Autres sources d'informations sur Firebug:

  • Un petit video
  • Un excellent document bien détaillé, créé par le Club des développeurs et IT Pro
  • Un bon survol des pratiques à l'utilisation de Firebug