Couleur de background selon la catégorie
Page 1 sur 1•Partagez
- Splash
StaffAdmin - Voir :
- Code:
<span class="cat1">
- Voir :
- Code:
$(function(){
$("span.cat1").parents('.forabg, .topic-actions').attr('id','cat1');
$("span.cat2").parents('.forabg, .topic-actions').attr('id','cat2');
$("span.cat3").parents('.forabg, .topic-actions').attr('id','cat3');
$("span.cat4").parents('.forabg, .topic-actions').attr('id','cat4');
$("span.cat5").parents('.forabg, .topic-actions').attr('id','cat5');
$("span.cat6").parents('.forabg, .topic-actions').attr('id','cat6');
});- Code:
/***Couleur des titres de catégories et sous-forums***/
.forabg, .forumbg {
background: none !important;
}
/* catégorie 1 avec ses sous forums */
div#cat1:not(.topic-actions), #cat1 ~ .forumbg {
background-color: red !important;
}
/* catégorie 2 avec ses sous forums */
div#cat2:not(.topic-actions), #cat2 ~ .forumbg {
background-color: green !important;
}
/* catégorie 3 avec ses sous forums */
div#cat3:not(.topic-actions), #cat3 ~ .forumbg {
background-color: #69c !important;
}
/* catégorie 4 avec ses sous forums */
div#cat4:not(.topic-actions), #cat4 ~ .forumbg {
background-color: #69c !important;
}
/* catégorie 5 avec ses sous forums */
div#cat5:not(.topic-actions), #cat5 ~ .forumbg {
background-color: #69c !important;
}
/* catégorie 6 avec ses sous forums */
div#cat6:not(.topic-actions), #cat6 ~ .forumbg {
background-color: darkseagreen !important;
}
/***Fin Couleur des titres de catégories et sous-forums***/
![Splash](https://2img.net/u/4012/75/45/07/avatars/1-77.gif)
Hi,
Voici une astuce qui permet d'attribuer des couleurs différentes aux catégories et leurs sous-forums.
Ce tuto est fait sur la base d'un forum qui contient 6 catégories ( à adapter selon vos besoins )
Dirigez-vous ici :
Panneau d’administration ► Général ► Forum ► Catégories et forums
Cliquez sur l'icône "
" de chaque catégorie pour lesquelles vous voulez attribuer une couleur,
puis insérez ce code là juste avant le titre de votre catégorie :
Pensez à
à chaque changement
Direction le javascript
Panneau d'administration / Modules / HTML & JAVASCRIPT / Gestion des codes javascript
Mettre ce script sur toutes les pages :
Pensez à
Direction le CSS
Panneau d'administration / Affichage / Images et Couleurs / Couleurs / Feuille de style CSS
Mettre ce code à la CSS :
Pensez à![Valider 2](/users/4012/75/45/07/smiles/3522799283.png)
À bientôt
![Bye](/users/4012/75/45/07/smiles/2915189421.gif)
Dans cette astuce il est question de placer un code javascript et un code à la feuille de style (CSS), si vous n'êtes pas à l'aise avec ces démarches il existe ces tutos d'aide ici :
> Le javascript
> La CSS
Voici une astuce qui permet d'attribuer des couleurs différentes aux catégories et leurs sous-forums.
Ce tuto est fait sur la base d'un forum qui contient 6 catégories ( à adapter selon vos besoins )
Dirigez-vous ici :
Panneau d’administration ► Général ► Forum ► Catégories et forums
Cliquez sur l'icône "
![Roue crantée](/users/4012/75/45/07/smiles/1787246447.png)
puis insérez ce code là juste avant le titre de votre catégorie :
cat2 pour la catégorie 2,
cat3 pour la catégorie 3, etc...
Pensez à
![Enregistrer](/users/4012/75/45/07/smiles/1051231705.png)
Direction le javascript
Panneau d'administration / Modules / HTML & JAVASCRIPT / Gestion des codes javascript
Mettre ce script sur toutes les pages :
Pensez à
![Valider 2](/users/4012/75/45/07/smiles/3522799283.png)
Direction le CSS
Panneau d'administration / Affichage / Images et Couleurs / Couleurs / Feuille de style CSS
Mettre ce code à la CSS :
Pensez à
![Valider 2](/users/4012/75/45/07/smiles/3522799283.png)
Même si vous ne voulez changer que 2 catégories au niveau de la couleur de background il est important d'appliquer cette astuce à l'ensemble des catégories.
Sur l'exemple donné ici les catégories 1 & 2 ont chacune leur couleur, les catégories 3, 4 & 5 ont la même couleur et la dernière catégorie, la 6, à sa propre couleur
:u1: |
![Bye](/users/4012/75/45/07/smiles/2915189421.gif)
Pour bien réaliser cette astuce
![Like a Star @ heaven](https://2img.net/i/fa/i/smiles/star3.png)
> Le javascript
> La CSS
Sujets les plus actifs
Sujets les plus vus
Meilleurs posteurs
» » Bouton MP "Répondre" adapté à la version ModernBB
» » Réduire la hauteur des catégories
» » [AwesomeBB] Ajout d'un bloc de connexion/enregistrement en bas de page
» » Afficher les avatars en forme rectangulaire
» » Modifier la partie des stats en début de qeel
» » Mettre une image au qeel
» » Rendre l'image du header cliquable
» » Elargir le cadre de la boite de smileys
» » [phpBB3] Flèches Haut et Bas qui s'adaptent à la couleur du thème
» » Catégories rétractables sur l'index
» » [phpBB3] Catégories de différentes couleurs
» » [phpBB3] Ajout d'un bloc de connexion/enregistrement en bas de page
» » Centrer l'avatar, le pseudo & le rang dans les messages
» » Modifier l'icône "On-line"