Modifications CSS d’un site à la volée (Chrome et Firefox)

13 décembre 2012 by in category Internet tagged as , , with 0 and 0
Home > Blog > Internet > Modifications CSS d’un site à la volée (Chrome et Firefox)

Il peut parfois arriver de vouloir changer un élément sur un site, une couleur, centrer un élément, l’aligner, le déplacer etc.. Nous parlons ici de modification CSS.

Pour se faire nous allons voir la méthode à la volée qui a été rendue possible grâce à l’extension Firebug pour Firefox, cette fonctionnalité est présente nativement dans Google Chrome. C’est  à partir de ce dernier qu’a été rédigé cet article. On évite donc Internet Explorer lorsque l’on souhaite développer un site, si ce n’est pour tester le rendu sur ce navigateur plus que capricieux.

Nous allons prendre l’exemple de ce site en y ajoutant une couleur et une texture d’arrière-plan. Ces modifications se font très simplement grâce au module intégré.

module modification site

Une fois la couleur et la texture choisie, nous remarquons qu’il y’a un léger soucis d’affichage au niveau du titre du site et du menu de navigation primaire.

menu navigation

L’arrière-plan les rend peu lisible, il faut donc définir une couleur d’arrière plan à ces 2 zones qui permettra de délimiter les zones et donc les rendre plus lisibles.

Dans Chrome on fait un clic droit sur le titre > Inspecter l’élément. La fenêtre du navigateur se divise alors en deux parties, repérez la partie à droite, elle vous indiquera le nom de la zone, ici  #logo.

css de la zone

Cliquez ensuite sur none et faites entrée pour ajouter une nouvelle ligne à la volée. Ajoutez-y le code CSS désiré, ici nous modifions le background-color et nous lui assignons la valeur white. Si vous ne connaissez pas les balises CSS pas de panique, une liste déroulante apparaît chaque fois que vous tapez une lettre.

Par exemple lorsque l’on tape la lettre b, chrome nous propose les balises existantes.

css suggestion

css modifié

Cette modification a donc été faite à la volée, ce qui veut dire que vous êtes seul à la voir. Pour la rendre visible par tous les internautes visitant votre site vous devez intégrer cet ajout dans votre gestionnaire de thème. Une option permettant de modifier le code CSS de votre site est présente, il vous suffit de copier le code ajouté, et le tour est joué.

 

✅ DigiSud ✅