Tarlak's World

Le technique utilisée est simple, attribuer à chaque catégorie une image spécifique. Voila c'est tout.

Mais non je déconne je vais tout vous dire. Tout d'abord nous avons besoin d'une extension pour Dotclear 2 fort intéressante elle se nomme moreTpl^[1] une fois l'extension installé le travail est à moitié fait.

La prochaine état consiste à ajouter dans votre fichier home.html (de votre thème bien évidement). Si vous n'avez pas dans le dossier tpl de votre thème le fichier home.html recopiez le à partir du thème default. Ceci étant fait vous devrez ajouter la ligne suivante la ou vous voulez qu'apparaisse votre image.

# Fichier home.html
<div class="{{tpl:EntryCategoryShortURL}}"></div>

Que fait le bout de code. C'est simple il va tout simplement ajouter une class qui portera le nom de la catégorie à laquelle appartient le billet. Bon jusqu'ici rien de bien difficile n'est-ce pas ?

En ce qui concerne la partie CSS la c'est autre chose. Je dois tout de suite vous préciser (mais je penses que vous vous avez déjà une petite idée de ce que je vais vous dire) que vous devrez ajouter un petit bout de code css à chaque fois qu'une nouvelle catégorie sera créée sur votre blog. En effet comme je le disais précédemment le bout de code ajouter dans le fichier home.html ajoute dans notre cas une class CSS du nom de la catégorie du billet. Mais voyez plutôt l'exemple si après :

/* Fichier style.css */
.Bibble-5 {
        margin: 0 0 0 -100px;
        width: 80px;
        height: 88px;
        float : left;
        background-image: url(img/bibble5.png);
        background-repeat: no-repeat;
        background-position: center left;
        padding: 0.8em;
}

.Vie-du-blog {
        margin: 0 0 0 -100px;
        width: 80px;
        height: 88px;
        float : left;
        background-image: url(img/dotclear.png);
        background-repeat: no-repeat;
        background-position: center left;
        padding: 0.8em;
}

Nous avons donc deux catégories dans l'exemple la première se nomme Bibble 5 et la seconde Vie du blog. Vous noterez au passage que les espaces ont été remplacé par des trait d'union. Donc faites bien attention à l'orthographe.

Ceci étant dit vous remarquerez qu'a part le nom de la class CSS et l'information sur le chemin d'accès à l'image le reste est identique à chaque fois, donc pas terrible on va vite alourdir le fichier style.css pour rien aller c'est parti on optimise. Nous allons faire ce que personnellement j'appelle de la surcharge de class dans notre fichier css.

/* Fichier style.css */
.imagette {
        margin: 0 0 0 -100px;
        width: 80px;
        height: 88px;
        float : left;
        background-repeat: no-repeat;
        background-position: center left;
        padding: 0.8em;
}

.Bibble-5 {
        background-image: url(img/bibble5.png);
}

.Vie-du-blog {
        background-image: url(img/dotclear.png);
}

Voila première modification effectuée magnifique non ? Qu'est-ce que cela fait, simple nous avons définit une nouvelle class CS nommée imagette cette class va contenir les styles identiques pour chaque catégorie. Ensuite comme précédemment on ajoute une class avec le nom de la catégorie (attention à l'orthographe de celle-ci). Mais attention ce n'est pas fini il faut encore faire une dernière modification (allez courage c'est bientôt la fin). On retourne dans notre fichier home.html et on modifie ce que nous avions écrit plus haut.

# Fichier home.html
<div class="imagette {{tpl:EntryCategoryShortURL}}"></div>

Et voila c'est fini (youpieee oui je sais), N'oubliez pas l'espace entre imagette et le tag dotclear

Voila j'espère que j'ai été assez clair et constructif^[2]. Maintenant c'est à vous d'adapter les modifications afin que ça ressemble à ce que vous voulez. Si jamais un pros du CSS ou de l'html passe par ici et constate une grosse boulette de ma part qu'il n'hésite pas à me le faire savoir.