:: Relook Rapide ::

Pour les rapides :
Voir le résultat final : cliquez-ici

LE TITRE :

Définissez dans THE GIMP une taille d'image de fond de 150px de haut maxi et toujours 740px de large (pour vous faire une idée de ce que donne un titre de 150x740 px cliquez ici).

Dans l'espace de l'image créez votre design : rajoutez des images, faites des fondus, des carrés de couleurs, jouez sur le n&b des différents éléments. Mettez des courbes, des caractères webdings agrandis, enfin, lâchez-vous quoi...Enregistrez votre travail graphique dans le répertoire dédié de votre disque dur.

:: Ouvrez la partie administration de votre blogg et dans la mise en page affichez la css

:: Modifiez la partie cadre du tire en adaptant les tailles widht et height à la taille de votre image et en changeant l'adresse (url:) vers votre image
NB : Si vous oubliez un ";" ou "{ et }" ça ne marchera pas.

#cadretitreblog{
width:740px; (taille en largeur)
height:92px; (taille en hauteur)
background-image: url('http://www.temca.net/images/titre.jpg'); (adresse de l'image)
border: #FFFFFF; (couleur de la bordure du cadre)
border-style: groove; (style de trait du cadre : hachuré, plein, 3D,...)
border-top-width: 0px; (épaisseur de la bordure du bas du cadre) -> NB : 0 = pas de cadre
border-right-width: 0px; (épaisseur de la bordure droite du cadre)
border-bottom-width: 0px; (épaisseur de la bordure du haut du cadre)
border-left-width: 0px; (épaisseur de la bordure gauche du cadre)
background-color : #999999; (couleur de fond du cadre)
text-align:left; (alignement du texte on peut mettre right ou center)
}

:: Modifiez également le titre pour le caler à la taille de votre image :

#titreblog{
width:740px;
height:92px;
color: #333333; (couleur des caractères)
font-size: 47px; (taille des caractères)
font-family: Verdana, Arial, Helvetica, sans-serif; (police de caractères)
margin: 0; (marge par rapport au bord de l'écran)
padding:5px; (marge à l'intérieur du calque on peut moduler en mettant padding-bottom:4px; ou padding-top:4px; ou padding-left:4px; etc...)
}

LE SOUS-TITRE :

Il doit également faire 740px de large, ne dépassez pas les 30px de haut.

Soyez créatifs dans l'espace de travail, mais souvent laissez-le assez neutre, ou mettez la partie qui manque à l'image du TITRE.

:: Modifier la css :

#soustitre{
width:740px;
height:92px;
background-image: url('http://www.temca.net/images/bando.jpg');

color: #FFFFFF;
font-size: 17px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: #FFFFFF;
border-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
background-color : #333333;
text-align:left;
margin: 0;
}

Toutes seront à modifier selon le même principe. Pour vous accompagner encore un peu (c'est l'heure d'aller ce coucher là...) on va en faire une qui servira de base aux autres :

LES THEMES :

Selon la taille (en largeur = width) de votre partie THEMES (info que vous trouverez dans la partie modifier css : faites défiler les lignes de codes jusqu'à trouver ça : #themes et en dessous il y width=245px par exemple qui vous dit que ça fait dont 245 px de large.

:: Soit vous modifiez pour caler à votre image de fond,
:: soit vous modifiez le fond pour le caler à la css.

Pensez qu'un fond se répète à l'infini (sauf si on lui dit de pas le faire « norepeat ») donc la hauteur (height=200px ;) est à caler aussi et le graphisme derrière également (si la liste s'allonge trop : l'image va se répeter). Si la partie THEMES est plus grande que l'image, cette image va se répéter à gauche ou à droite et peut-être en dessous.

#themes{
width:246px;
height:180px;
color: #000000;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #CCCCCC;
margin-bottom:3px;
border: #000000;
border-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
text-align:left;

}

EN RESUME.
La taille des images doit être à la même taille que les parties qui les contiennent.