Modifier l'image de fond du header - Arriere plan du titre du blog

Modifier l'apparence de la bannière du blog blogger

Ce tuto est réalisé sur la base du modèle: rounders2

Introduction (à lire attentivement)
Comme vous pouvez le voir sur l'image ci dessous, les coins des cadres qui organisent ce modèle de blog sont arrondis.


Pour obtenir cet effet de style, on joue en css (par défaut dans le code html sur les blogs blogger) avec des images dont les bords sont arrondis. Le bandeau couleur bordeau ci dessus (appelé header) est contenu en html dans une balise [div] (je vous rappelle que je rempalce les signes < ... > par des crochets [ ... ] ) . Par défaut en html une balise div a des coins en angle droit. L'astuce consiste a placer une images aux coins arrondis en fond de balise div, dans le cas du modèle rounders il y a 2 images, une en haut de la div principale et une placé dans une autre div en bas.
Si je n'ai pas été assez clair n'hésitez pas à demander des précisions en commentaires ;-)


Remplacer le fond du header
Pour modifier l'image de fond ce n'est pas bien difficile: D'abord travailler votre image et ajustez ces dimensions à la taille de votre header (par défaut la largeur est défini dans la section outer-wrapper à 740px, je vous conseille de travailler une image de 740px mais laissez des bordures "neutres" de 10 px de chaque côté. Elles risquent d'être invisibles sur certains navigateurs. il vous faudra certainement agrandir ou réduire ensuite pour obtenir un bon résultat).
Quand votre image est prête, il vous faut la charger dans blogger. Pour cela je vous conseille d'ouvrir un post nommé "images" et enregistrez y votre bandeau.
Astuce: Quand vous publiez un message, vous avez en bas à gauche de l'éditeur un petit lien "options" cliquez dessus vous verrez à droite des options des champs dates et heures. Vous pouvez modifier la date et mettre une date ancienne, cela ne fera pas apparaitre votre message en page d'accueil, mais vous aurez créer un fichier de stockage (des images dans ce cas) ;-).
Voici le lien vers mon post (publiez il y a un mois environ et que j'ai anti-daté en aout images gpooo )
Une fois placez votre bandeau, allez à :

• Onglet modifier le code html
• et trouvez la section [img src=
• le code a trouver ressemble à peu de chose près à cela:
• -http://2.bp.blogspot.com/_cKfN28W6lv8/RYT2Uew... 8w/s320/le_nom_de_votre_image.png

copiez la partie qui va de http://.....à .png (ou .jpg ou .gif)
Enregistrez votre message.

Toujours sur la page de gestion de votre blog. Allez à:

• Onglet Modèle
• Modifier le code html
• Trouvez la section:

/ * Blog Header
----------------------------------------------- * /
#header-wrapper {
background:$titleBgColor url("http://www.blogblog.com/rounders2/corners_cap_top.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}

Dans cette partie il va falloir modifier la ligne:

#header-wrapper {
background:$titleBgColor url("http://www.blogblog.com/rounders2/corners_cap_top.gif") no-repeat

comme suit:

#header-wrapper {
background:$titleBgColor url("ICI_Collez_l'adresse_de_votre_image") repeat-y;

Je vous rappelle que l'on avait copier l'adresse de l'image, lors de la création du post spécifique intitulé: "images".

Il nous reste une opération a effectuer toujours dans le code html. Il faut éliminer l'image basse du header
Pour cela modifier dans le code html, la section:

#header {
background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}

modifier le code comme suit:

#header {
background: none;
padding:0 15px 8px;
}

Enregistrez vos modifications et visualisez, ça devrait marcher ;-).

Je n'ai pas parler de la hauteur de l'image à sa création et vous aurez peut être remarquez qu'on la fait se répéter en y (repeat-y) dans le code.
En fait la hauteur du bloc header n'est pas défini dans le modèle. Si votre titre de blog est très long les retours à la ligne automatique vont étirer le bloc en hauteur.
Je ne peux vous donner de meilleur conseil que d'essayer (la bidouille quoi) ou bien de définir une hauteur dans la section:

#header-wrapper {
background:$titleBgColor url("http://www.blogblog.com/rounders2/corners_cap_top.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
height: 80px;
}

Evidemment j'ai mis 80px au hasard vous attribuez la hauteur que vous souhaitez.

Sur le thème Rounders je vous conseille de faire des coins arrondis à votre images pour que l'ensemble reste cohérent. Par contre si l'image doit se répéter (titre de blog long) le rendu ne sera pas terrible, il faudra surement agrandir votre image en hauteur dans ce cas.

Voilà la manoeuvre n'étant pas très simple, n'hésitez pas à demander des préscisions en comments
++ ;-)

Tuto réalisé avec le modèle de blog: Rounders2