L’autre bonne idée c’est bien entendu les tutoriels qu’on trouve sur le net. J’ai notamment consulté Openweb ou Alsacréations quand je butais sur des trucs que je n’arrivais pas à maîtriser par la simple comparaison.

Un fond blanc
La partie BODY de la feuille de style par défaut me dit que la couleur de fond « background » est #e1e1e1 (soit gris). Je la remplace derechef par #ffffff c’est-à-dire blanc. Et hop ! je recharge la nouvelle feuille, je regarde, et… zut, il y a une espèce de ligne verticale (celle qui faisait l’ombre sur le modèle) qui est toujours là. Diable diable… et puis je constate qu’en fait cette ligne commence sous la têtière, donc elle doit être dans la partie Page.
En effet, je vois une image dans la description de Page. C’est à cette ligne-là :

  • background: #FFF url(images/bg.png) repeat-y left;

Donc: fond blanc, une image (url) qui se répète verticalement (y) à gauche (left). Manifestement le fait que le nombre de fois où cette image est répétée ne figure pas doit signifier qu’elle se répète à l’infini.
Hop ! je vire cette ligne. Retour au blog.
Aaaaaaargh ! tout est collé au bord de la fenêtre du navigateur ! Mais enfin au moins c’est blanc, uniformément blanc (à part le bandeau mais je m’en occuperai plus tard). C’est que l’image servait aussi à créer une marge par rapport au bord du body. J’ajoute donc dans la partie body une petite ligne :

  • margin-left : 20px;

(ne pas oublier le point-virgule à la fin de la ligne)
De cette façon j’espère obtenir une marge constante de 20 pixels à gauche. Ouf! ça marche.

Supprimer la couleur au fond du bandeau
C’est un peu la même manoeuvre. Je supprime la ligne :

  • background: #545454 url(images/head.png) repeat-x 0 6px;

(les plus futés remarqueront qu’ici l’image se répétait horizontalement par “repeat-x”)
Voilà, ça commence à prendre tournure.

Placer une image en haut à gauche
J’ai confectionné une image qui me plaît bien pour agrémenter la présentation un peu austère maintenant. La mienne fait environ 180 x 180 pixels mais la taille n’a aucune importance. Je commence par la télécharger dans mon dossier Images de mon espace Free.
Voilà ce que je voudrais : que cette image soit présente tout le temps, même quand le lecteur fera défiler la page avec l’ascenseur. Si je la mets dans TOP elle bougera avec l’en-tête. L’endroit où la mettre est donc dans le BODY. J’ajoute donc une ligne dans le body :

  • background-image: url(http://MonSite.free.fr/Images/MonImage.png);

je ne veux pas qu’elle se répète. J’ajoute sous cette ligne une autre :

  • background-repeat: no-repeat;

Je ne veux pas qu’elle bouge quand on fait défiler la page, j’ajoute encore :

  • background-attachment:fixed;


Pour tout vous dire je ne suis pas certaine que ces deux lignes soient indispensables mais comme j’ai vu ça partout, je l’ai mis ;-).

La couleur des liens
Tant que j’y suis, je modifie dans cette partie body la couleur des liens par défaut dans cette ligne-là :

  • a {

color : #ff6E602F;
et je me garde dans un coin de la tête qu’il faudra que je m’occupe des autres couleurs de a (mais je n’ai pas encore tout compris).

… et autres menus détails
J’en profite pour modifier la présentation du titre du blog. Ça se passe dans la zone TOP. où je modifie la police avec « font-family » ; la taille de la typo avec « font-size » ; la couleur avec « font-color » (ne pas oublier aussi la couleur de la typo dans la sous-partie “a” de la partie top).

Et voilà. Satisfaite du travail accompli, je laisse reposer… en attendant la suite !