Look graphique d'un blog via CSS

Petit guide pour modifier graphiquement son blog.

I) Accéder au fichier CSS

- Ouvrir son blog en mode Admin
- Aller dans le second menu horizontal "Modification de mise en page"
- Aller dans la dernière option du menu vertical orange "Modifier fichier CSS"
- Le fichier CSS s'affiche dans la fenêtre de texte à droite.

II) Modifications dans le fichier CSS

1) Bandeau de titre :

Pour insérer l'image, après l'avoir hébergée sur internet, modifier le bloc cadretitreblog suivant comme suit :

- #cadretitreblog { indique le début du bloc
- la ligne Width indique la largeur de l'image (ici 740 pixels, à adapter à votre image)
- la ligne Height indique la hauteur de l'image (ici 131 pixels, à adapter à votre image)
- la ligne Background-image indique la localisation de l'image hébergée

Comment connaître les dimensions (hauteur / largeur) de votre image ?
- utiliser un programme d'image : voir sur mon blog ici :
http://www.blogg.org/blog-1780-date-2005-02-27-billet-111205.html
ou
- si l'image est affichée dans votre navigateur web, un clic droit sur l'image, puis choisir l'option "Propriétés". Dans la fenêtre qui s'affiche, la rubrique "Dimensions" vous indique ces deux valeurs en pixels.

2) Titre et sous-titre:

Le titre : bloc #titreblog{

Si le titre est dans le graphique, il faut "neutraliser" le titre sous forme de texte, mais sans le supprimer pour garder le référencement dans Blogg.org

- la ligne #titreblog{ indique le bloc à repérer et à modifier
- la ligne color indique la couleur des caractères (none = aucune)
- la ligne font-size indique la taille des caractères (0 = la plus petite)

#titreblog{
color: none;
font-size: 0px;

Idem pour le sous titre : bloc #soustitre{

#soustitre{
color: none;
font-size: 0px;

3) Posts :

Vous pouvez également mettre une image en fond de vos posts, le texte venant au-dessus :

.post{
width:545px;
background-image: url("http://mon_image_post.jpg ou gif ou png");

4) Menus :

Une image en fond de menu est possible, il faut identifier les blocs concernés :

#moblog{
#themes{
#source{
#archives{
#liensthemes{
#liensthemesbas{
#glossaire{
#ecran{

pour chacun, insérer deux lignes comme suit, pour indiquer :

- la ligne width indique la largeur de la colonne des menus (ici, 190 pixels. Ne pas prévoir une image plus large que la colonne !)
- la ligne background-image indique la localisation de l'image hébergée

width:190px;
background-image: url("http://mon_image_menu.jpg ou gif ou png");

=> Pensez toujours à sauvegarder (par un copier-coller dans le bloc-notes par exemple) le texte de la fenêtre CSS AVANT toute modification !

=> NE PAS MODIFIER les valeurs du fichier CSS par les formulaires de saisie proposés, cela remet à zéro toute votre personnalisation !