Les forums Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Compteur de visites gratuit
Annonces
CAForum est aussi un forum d'aide pour phpBB. Voici le lien du forum : https://forums.caforum.fr
Vous voulez créer un forum sans publicités tout en étant propriétaire de votre base de données ?
Contactez moi sur le forum !
CAForum infos
Derniers sujets
» » Bouton MP "Répondre" adapté à la version ModernBB
Couleur de background selon la catégorie Clock-10Mer 31 Jan 2024 - 13:03 par NIK SIURI

» » Réduire la hauteur des catégories
Couleur de background selon la catégorie Clock-10Mer 31 Jan 2024 - 12:59 par NIK SIURI

» » [AwesomeBB] Ajout d'un bloc de connexion/enregistrement en bas de page
Couleur de background selon la catégorie Clock-10Mer 31 Jan 2024 - 12:35 par NIK SIURI

» » Afficher les avatars en forme rectangulaire
Couleur de background selon la catégorie Clock-10Mer 31 Jan 2024 - 11:47 par NIK SIURI

» » Modifier la partie des stats en début de qeel
Couleur de background selon la catégorie Clock-10Mer 31 Jan 2024 - 11:45 par NIK SIURI

» » Mettre une image au qeel
Couleur de background selon la catégorie Clock-10Mer 31 Jan 2024 - 11:37 par NIK SIURI

» » Rendre l'image du header cliquable
Couleur de background selon la catégorie Clock-10Mer 31 Jan 2024 - 11:34 par NIK SIURI

» » Elargir le cadre de la boite de smileys
Couleur de background selon la catégorie Clock-10Mer 31 Jan 2024 - 11:33 par NIK SIURI

» » [phpBB3] Flèches Haut et Bas qui s'adaptent à la couleur du thème
Couleur de background selon la catégorie Clock-10Mer 31 Jan 2024 - 10:29 par NIK SIURI

» » Catégories rétractables sur l'index
Couleur de background selon la catégorie Clock-10Mer 31 Jan 2024 - 10:17 par NIK SIURI

» » [phpBB3] Catégories de différentes couleurs
Couleur de background selon la catégorie Clock-10Mer 31 Jan 2024 - 10:17 par NIK SIURI

» » [phpBB3] Ajout d'un bloc de connexion/enregistrement en bas de page
Couleur de background selon la catégorie Clock-10Mer 31 Jan 2024 - 10:07 par NIK SIURI

» » Centrer l'avatar, le pseudo & le rang dans les messages
Couleur de background selon la catégorie Clock-10Mer 31 Jan 2024 - 10:06 par NIK SIURI

» » Modifier l'icône "On-line"
Couleur de background selon la catégorie Clock-10Mar 23 Mai 2023 - 19:15 par Kionk

» » Insérer des boutons "Haut" & "Bas" de forum
Couleur de background selon la catégorie Clock-10Mar 23 Mai 2023 - 11:40 par Kionk

Avril 2024
LunMarMerJeuVenSamDim
1234567
891011121314
15161718192021
22232425262728
2930     

Calendrier Calendrier

-40%
Le deal à ne pas rater :
Tefal Ingenio Emotion – Batterie de cuisine 10 pièces (induction, ...
59.99 € 99.99 €
Voir le deal

Couleur de background selon la catégorie

Voir le sujet précédent Voir le sujet suivant Aller en bas

Splash

StaffAdmin
StaffAdmin
Splash

MessageSplash Sam 14 Sep 2019 - 19:09

  • MP
  • Zoom
Hi,
Voici une astuce qui permet d'attribuer des couleurs différentes aux catégories et leurs sous-forums.

Voir :

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  " 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 :
Code:
<span class="cat1">
Post-it

cat2 pour la catégorie 2,
cat3 pour la catégorie 3, etc...

Voir :

Pensez à   Enregistrer   à chaque changement


Direction le javascript

Panneau d'administration / Modules / HTML & JAVASCRIPT / Gestion des codes javascript


Mettre ce script sur toutes les pages :
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');
});

Pensez à   Valider 2

Direction le CSS

Panneau d'administration / Affichage / Images et Couleurs / Couleurs / Feuille de style CSS


Mettre ce code à la CSS :
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***/

Pensez à   Valider 2

Post-it

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:
À bientôt
Bye




Pour bien réaliser cette astuce
Like a Star @ heaven 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
David1195

StaffModo
StaffModo
David1195

MessageDavid1195 Mar 17 Sep 2019 - 20:45

  • MP
  • Zoom
Merci beaucoup !

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Inscrivez-vous ou connectez-vous pour répondre

Vous devez être membre pour répondre.

Nous rejoindre

Inscrivez-vous pour participer au forum !


Nous rejoindre

Connexion

Vous êtes membre du forum, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum