Membres connectés récemment
[PHPBB2] Coloriser individuellement les catégories
+11
dragon594
canelle
mariok
marie-noelle
Fantastik
Teten85
patriciadpt30
ThunderTB
fleur78
Coventgarden
Milouze14
15 participants
Page 1 sur 1 • Partagez
,
l'astuce consiste a coloriser les titres des catégories et les éléments suivants:Sujets ,Messages et Derniers Messages .
Voir l'aperçu imagé :
Pour que cette astuce fonctionne, il faut que dans votre PA vous sépariez les catégories:
Affichage/Page d'acceuil/
Structure et hiérarchie/Séparer les catégories sur l'index :
Ensuite les trois modes fonctionnent .
Il faut dans un premier temps repérer le titre de la catégorie concernée
et insérer ce dernier dans la partie du javascript
Puis à l'aide de la css vous pourrez personnaliser chaque cellule.
Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Pensez a cliquer sur le bouton
Il faut donc changer a chaque ligne nommée "TITRE XX CATEGORIE"
par le nom de votre catégorie
Pour l'exemple imagé le code est ainsi :
On voit ensuite que j'ai attribué une class au tr (M14_Cat_1)
qui englobe les cellules.
A partir de là on va pouvoir faire ce que l'on souhaite pour cette catégorie.
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Pour l'exemple j'ai simplement déposé une couleur aux cellules,
mais vous aussi changer la couleur de fond etc etc.
l'astuce consiste a coloriser les titres des catégories et les éléments suivants:Sujets ,Messages et Derniers Messages .
Voir l'aperçu imagé :
- Spoiler:
Pour que cette astuce fonctionne, il faut que dans votre PA vous sépariez les catégories:
Affichage/Page d'acceuil/
Structure et hiérarchie/Séparer les catégories sur l'index :
Ensuite les trois modes fonctionnent .
Il faut dans un premier temps repérer le titre de la catégorie concernée
et insérer ce dernier dans la partie du javascript
Puis à l'aide de la css vous pourrez personnaliser chaque cellule.
Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
- Code:
$(function(){
//PREMIERE CATEGORIE
$('th.secondarytitle h2:contains("TITRE PREMIERE CATEGORIE")').closest('tr').addClass('M14_Cat_1');
//DEUXIEME CATEGORIE
$('th.secondarytitle h2:contains("TITRE DEUXIEME CATEGORIE")').closest('tr').addClass('M14_Cat_2');
//TROISIEME CATEGORIE
$('th.secondarytitle h2:contains("TITRE TROISIEME CATEGORIE")').closest('tr').addClass('M14_Cat_3');
//QUATRIEME CATEGORIE
$('th.secondarytitle h2:contains("TITRE QUATRIEME CATEGORIE")').closest('tr').addClass('M14_Cat_4');
});
Pensez a cliquer sur le bouton
Il faut donc changer a chaque ligne nommée "TITRE XX CATEGORIE"
par le nom de votre catégorie
Pour l'exemple imagé le code est ainsi :
- Code:
$('th.secondarytitle h2:contains("Premiere catégorie")').closest('tr').addClass('M14_Cat_1');
On voit ensuite que j'ai attribué une class au tr (M14_Cat_1)
qui englobe les cellules.
A partir de là on va pouvoir faire ce que l'on souhaite pour cette catégorie.
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
- Code:
/*Premiere catégorie*/
.M14_Cat_1 th h2, .M14_Cat_1 th{color:red;}
/*Deuxieme catégorie*/
.M14_Cat_2 th h2, .M14_Cat_2 th{color:green;}
/*Troiseme catégorie*/
.M14_Cat_3 th h2, .M14_Cat_3 th{color:pink;}
/*Quatrieme catégorie*/
.M14_Cat_4 th h2, .M14_Cat_4 th{color:yellow;}
Pour l'exemple j'ai simplement déposé une couleur aux cellules,
mais vous aussi changer la couleur de fond etc etc.
- InvitéInvité
Merci beaucoup !
- InvitéInvité
Merci beaucoup !
- InvitéInvité
Merci beaucoup !
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum