Maintenant voici le code avec les modifications, tout ce que j'écris en rouge est à titre d'explications et ce qui est en vert est ce que vous pouvez ajouter avec le lien de vos images selon vos désirs.
Je ne connais moi-même pas encore tout et donc ne vous étonnez pas de ne pas voir d'explications pour tout !
Body est le fond entier de votre blog.
body {
margin: 0px
0px 0px 0px;
text-align:
center;
background-color: #9C5E8A;
Le code ci-dessous en vert est le fond entier,
chez moi des fleurs, voyez sur ma capture d’écran.
Mettez votre lien de votre image à la place de mon lien.
background-image:
url("http://storage.canalblog.com/92/66/144645/11204421.jpg");
background-repeat:
}
Container ce sont les Marges cotés extrêmes de votre blog.
#container {
width: 900px;
padding:
0px;
background-color: #FFFFFF;
Le code ci-dessous en vert est le fond bleu avec des coeurs chez moi, voyez sur ma capture d’écran.
Mettez votre lien de votre image à la place de mon lien.
background-image:
url("http://storage.canalblog.com/44/24/144645/5770294.gif");
background-repeat:
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
margin-right:
auto;
margin-left:
auto;
}
Content ce sont les pages des messages de votre blog.
#content {
float:
left;
width:
500px;
background-color: #FFFFFF;
Le code ci-dessous en vert est le fond rouge avec des coeurs chez moi, voyez sur ma capture d’écran.
Mettez votre lien de votre image à la place de mon lien.
background-image:
url("http://storage.canalblog.com/13/74/144645/5770348.jpg");
background-repeat:
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
overflow:
hidden;
}
Rightbar c’est la colonne des liens de droite de votre blog.
#rightbar {
float:
left;
width:
200px;
background-color: #FDF7FB;
Le code ci-dessous en vert est le fond couleur or chez moi,
voyez sur ma capture d’écran.
Mettez votre lien de votre image à la place de mon lien.
background-image:
url("http://storage.canalblog.com/58/78/144645/5796653.png");
background-repeat:
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
overflow:
hidden;
}
Leftbar c’est la colonne des liens de gauche de votre blog.
#leftbar {
float:
left;
width: 200px;
background-color: #FDF7FB;
Le code ci-dessous en vert est le fond couleur noir/bulles
chez moi, voyez sur ma capture d’écran.
Mettez votre lien de votre image à la place de mon lien.
background-image:
url("http://storage.canalblog.com/43/28/144645/5796665.jpg");
background-repeat:
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
overflow:
hidden;
}
Topbar-logo si je ne me trompe pas, sont la couleur des bords,
fonds de la bannière d’origine.
#topbar-logo {
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
background:
#F4EFF7;
height: Opx;
display:
none;
}
div .logolink a {
display:
block;
text-decoration:
none;
width:
100%;
height:
0px;
}
topbar c’est la barre de titre de votre blog.
#topbar {
background-color: #F4EFF7;
Le code ci-dessous en vert est le fond couleur parme chez moi
(fond de la bannière), voyez sur ma capture d’écran.
Mettez votre lien de votre image à la place de mon lien.
background-image:
url("http://storage.canalblog.com/42/17/144645/5816051.jpg");
background-repeat:
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
padding:
10px;
display:
block;
}
a {
text-decoration:
none;
}
A :link
sont la couleur, police des liens de votre blog.
a:link {
color: #6C2A4B;
text-decoration:
underline;
}
A :visited
sont la couleur, police des liens de votre blog après les avoir cliqué.
a:visited {
color: #6C2A4B;
text-decoration:
underline;
}
A :active sont la couleur,
police des liens de votre blog lorsqu’ils sont activé.
a:active {
color: #6C2A4B;
text-decoration:
underline;
}
A :hover
sont la couleur, police des liens de votre blog lorsqu’on pointe dessus.
a:hover {
color: #6C2A4B;
text-decoration:
none;
}
h1 {
margin: 0px;
padding:
0px;
}
h2 {
margin:
0px;
padding:
0px;
}
h3 {
margin:
0px;
padding:
0px;
}
#topbar h1 {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #7F1B58;
font-size:
xx-large;
font-weight:
bold;
font-style:
normal;
text-align:
left;
}
Topbar a sont la couleur, police …du grand titre d’origine.
#topbar a {
text-decoration:
none;
color: #7F1B58;
}
Topbar h2 sont la couleur, police …du sous-titre de la bannière
d’origine.
#topbar h2 {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size:
small;
font-weight:
normal;
font-style:
normal;
text-align:
left;
}
.blogbody {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size:
small;
font-weight:
normal;
font-style:
normal;
text-transform:
none;
padding:
10px;
text-align:
left;
line-height:
150%;
}
Blogbody h2 c’est tout ce qui va avec la date d’un billet.Police, contour,style,
etc…
.blogbody h2 {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #591B3A;
font-size:
small;
font-weight:
bold;
font-style:
normal;
text-transform:
none;
text-align:
left;
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
Le code ci-dessous en vert est le fond couleur brun chez moi
(fond de la date), voyez sur ma capture d’écran.
Mettez votre lien de votre image à la place de mon lien.
background-image:
url("http://storage.canalblog.com/86/23/144645/5895991.jpg");
background-repeat:
margin-bottom:
10px;
padding:
0px;
}
Blogbody h3 c’est tout ce qui se trouve dans et le
cadre même des titres des billets.
.blogbody h3 {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:
small;
font-weight:
bold;
font-style:
normal;
text-transform:
none;
text-align:
left;
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
Le code ci-dessous en vert est le fond couleur blanc chez moi
(fond du titre de votre message), voyez sur ma capture d’écran.
Mettez votre lien de votre image à la place de mon lien.
background-image:
url("http://storage.canalblog.com/73/56/144645/5770472.jpg");
background-repeat:
margin-bottom:
10px;
padding:
0px;
}
Blogbody p ce sont la couleur, police, etc… dans les billets/messages que vous créez.
.blogbody p {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size:
small;
font-weight:
normal;
font-style:
normal;
text-transform:
none;
text-align:
left;
line-height:
150%;
margin-bottom:
10px;
}
Blogbody .itemfooter ce sont
la couleur, police, etc… dans les cadres à la fin
d’un billet ( posté par, etc…).
.blogbody .itemfooter {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size:
x-small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align:
left;
margin-bottom:
25px;
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
2px;
border-color: #;
Le code ci-dessous en vert est le fond couleur bleu chez moi
(fond du pied de votre message), voyez sur ma capture d’écran.
Mettez votre lien de votre image à la place de mon lien.
background-image:
url("http://storage.canalblog.com/08/71/144645/5770199.jpg");
background-repeat:
padding:
0px;
clear:
both;
}
.navlinks {
padding:
10px;
}
Navilinks .title ce sont la
couleur, police, etc…des titres de vos colonnes.
.navlinks .title {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #591B3A;
font-size:
small;
font-weight:
bold;
font-style:
normal;
text-transform:
uppercase;
text-align:
left;
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
Le code ci-dessous en vert est le fond couleur rose chez moi
(fond des titres de vos colonne de gauche et droite), voyez sur ma capture
d’écran.
Mettez votre lien de votre image à la place de mon lien.
background-image:
url("http://storage.canalblog.com/87/40/144645/5770467.jpg");
background-repeat:
padding:
0px;
}
.navlinks ul {
padding:
0px;
margin: 0px
0px 20px 0px;
list-style-type:
none;
margin: 0px
0px 20px 0px;
}
Ce sont la couleur, police, etc… de
la colonne des liens à droite et/ou gauche.
.navlinks li {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size:
x-small;
font-weight: normal;
font-style: normal;
text-align: left;
line-height:
150%;
margin-top:
10px;
}
.navlinks .item {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size:
x-small;
font-weight: normal;
font-style: normal;
text-align: left;
line-height:
150%;
margin-top:
10px;
margin-bottom:
10px;
}
C’est le calendrier.
#calendar {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size:
x-small;
line-height:
150%;
padding:
2px;
margin-bottom:
20px;
}
#calendar
table {
width:
100%;
padding:
2px;
border-collapse:
collapse;
border:
0px;
}
#calendar
caption {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size:
x-small;
font-weight:
bold;
text-align:
center;
text-transform:
uppercase;
padding:
3px;
}
#calendar th {
font-weight:
normal;
text-align:
center;
}
#calendar
td {
text-align:
center;
}
.image {
text-align:
left;
margin-bottom:
20px;
}
.navlinks img {
border-top-style:
solid;
border-right-style:
solid;
border-bottom-style:
solid;
border-left-style:
solid;
border-width:
1px;
border-color: #000000;
}
#album-container
{
width:
900px;
padding:
0px;
background-color: #FFFFFF;
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
margin-right:
auto;
margin-left:
auto;
}
#album-content
{
float:
left;
width:
550px;
background-color: #FFFFFF;
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
overflow:
hidden;
}
#album-nav {
float:
left;
width:
350px;
background-color: #FFFFFF;
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
overflow:
hidden;
}
.albumcol table {
padding:
2px;
border-collapse:
collapse;
border:
0px;
font-size:
x-small;
}
.albumcol td {
text-align:
center;
}
.albumbody {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size:
small;
font-weight:
normal;
font-style:
normal;
text-transform:
none;
padding:
10px;
text-align:
left;
line-height:
150%;
}
.albumcol {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size:
small;
font-weight:
normal;
font-style:
normal;
text-transform:
none;
padding:
10px;
text-align:
left;
line-height:
150%;
}
.albumcol h3 {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:
small;
font-weight:
bold;
font-style:
normal;
text-transform:
none;
text-align:
left;
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
margin-bottom:
10px;
padding:
0px;
}
.albumbody h2 {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #591B3A;
font-size:
small;
font-weight:
bold;
font-style:
normal;
text-transform:
none;
text-align:
left;
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
margin-bottom:
10px;
padding:
0px;
}
.albumbody img {
border-top-style:
solid;
border-right-style:
solid;
border-bottom-style:
solid;
border-left-style:
solid;
border-width:
1px;
border-color: #000000;
}
.albumcol img {
border-top-style:
solid;
border-right-style:
solid;
border-bottom-style:
solid;
border-left-style:
solid;
border-width:
1px;
border-color: #000000;
margin:
2px;
}
.albumbody p {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size:
small;
font-weight:
normal;
font-style:
normal;
text-transform:
none;
text-align:
left;
line-height:
150%;
margin-bottom:
10px;
}
.albumcol p {
font-family:
Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size:
small;
font-weight:
normal;
font-style:
normal;
text-transform:
none;
text-align:
left;
line-height:
150%;
margin-bottom:
10px;
}
.clear {
clear:
both;
height:
0px;
line-height:
0px;
}
En final voilà ce que celà donne, vous n'êtes bien sûr pas obligé de mettre tout les fonds, moi je vous ai simplement indiqué où l'on sait en mettre.
body {
margin: 0px 0px 0px 0px;
text-align: center;
background-color: #9C5E8A;
background-image: url("http://storage.canalblog.com/92/66/144645/11204421.jpg");
background-repeat:
}
#container {
width: 900px;
padding:
0px;
background-color: #FFFFFF;
background-image: url("http://storage.canalblog.com/44/24/144645/5770294.gif");
background-repeat:
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
margin-right:
auto;
margin-left:
auto;
}
#content {
float:
left;
width:
500px;
background-color: #FFFFFF;
background-image: url("http://storage.canalblog.com/13/74/144645/5770348.jpg");
background-repeat:
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
overflow:
hidden;
}
#rightbar {
float:
left;
width:
200px;
background-color: #FDF7FB;
background-image: url("http://storage.canalblog.com/58/78/144645/5796653.png");
background-repeat:
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
overflow:
hidden;
}
#leftbar {
float:
left;
width: 200px;
background-color: #FDF7FB;
background-image: url("http://storage.canalblog.com/43/28/144645/5796665.jpg");
background-repeat:
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
overflow:
hidden;
}
#topbar-logo {
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
background:
#F4EFF7;
height: Opx;
display:
none;
}
div .logolink a {
display:
block;
text-decoration:
none;
width:
100%;
height:
0px;
}
#topbar {
background-color: #F4EFF7;
background-image: url("http://storage.canalblog.com/42/17/144645/5816051.jpg");
background-repeat:
border-top-style:
none;
border-right-style:
none;
border-bottom-style:
none;
border-left-style:
none;
border-width:
1px;
border-color: #;
padding:
10px;
display:
block;
}
a {
text-decoration:
none;
}
a:link {
color: #6C2A4B;
text-decoration:
underline;
}
a:visited {
color: #6C2A4B;
text-decoration:
underline;
}
a:active {
color: #6C2A4B;
text-decoration:
underline;
}
a:hover {
color: #6C2A4B;
text-decoration:
none;
}
h1 {
margin: 0px;
&nbs