12 novembre 2007
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;
}
Pourquoi et comment passer en mode avancé ?
Pourquoi passer en mode avancé
Bien que suffisant pour les webmasters débutants, le mode "normal" proposé par défaut sur Canalblog trouve vite ses limites lorsqu'il s'agit de personnaliser le design de son blog et d'ajouter des fonctionnalités plus sophistiquées.
En effet, le mode normal vous limite aux options de personnalisation suivantes :
- Mise en forme des pages : personnalisation de la couleur de fond et des bordures
- Barre de titre du blog : couleur de fond, insertion d'une bannière au format défini (901 x 150 max)
- Personnalisation des colonnes de gauche, du centre et de droite : largeur, couleur et style des bordures
- Personnalisation des liens : couleur et style.
Compte tenu de ce que vous pouvez déjà faire en mode normal, vous vous demandez donc ce que le mode avancé va vous apporter. Et bien c'est simple, ou plutôt c'est ENOOORME ! Le mode avancé va vous permettre, entre autres, d'ajouter à votre blog les éléments suivants :
- un moteur de recherche
- un compteur de visites
- des bannières publicitaires (utiles pour rentabiliser votre blog...)
- un fond d'écran personnalisé (une image de votre choix)
- une barre de menu horizontale (pour accéder facilement aux rubriques de votre blog)
- des fonctionnalités "Web 2.0" : liens RSS, nuages de tags...
Ne croyez pas que le mode avancé ne soit fait que pour les pros du language HTML, car on s'y fait vite ! En général, pour insérer de nouvelles fonctionnalités ou de nouveaux modules à votre blog, il suffit de copier-coller les lignes de codes que je vous indiquerai !
Avant de passer en mode avancé !!
Avant de passer en mode avancé, pour pouvoir revenir en arrière, je vous conseille fortement de sauvegarder le modèle actuel de votre blog en procédant de la manière suivante :
1. Dans l'onglet "Apparence" de votre blog, cliquez sur "nouveau modèle"
2. Donnez un nom à votre modèle : "Sauvegarde blog"
3. Choisissez une "Apparence générale" et un "thème" au hasard, puis cliquez sur "Valider".
Si vous aviez déjà personnalisé votre blog en mode "normal", vous perdrez l'ensemble de vos modifications (votre bannière, si vous en avez inséré une, et vos couleurs personnalisées, par exemple).
Comment passer en mode avancé
1. Cliquez sur l'onglet "Apparence" puis sur "Paramètres" :
2. Vous arrivez alors sur l'écran suivant :
Ici, il vous suffit alors de cocher la case située devant "Convertir ce modèle en type avancé". Voilà, vous êtes en mode avancé !! Bienvenue au club ;-)
Bonjour tout le monde !
Chers visiteurs,
Si vous avez un peu d'expérience sur Canalblog, et que vous commencez à voir les limites du mode "normal", ce blog va vous permettre d'exploiter à fond les capacités de Canalblog !
Etant moi-même blogueur depuis octobre 2006, je sais à quel point il est difficile au début de s'y retrouver dans le charabia de la blogosphère lorsqu'il s'agit tout simplement de personnaliser son blog. C'est pourquoi je vais vous divulguer la plupart de mes tuyaux pour construire un blog "design" et unique.
Malgré le peu de temps dont je disposerai pour vous répondre, vos commentaires (remarques ou suggestions) seront toujours les bienvenus. En revanche, je ne pourrai pas vous répondre s'il s'agit de vous aider dans la réalisation de votre blog ou la résolution d'un problème quelconque. De nombreux blogs Canalblog sont entièrement consacrés à cela.
Bon surf !
François
