Je viens de decouvrir un hebergeur de blog denomme Tooblog. Il est tres interessant parce qu’il utilise dotclear (que j’aime beaucoup) et qu’il laisse la possibilite de customizer presque entierement l’aspect du blog en creant son propre fichier CSS.

Je vais essayer de faire un petit topo pour les debutants pour qu’ils puissent un peu customizer leur blog sur tooblog.

Je viens de decouvrir un hebergeur de blog denomme Tooblog. Il est tres interessant parce qu’il utilise dotclear (que j’aime beaucoup) et qu’il laisse la possibilite de customizer presque entierement l’aspect du blog en creant son propre fichier CSS.

Je vais essayer de faire un petit topo pour les debutants pour qu’ils puissent un peu customizer leur blog sur tooblog.

1. Qu’est-ce que le CSS
2. Comment fonctionne la feuille de style
3. Comment construire sa feuille de style
4. Les questions de Nita (FAQ)
5. Pas a pas pour la customization du blog

---

Qu’est-ce que le CSS

De nos jours une page html bien codee n’inclut aucun element de mise en page, elle ne contient que le squelette / la construction du site. En l’occurence, sur dotclear la page est divisee comme suit :

• page
  • top : qu’on peut qualifier de header, il contient le titre voire une banniere
  • main : contient le corps du blog : les posts et le menu de navigation
    • content : contient les posts (ou billets)
    • sidebar : contient le menu de navigation
  • footer

Si on ne definit pas une mise en page, le blog va ressembler a ca : Voir screenshot

La mise en page va pouvoir etre faite grace a la feuille de style CSS.
Sur tooblog, on peut choisir des feuilles de styles toutes faites via l’onglet « Themes » ou creer sa propre feuille de style via l’onglet « Themes » puis le lien « Configurer son propre theme« 
Par defaut, la feuille de style proposee est celle du « Theme blanc »: Voir screenshot

---

Comment fonctionne la feuille de style

C’est bete comme chou, la feuille de style est composee de « blocs » decrivant chaque element de la page.

Par exemple, prenons mon titre de blog « Pixcell ». Celui-ci est un titre de type h1 c’est-a dire que dans la page html, il a ete code : <h1>Pixcell</h1> Dans la feuille de style css, on definira l’allure de ce titre de la facon suivante (par exemple): h1 {
size : 2em;
font-weight : bold;
}

Si nous avancons plus loin dans la complexite, on peut se dire « oui mais des titres, il y a le titre du blog, il peut aussi y avoir le titre des posts du blog, ou les titres des menus etc… »
Prenons pour exemple sur mon blog, les titres de mes billets sont de type h2, de meme pour les titres des menus de la barre de menu, pourtant ils ne s’affichent pas de la meme maniere !
En effet, les titres de billets sont inclus dans le « content » du site tandis que ceux du menu sont dans la « sidebar ». En generalisant on peut dire que dans la page html ils apparaissent de cette facon : <div id="content">
<h2>Titre d'un billet</h2>
</div>

<div id="sidebar">
<h2>Titre d'un sous menu</h2>
</div>

On pourra donc differencier les 2 types de titre dans la feuille de style de la maniere suivante : #content h2 { text-align : left; }
#sidebar h2 { text-align : right; } Avec ce code, les titres h2 dans le « content » seront alignes a gauche tandis que les titres de la « sidebar » seront alignes a droite.

Au niveau html, certains elements sont imbriques dans des <div id= » »> d’autres dans des <div class= » »>. Ceci sera repercute dans la feuille de style de la maniere suivante :
Niveau html : <div id="type_id"><h1>Titre</h1></div>
<div class="type_class"><h1></h1></div> Niveau CSS : #type_id h1 {}
.type_class h1 {}

Plus generalement un element est construit de la maniere suivante : class-ou-id-de-l'element type-d'element { critere:valeur; }

---

Comment construire sa feuille de style

2 solutions sur tooblog :

• Aller dans l’onglet »Themes » puis « Configurer son propre theme » _ Modifier le code CSS du theme _ Enregistrer _ Voir les repercussions des modifications en cliquant sur l’onglet « Mon blog« 
• Voir le blog (onglet « Mon blog« ) et enregistrer la page (Fichier > Sauvegarder page sous). Vous obtiendrez un fichier .html ainsi qu’un repertoire dans lequel vous pourrez trouver la feuille de style css. On pourra alors modifier la feuille de style et voir les consequences en local. C’est plus pratique et plus rapide.

Dans tous les cas je vous conseille d’avoir en parallele la feuille de style et le code source de la page html (pour avoir le code source d’une page html : bouton droit sur la page puis « voir code source »). En effet, ca permettra de reperer rapidement les parties que l’on veut changer : par exemple, je veux changer le style du titre PixCell, je vais chercher dans mon code html ou se situe le titre et je vois <div id="top"><h1>PixCell</h1></div> je peux donc dire que dans la feuille de style il faudra mettre quelque chose comme #top h1 {}

Le plus simple a faire pour avoir une page un peu personnalisee rapidement est de changer les couleurs des elements.

• Background de la page : ajouter/remplacer dans body background : #lacouleurchoisie;^[1]
• Couleur du texte : dans body on peut changer la couleur generale du texte : color : #lacouleurchoisie;
• Couleur des liens : a { color : #lacouleurchoisie; }
• Couleur d’autres elements : comme vous l’aurez compris, il suffit de placer le color : #lacouleurchoisie; dans (presque) n’importe quel element, exemple :

h1 { color: #00FFFF; } // les titres h1 en Cyan
p { color: #FFFF00; } // les paragraphes en jaune
ul { color: #FF00FF; } // les listes en Magenta

---

Les Questions de Nita (FAQ)

C’est ou que je rajoute le background ?

Pour changer le background d’une page c’est dans body : body { background : #couleur;} Pour mettre une image dans le background, on peut faire (sur tooblog): body { background : #couleur url(/images/lenomdelimage.jpg) no-repeat;} lenomdelimage.jpg etant une image que vous aurez transfere sur tooblog via le gestionnaire des images (onglet « Images« )
Des variantes sont :

• background : #couleur url(/images/lenomdelimage.jpg) no-repeat top left; // aligner l’image en haut a gauche (valeurs dispo : top bottom right left)
• background : #couleur url(/images/lenomdelimage.jpg) repeat; // repeter un motif sur toute la page (valeurs dispo : repeat-x repeat-y)

Comment on sait quelles options on peut appliquer a des elements ?

Pour ca je ferais pas un listing, mais y’a bcp de doc sur le net, par exemple ici.

Comment ca marche avec les polices ?

La police est definie dans font, par exemple font:Verdana,Arial,Geneva,Helvetica,sans-serif. Dans cet exemple la police de preference est Verdana, si la personne qui vient visiter le site ne possede pas Verdana, elle utilisera Arial, sinon Geneva, ainsi de suite … Si elle ne possede aucune des polices, elle utilisera sa police par defaut sur sa machine

C’est quoi ca a { color : #333; } ?

Le a correspond aux liens (dans le code html, les liens sont definis avec <a href= » »></a>)
Petit echantillon des balises : a : les liens
p : les paragraphes
h1,h2,h3,... : les titres, sachant que h1 est le plus gros titre
ul : les listes (on distingue <ul><li></li></ul> qui sont des listes non ordonnees, et <ul><ol></ol></ul> qui sont ordonnees)
hr : les lignes horizontales
table : un tableau
code : une zone pour mettre du code source (comme la zone ou ce texte est ecrit)
pre : une zone de texte preformate (souvent un peu comme le code)