!! Il faut etre en mode avancé pour installer un template !!

!! Veillez a sauvegarder avec le bloc note vos pages avant toute modification !!

1ere etape :

Ouvrez le bloc note, et collez c deux codes

background: #ffffff url("http://adresseimagefondublog.jpg") ;background-attachment : fixed;

background: #ffffff url("http://adresseimagebanniere.jpg") no-repeat 0% 0%;

2eme etape :

Rendez vous sur Hostingpics, heberger vos images qui compose le template que vous avez telechargé.

Copié l'adresse des images et les collez dans le bloc note ( ne pas tout melanger sur le blog note faite des espaces ;-) ).

3 eme Etape :

Rendez vous dans votre compte Canalblog, Apparence, feuille de style.

Faite une sauvegarde de votre feuille de style, en cas d'erreure ( qui est fort possible) vous pourrez revenir en arriere.

Dans le bloc "Body" remplacez la ligne background par le 1ere ligne du code donné plus haut ^^

Faite de meme pour la ligne background dans le blog "Topbar-logo" avec la deuxieme ligne du code plus haut ^^

Collez l'adresse de vos images dans c deux codes

4 eme etape :

Remplacé les codes couleurs des blocs par transparent comme ci dessous en rouge ....

body {
margin: 0px 0px 0px 0px;
text-align: center;
background: #ffffff url("http://adressefondublog.jpg") ;background-attachment : fixed;
}
#container {
width: 901px;
padding: 0px;
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #000000;
margin-right: auto;
margin-left: auto;
}
#content {
float: left;
width: 500px;
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #000000;
overflow: hidden;
}
#rightbar {
float: left;
width: 200px;
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #000000;
overflow: hidden;
}
#leftbar {
float: left;
width: 200px;
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #000000;
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: #000000;
background: #ffffff url("http://adresse baniere.jpg") no-repeat 0% 0%;
height: 299px;
display: block;
}
div .logolink a {
display: block;
text-decoration: none;
width: 100%;
height: 299px;
}
#topbar {
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #000000;
padding: 10px;
display: block;
}

5eme etape : les dimensions

On a besoin de connaitre la taille de votre banniere ( celle du template) dans votre pc, clique droit sur l'image , propriété. notez la dimension de votre banniere.

--------------------------------------------------------------------------------

POur deux colonnes + le centre

Alors il faut partir du principe que dans la feuille de style le bloc #container = leftbar+content+rightbar pour une banniere de 800 x 300 ( la largeur de la banniere est notre container), donc pour deux colonnes, il faudra faire 150-500-150 ce qui egale bien 800/container voyez ci dessus l'extrait de ma feuille de style, il suffit de changer les chiffres sur la ligne Width : ..px dans les blocs leftbar,content, rightbar

POur une colonne à gauche + le centre

Alors il faut partir du principe que dans la feuille de style le bloc #container = leftbar+content pour une banniere de 800 x 300 ( la largeur de la banniere est notre container), donc pour une colonne, il faudra faire 200+600 ce qui egale bien 800/container voyez ci dessus l'extrait de ma feuille de style, il suffit de changer les chiffres sur la ligne Width : ..px dans les blocs leftbar,content et mettez dans rightbar le widht:0px

POur une colonne à droite + le centre

Alors il faut partir du principe que dans la feuille de style le bloc #container = content+rightbar pour une banniere de 800 x 300 ( la largeur de la banniere est notre container), donc pour une colonne, il faudra faire 600 + 200 ce qui egale bien 800/container voyez ci dessus l'extrait de ma feuille de style, il suffit de changer les chiffres sur la ligne Width : ..px dans les blocs content, rightbar et mettez dans leftbar le widht:0px

--------------------------------------------------------------------------------

Dernier point la banniere, dans topbar-logo et div .logolink changer le chiffre Height: ..px par la hauteur de votre banniere.

je vous conseil de retirer tout les bords sur votre blog pour cela il suffit dans chaque bloc au niveau des quatre border...style de mettre none; ne pas oublier le point virgule ( ne pas le mettre deux fois aussi)

Voila validez et admirez

Installation d'un template

Partager cet article