Bienvenue sur mon blog

Ici vous trouverez des templates à utiliser pour vos blog (canalblog). Ils sont realisés par mes soins à partir de kit freebies, avec l'accord des créatrices ils sont en telechargement libres. Une rubrique tutos à été créé pour vous aider dans l'installation de c templates.

Bonne visite

26 août 2009

Installation d'un template

!! 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é.

1

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

2

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

Posté par olianna à 12:24 - Tutos - Commentaires [6] - Permalien [#]

Commentaires

    Wouah! Merci d'avoir pris le temps de nous expliquer tout ça!

    Posté par Mélanie, 27 août 2009 à 15:05
  • Bravo Olianna !!! c'est trop beau ce que tu as fait là !
    Merci puor tout ce détail

    Posté par Marlenou-Meuh, 27 août 2009 à 15:54
  • c'est super joli je ferai l'essai ,mon blog est tout récent dès que j'ose!!! je garde ta page
    meilleurs voeux monique

    Posté par monique, 02 janvier 2010 à 10:18
  • :)

    Excellent!

    Posté par Zombidescryptes, 09 avril 2010 à 00:36
  • Cool, merci,
    dans mon nouveau blog, je n'ai plus accès à la feuille de style...

    Posté par lunatique, 13 décembre 2010 à 22:47
  • Bonjour,

    Merci pour ce super tuto ! Et bravo aux artistes !

    Posté par Ô Bordô, 10 mars 2013 à 11:51

Poster un commentaire