Charger le tutoriel au format PDF ![]()
Tout comme la version 1 du template, la version 2 permet d'avoir des modules de couleurs, mais également d'avoir des badges.
Pour celà, nous allons agir sur le suffixe de classe de module.

1- Les Modules de couleur :
Seules les positions de modules ayant un style JArounded peuvent avoir ces styles de couleurs
Pour afficher un module de couleur verte, il faut appliquer le suffixe de classe de module _green.
Pour afficher un module de couleur noire, il faut appliquer le suffixe de classe de module _black.
Pour afficher un module de couleur bleue, il faut appliquer le suffixe de classe de module _blue.
Pour afficher un module de couleur rouge, il faut appliquer le suffixe de classe de module _red.
exemples en bas de cette page.
2- Les badges :
Pour afficher un badge new, il faut appliquer le suffixe de classe de module _badge badge-new.
Pour afficher un badge hot, il faut appliquer le suffixe de classe de module _badge badge-hot.
Pour afficher un badge top, il faut appliquer le suffixe de classe de module _badge badge-top.
Pour afficher un badge pick, il faut appliquer le suffixe de classe de module _badge badge-pick.
exemples en bas de cette page.
3- Les modules de couleurs avec badges :
Seules les positions de modules ayant un style JArounded peuvent avoir ces styles de couleurs
Ici nous avons 4 exemples, mais on peut faire toutes les combinaisons possibles.
Pour afficher un module vert avec un badge new, il faut appliquer le suffixe de classe de module _green _badge badge-new.
Pour afficher un module noir avec un badge hot, il faut appliquer le suffixe de classe de module _black _badge badge-hot.
Pour afficher un module bleu avec un badge top, il faut appliquer le suffixe de classe de module _blue _badge badge-top.
Pour afficher un module rouge avec un badge pick, il faut appliquer le suffixe de classe de module _red _badge badge-pick.
exemples en bas de cette page.
4- Rendre repliable les modules ayant un badge :
Après avoir appliqué ces badges, vous vous êtes sûrement rendus compte que vous ne pouviez plus cacher le contenu du module.
Pas de problème, il y a une solution !
Il va falloir éditer le fichier template.css
Chemin : templates > ja_purity_ii > css > template.css
Nous pouvons trouver ceci :
/* Uncomment the following lines if you want collapsible modules with badges still show arrows */
/*
.badge-hot h3.show,.badge-new h3.show,.badge-pick h3.show,.badge-top h3.show,
.badge-hot h3.hide,.badge-new h3.hide,.badge-pick h3.hide,.badge-top h3.hide {
background-position: 15px 60%;
text-indent: 15px;
}
*/
Comme c'est écrit en commentaire dans le code, il faut décommenter.
Le code devient alors :
/* Uncomment the following lines if you want collapsible modules with badges still show arrows */
.badge-hot h3.show,.badge-new h3.show,.badge-pick h3.show,.badge-top h3.show,
.badge-hot h3.hide,.badge-new h3.hide,.badge-pick h3.hide,.badge-top h3.hide {
background-position: 15px 60%;
text-indent: 15px;
}
















