Charger le tutoriel au format PDF 
Pour pouvoir appliquer ce tutoriel il faut que les modules soient de type Ja-rounded (avec les bords arrondis).
Nous allons créer 4 suffixes de classe de module. Les titres vont reprendre les images de couleur des suffixes de classe de module :
_black | _blue | _green | _red
1- _blacktop
Pour créer ce suffixe de classe de module nous allons rajouter du code CSS dans le fichier template.css
Chemin : templates > ja_purity_ii > css > template.css
/* blacktop */
div.module_blacktop .ja-box-tr {background: url(../images/bl-tr.gif) no-repeat top right;}
div.module_blacktop .ja-box-tl {background: url(../images/bl-tl.gif) no-repeat top left;}
div.module_blacktop h3 {border-bottom: none; color: #fff;}
Il faut ensuite se rendre dans l'administration du module afin de rajouter le suffixe de classe de module "_blacktop"
voici le résultat obtenu :
2- _bluetop
Pour créer ce suffixe de classe de module nous allons rajouter du code CSS dans le fichier template.css
Chemin : templates > ja_purity_ii > css > template.css
/* bluetop */
div.module_bluetop .ja-box-tr {background: url(../images/bb-tr.gif) no-repeat top right;}
div.module_bluetop .ja-box-tl {background: url(../images/bb-tl.gif) no-repeat top left;}
div.module_bluetop h3 {border-bottom: none; color: #fff;}
Il faut ensuite se rendre dans l'administration du module afin de rajouter le suffixe de classe de module "_bluetop"
voici le résultat obtenu :
3- _greentop
Pour créer ce suffixe de classe de module nous allons rajouter du code CSS dans le fichier template.css
Chemin : templates > ja_purity_ii > css > template.css
/* greentop */
div.module_greentop .ja-box-tr {background: url(../images/bg-tr.gif) no-repeat top right;}
div.module_greentop .ja-box-tl {background: url(../images/bg-tl.gif) no-repeat top left;}
div.module_greentop h3 {border-bottom: none; color: #fff;}
Il faut ensuite se rendre dans l'administration du module afin de rajouter le suffixe de classe de module "_greentop"
voici le résultat obtenu :
4- _redtop
Pour créer ce suffixe de classe de module nous allons rajouter du code CSS dans le fichier template.css
Chemin : templates > ja_purity_ii > css > template.css
/* redtop */
div.module_redtop .ja-box-tr {background: url(../images/br-tr.gif) no-repeat top right;}
div.module_redtop .ja-box-tl {background: url(../images/br-tl.gif) no-repeat top left;}
div.module_redtop h3 {border-bottom: none; color: #fff;}
Il faut ensuite se rendre dans l'administration du module afin de rajouter le suffixe de classe de module "_redtop"
voici le résultat obtenu :
