Forum

Bonjour,

Compte-tenu de la forte demande de support en ce qui concerne le graphisme de vos sites internet, je vais vous dévoilez mon outil magique.

N'oubliez pas de tenir compte des différences de rendu entre Firefox et Internet Explorer en citant que les plus utilisés.

Personnellement, j'ai accroché pour un plugin Firefox me permettant d'avoir rapidement un aperçu du code source de la page que je visite. Atout majeur, il permet de modifier la feuille de style, ceci entrainant une modification immédiate de la page sans la recharger.

Il vous faut donc Firefox, actuellement en version 3.0.1.
Une fois installé, allez dans Outils -> Modules complémentaires. Dans l'onglet Catalogue, saisissez 'Firebug' dans le champ de recherche. Lorsque vous avez trouver le plugin, cliquez sur Ajouter à Firefox. Après installation Firefox redémarrera.

Saisissez l'url du site à modifier. En bas à droite de la fenêtre du navigateur (au-dessus de l'horloge) cliquez sur l'insecte ( le bug ), la zone de navigation sera séparée en 3 parties.

Les deux nouvelles parties afficheront le code, pour l'une HTML, pour l'autre CSS.

Vous apprendrez progressivement à utiliser l'ensemble des fonctionnalités de ce plugin. Je vais vous expliquer celle dont vous avez besoin dans l'immédiat.

Rechercher d'abord sur la page visitée, la zone que vous souhaitez modifier et utiliser la barre de défilement pour qu'elle soit le plus haut possible. Cliquez sur le bouton "Inspecter". Là, attention aux yeux . Au passage de la souris, les différentes zones HTML survolées seront encadrées en bleu. Une fois que vous avez atteint la zone que vous souhaitez modifier, Cliquez !

Là, vous pourrez déplacer votre souris librement.

Dans la zone CSS, le code de la zone sélectionnée apparaitra en premier suivi de toutes les règles CSS des éléments dits "parent". C'est dans cette zone CSS que vous pouvez modifier le code pour faire des essais

Si vous double-cliquez sur une propriété existante, vous pourrez l'éditer. Si vous double-cliquez après le ; (point-virgule) d'une ligne vous pourrez ajouter une nouvelle propriété. Pour supprimer une propriété, double-cliquez sur la partie verte (nom de la propriété), supprimez son contenu et validez.

Le plugin possède d'autres fonctionnalités comme l'onglet Réseau qui peut être très enrichissant

A bientôt

Je l'ai depuis plusieurs mois maintenant mais merci de se tuto pour ceux qui ne l'on pas encore installé .

Merci de ce tuto - je ne connaissais pas du tout Firebug et viens de l'ajouter. Y a juste un truc que je ne trouve pas dans leur FAQ/Forum: les lignes barrées, dans la partie droite (St<le etc) cela veut dire quoi? pourquoi elles apparaissent barrées? cela veut-il dire qu'il y a redondance (à première vue, c'est mon impression...) ? j'essaie de donner un exemple:

http://www.phpboost.com/member/upload_popup.php?id=823



Merci :-)

Édité par ourse Le 04/10/2008 à 07h54

Celles supprimées sont redondantes oui mais cela signifie que la propriété a été redéfinie plus haut dans la liste. Par exemple,



ici la ligne color du body sera barrée.

merci - c'est donc ce que j'avais pensé. Même si je n'utilise (pas encore) phpboost, ce plugin de Firefoxe me sera utile

Bon, et pour Internet Explorer alors ?

DebugBar en version 5.1 est là
Installez-le, durant l'installation on vous demandera de couper IE si mes souvenirs sont bons.

Lancez IE, si vous ne le voyez pas, faites Affichage -> Volets d'exploration -> DebugBar.
Vous obtiendrez encore 2 zones supplémentaires.

L'onglet Dom sera actif, ainsi que l'onglet Source, plus bas. Pour modifier le code CSS, c'est au niveau de cet onglet Source qu'il va falloir chercher l'onglet Attrs. Il ne vous reste plus au'à sélectionner la zone HTML à modifier. Pour cela, cliquez et maintenez le bouton enfoncé, sur la cible qui se trouve sous l'onglet Dom. Lachez le bouton de votre souris lorsque vous avez atteint la zone à éditer.

Vous n'avez plus qu'à personnaliser votre thème

Dans DebugBar vous avez des fonctionnalités différentes par rapport au plugin de Firefox. Son avantage à lui et la possibilité de relancer, tester vos fonctions JavaScript. Vous pourrez le faire dans l'onglet Script (au niveau de Dom) L'onglet Script se divise en 3 parties : la liste des fonctions JS, l'aperçu de la fonction JS sélectionnée et une zone de saisie où vous pourrez faire vos essais en cliquant sur Run Javascript.

Édité par Lehan Le 04/10/2008 à 08h58

Ah j'oubliez !

Il existe un outil pas vraiment stable mais pratique pour les perfectionnistes

Cherchez dans Google, MultipleIE. Il vous permet de posséder sur votre machine plusieurs versions de Internet Explorer : IE5.5, 5.0 et encore d'autres plus vieilles.

Bon surf

Bonjour,



Merci de toutes ces infos.

Si le site est en ligne, on peut aussi le tester sous plusieurs navigateurs avec ce site :

Testez le design de votre dans différents navigateurs

Et bien ! super ce plug-in ! je ne connaissais pas !



Par contre j'utilise CSSVista



un logiciel sympa qui s'installe et s'utilise facilement.

Fenêtre de gauche, tous les .css du site

dans la partie droite deux fenêtres, une pour IE et une pour Firefox

Et vous voyez en "live" les modifications dans les CSS.



Le petit moins c'est que ce n'est qu'une copie des .css que vous visionnez en local, donc pour modifier il faut copier le code et modifier le .css via votre logiciel ftp préféré.



Vala !