Personnaliser le design de son blog Canalblog

En mode avancé, vous vous demandez sans doute comment vous allez pouvoir modifier la couleur de vos colonnes, le style d'écriture... et bien d'autres choses que vous pouviez faire en mode normal. Et bien, ça n'est pas plus compliqué !

Pour commencer, rendez-vous dans l'onglet "Apparence", puis dans le menu déroulant. Dans ce dernier, vous allez sélectionner "Feuille de style générale". J'ai essayé de la décortiquer le plus précisément possible pour vous permettre de la personnaliser à votre guise.

Vous allez ensuite parcourir la "feuille de style" pour identifier les parties que vous souhaitez modifier :

body {
margin: 0px 0px 0px 0px;
text-align: center;
background-color: #000000; (couleur du fond)
}
#container {
width: 1000px; (largeur totale de la page web)
padding: 0px;
background-color: #000000; (couleur de fond)
border-top-style: solid; (style de la bordure du dessus : "solid" = ligne continue, peut être remplacé par "none" = pas de ligne - "dotted" = pointillés fins - "dashed" = pointillés épais - "double" = double ligne)
border-right-style: solid; (style de la bordure de droite)
border-bottom-style: solid; (style de la bordure du bas)
border-left-style: solid; (style de la bordure de gauche)
border-width: 1px; (largeur de la bordure - prévoyez 3px minimum si vous choisissez un "border-style" de type "double", pour que l'effet soit visible)
border-color: #000000; (couleur de la bordure)
margin-right: auto;
margin-left: auto;
}
#content { (colonne centrale)
float: left;
width: 590px; (largeur de la colonne centrale)
background-color: #000000;  (couleur de la colonne centrale)
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #996600; (couleur des bordures)
overflow: hidden;
}
#rightbar { (colonne de droite)
float: left;
width: 205px; (largeur de la colonne)
background-color: #000000; (couleur de la colonne)
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #996600;
overflow: hidden;
}
#leftbar { (colonne de gauche)
float: left;
width: 205px; (largeur de la colonne)
background-color: #000000; (couleur de la colonne)
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #996600;
overflow: hidden;
}
#topbar-logo { (la zone de titre de votre blog, qui peut être remplacée par une bannière personnalisée)
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #000000;
background: #000000 url(http://xxxxxxxxxxxxxxxxxxxxxxxxxx) no-repeat 0% 0%; (adresse url de la bannière/image de votre blog)
width: 1000px;
height: 150px;
display: block;
}
div .logolink a {
display: block;
text-decoration: none;
width: 100%;
height: 150px;
}
#topbar { (bannière)
background-color: #000000; (couleur de fond de la bannière)
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: none;
}
a {
text-decoration: none; (vous pouvez remplacer "none" par "underline", si vous désirez que le texte soit souligné)
}
a:link { (liens affichés sur votre site)
color: #CC9933;
text-decoration: underline;
}
a:visited { (liens visités, autrement dit ceux qui ont déjà été cliqués)
color: #CC9933;
text-decoration: underline;
}
a:active { (liens actifs)
color: #CC9933;
text-decoration: underline;
}
a:hover { (liens survolés = apparence des liens lorsqu'ils sont survolés par le curseur de votre souris)
color: #CC9933;
text-decoration: none;
}
h1 {
margin: 0px;
padding: 0px;
}
h2 {
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
}
#topbar h1 { (titre de votre blog, tant que ce dernier n'est pas remplacé par une bannière)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: xx-large;
font-weight: bold;
font-style: normal; (vous pouvez aussi choisir : "italic")
text-align: left; (position du texte : left = gauche - center = au centre - right = à droite)
}
#topbar a {
text-decoration: none; (pour souligner le titre du blog, remplacez "none" par "underline")
color: #CC9933;
}
#topbar h2 { (sous-titre de votre blog, tant que ce dernier n'est pas remplacé par une bannière)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #996600;
font-size: small;
font-weight: normal;
font-style: italic;
text-align: left;
}
.blogbody {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none; padding: 10px;
text-align: left;
line-height: 150%;
}
.blogbody h2 { (date de votre blog)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #996600;
font-size: xx-small;
font-weight: bold;
font-style: normal;
text-transform: none; (pour que votre texte apparaisse en majuscules, remplacez "none" par "uppercase")
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-width: 1px;
border-color: #996600;
margin-bottom: 10px;
padding: 3px;
}
.blogbody h3 { (titres des messages)
font-family: Tahoma, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: large;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: center;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #996600;
background-color: #FFCC66; (permet d'ajouter une couleur de fond à vos titres)
margin-bottom: 10px;
padding: 3px;
}
.blogbody p { (texte des messages)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
line-height: 150%; (définissez ici la taille de l'écart entre les lignes de texte)
margin-bottom: 10px;
}
.blogbody .itemfooter { (pied des messages : posté par, commentaires...)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #996600;
font-size: xx-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: solid;
border-left-style: none;
border-width: 2px;
border-color: #996600;
padding: 3px;
clear: both;
}
.navlinks {
padding: 10px;
}
.navlinks .title { (titre des catégories dans les colonnes)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #996600;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
text-align: left;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-width: 1px;
border-color: #996600;
padding: 3px;
}
.navlinks ul { (permet de modifier l'apparence de la zone des colonnes où se trouvent les différentes catégories)
padding: 0px;
margin: 0px 0px 20px 0px;
list-style-type: none;
margin: 0px 0px 20px 0px;
}
.navlinks li { (permet de modifier l'apparence des catégories dans les colonnes)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
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: #000000;
font-size: x-small;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 150%;
margin-top: 10px;
margin-bottom: 10px;
}
#calendar { (numéros du calendrier)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
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 { (titre du calendrier)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
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: center;
margin-bottom: 20px;
}
.navlinks img { (permet de modifier les bordures qui encadrent les images)
border-top-style: solid; (remplacez "solid" par "none" si vous ne souhaitez pas que vos images soient encadrées)
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #000000;
}
#album-container { (album photos - pour le personnaliser, inspirez-vous des explications indiquées jusqu''ici, car c'est exactement le même principe)
width: 956px;
padding: 0px;
background-color: #000000;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #99B2CC;
margin-right: auto;
margin-left: auto;
}
#album-content {
float: left;
width: 550px;
background-color: #000000;
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: 406px;
background-color: #000000;
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: #CC9933;
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: #CC9933;
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: #CC9933;
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: #CC9933;
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: #CC9933;
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: #CC9933;
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;
}

Comments

[Mikso]

Bonjour, j'aimerais connaître un code ou une astuce qui permet à mon blog d'être collé à gauche plutôt que d'être centré dans la page.
Merci d'avance.

[Loolee]

Bonjour, voilà je viens de tomber par hasard sur ton blog qui m'a beaucoup aider, cependant, j'ai encore quelques petits problèmes. POur faire simple je dessine et j'ai créer mes propres modèles de catégories etc... mais malheureusement je ne sais pas comment les insérer dans mon blog tout comme le fait de mettre un fond personnaliser. Pitié pourrais-tu m'aider je suis limite en crise de nerf depuis les temps que j'essaye lol. Jespère avoir une réponse et surtout je te remercie d'avance si tu veux bien m'accorder ton aide.
Bonne soirée. Loolee.

mail: looleenette@gmail.com

[Elodie *]

Hello, j'ai un petit problème avec ma bannière, je met le lien mais elle ne s'affiche pas sur mon blog :/

Si tu as le temps, réponds-moi pas email :)

Merci d'avance

[Moumoune]

Je suis passé en mode avancé hier et avec l'aide de ton article je me suis éclaté à modifier des tas de trucs et ça fonctionne. Génial !

[batilou]

Je viens de passer en mode avancé et j'ai pioché ça et là des renseignements très précieux.
Merci de passer du temps à éditer des trucs juste pour aider les autres :-))

Bonne continuation!