Si vous souhaitez réaliser votre propre feuille de style CSS

css

Nous avons présenté dans deux précédents articles les feuilles de style CSS, et leur utilisation conjointe avec l’extension Firefox Stylish. Voici maintenant quelques conseils si vous souhaitez vous lancer dans la création de votre propre feuille de style CSS pour un site donné.

a) Récupérez la feuille de style CSS du style Web en question.

  1. Affichez le code source de la page (combinaison de touches ctrl+U), et recherchez l’emplacement de la feuille de style CSS. Pour ce faire, faites la combinaison de touches ctrl+F et recherchez la chaine de caractères « .css« .
  2. Vous obtenez alors soit une adresse internet entière, par exemple dans le cadre de mon blog, vous allez tomber sur http://s3.wordpress.com/wp-content/themes/pub/garland/style.css?m=1233010721b.
  3. Sinon vous pouvez tomber sur une adresse relative (qui ne commence pas par http:// mais par /quelquechose). Auquel cas vous pourrez généralement reconstituer l’url entière de la feuille de css en accolant l’adresse realtive à l’adresse globale du site pour obtenir une adresse du style http://www.monsite.com/quelquechose.
  4. Enregistrez le contenu texte de la feuille de style que vous obtenez sous un nom quelconque par exemple CssPersonaliséMonSitePointCom.css (en n’oubliant pas le plus important, l’extension .css).

b) Modifiez là à votre convenance en vous inspirant de l’existant.

  1. D’abord il y a des choses complètement évidentes. Par exemple l’attribut background-color de la balise body désigne évidemment la couleur d’arrière plan du site. Allez sur code-couleur.com, choisissez une nouvelle couleur qui vous convient mieux, et remplacez le code hexadécimal de la feuille de style par celui que vous donne le site pour la nouvelle couleur choisie.
  2. Ensuite comparez à grand renfort de ctrl+F quelles sont les correspondances des balises moins évidentes. Dans ce cadre l’utilisation de Firebug vous sera sans doute d’un grand secours tant pour établir les correspondances que pour avoir un petit aperçu de ce que vos changements vont donner.

c) Testez votre feuille de style sur le site concerné:

  1. Repérez l’icone de Stylish en bas à droite du navigateur (elle ressemble à une feuille blanche avec un pinceau) et son nom apparait lorsque vous passez la souris dessus. Sinon vérifiez que vous avez bien installé Stylish.
  2. Cliquez dessus, passez la souris sur « Ecrire un style« , faites votre choix dans le menu déroulant. Puis copiez collez votre feuille de style dans le cadre qui s’affiche en laissant en tête le code par défaut.
  3. Validez, raffraichissez la page, et profitez :).

Je précise que je n’ai pas encore testé d’écrire ma propre feuille CSS dans ce cadre là. Si jamais le besoin s’en fait sentir, ou si l’un d’entre vous trouve quelque chose de pas clair et me le demande, j’éditerai pour expliquer commen pallier aux difficultés rencontrées éventuelles. Ceci dit tout me parait assez clair, et pour les anglophones, l‘aide de Stylish est très bien faite.

Publicités

Une réflexion au sujet de « Si vous souhaitez réaliser votre propre feuille de style CSS »

  1. Ping : Changez la présentation des sites Web que vous visitez « Aldian’s Blog

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s