La modification pas a pas de la feuille de style CSS pour customizer son blog

On va modifier un peu la feuille de style CSS^[1] par defaut de tooblog^[2] pour faire un petit theme vert. (le theme final est moche mais c’est un pretexte pour donner un apercu de configuration d’une feuille de style)

La feuille de style par defaut est la suivante : style0.css

Pas a pas sur les modifications

1. Le fond tout blanc c’est triste, mettons un fond uni vert : body { background : #FFF #CFB; }
2. Un texte noir c’est trop classique, mettons le en vert fonce : body { color : #365; } On voit que tout le texte ne change pas de couleur, c’est normal, si une couleur a ete redefinie apres, c’est la nouvelle definition qui domine.
3. Changeons les titres qui sont restes noirs : #main h3 { color : #333 ; }
.post-title { color : #333 ; }
#sidebar h2 { color : #333 ; } En supprimant les lignes specifiant la couleur, les elements vont prendre la couleur par defaut de la page c’est a dire le vert #365 specifie dans le body
4. Les liens sont pas tres amusants la, changeons l’aspect des liens : on va faire des liens vert fonce qui deviennent rouge quand on passe dessus :a { color : #333 #150; }
a:hover {
color : #a43;
text-decoration : underline;
}
5. Le blog est pas tres lisible avec tous ces posts qui s’enchainent, affichons les posts dans des cadres distincts : ajouter l’element .post .post {
border: 1px solid #150;
background : #FFF;
}
6. Les posts sont trop proches les uns des autres, separons les avec une marge : .post {
border: 1px solid #150;
background : #FFF;
margin : 10px 0;
} Les valeurs des marges sont definies de la maniere suivante : margin : tour; (exple : margin : 5px;)
ou
margin : haut/bas droite/gauche;(exple : margin : 5px 10px;)
ou
margin : haut droite bas gauche;(exple : margin : 5px 10px 5px 20px;)
7. Le texte dans les posts colle aux bordures, definissons une marge interieure : .post {
border: 1px solid #150;
background : #FFF;
margin : 10px 0;
padding : 5px;
}
8. J’aime pas trop cette sidebar alignee a droite, alignons la a gauche : #sidebar (text-align : rightleft;}
9. Oh en fait je prefere quand le menu est a droite et les billets a gauche, modifions ca : #main { float : rightleft;}

   #sidebar (float : leftright;}

10. Ce « propulse par dotclear » qui traine dans l’hyperespace c’est pas genial, arrangeons cela : #footerou {
clear : right; clear : both;
position : relative;
}
11. Detachons un peu le blog du fond de la page : #page { border : 1px solid #AE9; background : #DFC;}
12. Agrementons les posts avec un petit dessin en fond : .post { background : #fff url(/images/fond.jpg) no-repeat bottom right; }fond.jpg etant une image transferee par le gestionnaire des images

Apres tous ces changements, on obtient ce truc tres moche :

Placons une banniere pour le titre :

1. Uploader la banniere que vous voulez sous le nom image.jpg via le gestionnaire des images (taille 780px*100px)
   Les images sont automatiquement redimensionnees si elles sont trop grandes, sauf la fameuse image.jpg
2. Dans le CSS, ajouter a #top : #top { background : #AE9 url(/images/image.jpg) no-repeat; }
3. Modifions l’aspect du titre , alignons le a droite et passons-le en vert :#top {
font-size : 2em 2.5em;
padding : 1em0.5em 0 0.6em 0;
text-align : right;
}
#top h1{ margin : 0 0 0 30px 0 30px;}
#top p{ margin : 0 0 0 30px 0 30px;}

Ce qui donne :

Et la feuille de style est celle-ci : style.css