Personnaliser NoFrag I : Les outils

Vous êtes nombreux à vouloir modifier votre css mais vous n'y comprenez rien. Du coup vous laissez le css de base et vous attirez de moins en moins de visiteurs. Cet article est donc là pour vous permettre d'attirer le regard de votre visiteur en apprenant les bases du css.

Je voudrais tout d'abord préciser que tout ce que je connais je le tire de google (et parfois de CrumbY). Mais si vous vous interressez à cet article c'est que google et vous ca fait 2. Les termes que j'utiliserai sont miens et ne seront peut-être pas toujours les bons.

Pour partir sur de bonnes bases, virez votre Internet Explorer et installez Mozilla (ou FireFox). En effet, la plupart des webmasters adaptent leur site à Internet Explorer alors que c'est ce dernier qui devrait s'adapter aux normes css. Surtout que Billou vient d'annoncer qu'il n'y aurait pas de mise à jour majeure avant 2006. Mozilla (et la plupart des autres navigateurs) respecte les standarts du web et affichera donc votre page directement comme il faut sans devoir utiliser d'artifices.

Je vous conseille également d'installer Web Developer Extension pour Mozilla ou FireFox. Ce dernier, bien qu'un peu difficile à utiliser de premier abord, va nous être très utile.

Ensuite, il vous faudra un editeur css. Pour ma part j'utilise Notepad2 mais certains utilisent Notepad++ (que je compte moi-même utiliser maintenant) voir Notepad tout court. En effet, un simple editeur texte est suffisant pour faire votre css mais la coloration syntaxique ainsi que les tabs disponibles sous Notepad++ sont tout de même un plus.

Maintenant que vous possèdez les bons outils, copiez le css de base de nofrag sur votre disque dur. Nous allons partir de celui de base pour deux raisons. La première est que le blog lit d'abord le css de base avant de lire le vôtre. Ce qui risque de créer des crises de nerfs si le blog ne s'affiche pas comme vous voulez et que vous devez comparer votre css à celui de base pour retrouver l'élément qui vous gêne. Deuxièmement, il est beaucoup plus simple de reprendre le css de base et de le modifier plutôt que de devoir chercher partout dans la source ce qu'on veut.

Vous voilà donc avec le css dans votre editeur. La structure me semble assez claire, même pour quelqu'un qui n'y connait rien du tout. Allez sur un blog et faites Tools/Web Developer/Outline/Outline Block Level Elements. On va en avoir besoin pour comprendre le css. Sur votre blog vous devriez voir apparaitre des cadres rouges/verts/bleus qui correspondent aux blocks qui seront modifiables par la css.

Ensuite, faites Ctrl-u qui fera apparaitre la source du blog. C'est ici que c'est le plus compliqué car il va falloir rechercher les balises <div> et les faire correspondre à la feuille css. Ne vous inquiètez pas, je vous indiquerai les principales.

Vous voilà donc avec les bons outils en main. La prochaine fois je vous expliquerai comment changer les couleurs et je vous donnerai la structure des blogs NoFrag.

Kara propose un site de documentation css dont la mise en page est bien foutue. Si il y a des éléments que vous ne comprenez pas, faites un tour sur ce site. Moi je me contenterai juste d'expliquer le fonctionnement pour personnaliser son blog et le site NoFrag.