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

=> 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 !

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.

#cadretitreblog {
width: 740px;
height:131px;
background-image: url("http://mon_image_titre.jpg ou gif ou png");

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 :

- bloc .post{
- la ligne width indique la largeur du bloc central des posts (ici : 545 pixels. Ne pas prévoir une image plus large que le bloc !)
- la ligne Background-image indique la localisation de l'image hébergée

.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 !

</font />Les valeurs indiquées ci-dessous en pixels (740, 131, 545 et 190) sont celles de ce blog (Charmeur-Mutin).
Vous devez les remplacer par les valeurs correspondant à votre blog, bien entendu !