BLOGG design

:: LA CSS (Cascding Style Sheet – Feuilles de Style en Cascade) ::

Tremblez pas comme ça, vous allez voir, c'est « aveugle » comme façon de procéder, mais efficace.
Je ne vais pas expliquer les CSS (cherchez des tutos sur le web – il y en a plein) mais juste ce qu'il faut modifier pour son design.

:: Allez dans la partie administration de votre blogg sur la partie modifier la mise en page et modifiez votre css.

On va prendre un exemple sur lequel j'ai laissé quelques erreurs de calage pour bien vous faire comprendre la suite. Donc ça sera CoCoRoOm.

Le fond :

Pour infos :
En gras = le contenu de la css
Width = largeur de l'élément contenant l'image et/ou les textes.
Height = hauteur de l'élément.

_________________________________________

body {
background-color : #336600;
}
_________________________________________

on aurait pu mettre une image en fond :
_________________________________________

body {
background-image: url('http://www.temca.net/images/bando.jpg');
}
_________________________________________
Le cadre titre :

#cadretitreblog{
width:740px; (vérifiez qu'il est bien de la taille en largeur de votre image)
height :140px ; (à la taille de la hauteur de votre image)
border: #00FF00; (couleur de la bordure)
border-style: dotted; (style du trait du bord du cadre : hachuré, plein, 3D, etc...)
border-top-width: 1px; (taille du trait « bas » du cadre)
border-right-width: 1px; (taille du trait « droite » du cadre)
border-bottom-width: 1px; (taille du trait « haut » du cadre)
border-left-width: 1px; (taille du trait « gauche » du cadre)
background-color : #003300; (couleur du fond du cadre, vous pouvez mettre une image, remplacez alors par background-image: url('http://www.temca.net/images/titre.jpg';)
text-align:left; (alignement left = à gauche, remplacer par center ou right selon vos critères)
}
_________________________________________

N.B. : Si 0 partout alors pas de cadre

Le cadre sous-titre :

_________________________________________

#titreblog{
width:740px; (= largeur de votre image)
height:140px; (= hauteur de votre image)
border: #00FF00; (couleur de la bordure)
border-style: dotted; (style du trait du bord du cadre : hachuré, plein, 3D, etc...)
border-top-width: 0px; (taille du trait « bas » du cadre 0 = pas de bordure)
border-right-width: 0px; (taille du trait « droite » du cadre 0 = pas de bordure)
border-bottom-width: 0px; (taille du trait « haut » du cadre 0 = pas de bordure)
border-left-width: 0px; (taille du trait « gauche » du cadre 0 = pas de bordure)
color: #333333; (= couleur du texte)
font-size: 47px; (= taille du texte)
font-family: Verdana, Arial, Helvetica, sans-serif; (= police du texte)
margin: 0; (=la marge du cadre par rapport à la fenêtre)
padding:5px; (= la marge entre le texte et le bord du cadre. Vous pouvez moduler en remplaçant par padding-bottom:5px; ou padding-left , etc... Si vous souhaitez plus d'espace à gauche ou à droite du cadre)
}
_________________________________________

En gros :

C'est le même mode opératoire pour tous les autres cadres (thèmes, moblog = Moi, archives, rechercher, etc...)
Retenez que pour mettre une image en fond de cadre il faut ajouter la ligne background-image: url('http://www.); ou remplacer la ligne background-color : #003300; par celle-ci.
Gardez également à l'esprit qu'il faut caler les width et height à la taille de vos images.