Compteur de visites gratuit
CAForum infos
Derniers sujets
» » 14h de panne pour Facebook, la plus longue de son histoire
Sam 16 Mar 2019 - 22:10 par HeroxAquariophile

» » Afficher / Masquer la réponse rapide
Mer 13 Mar 2019 - 20:43 par David1195

» » Formulaire pour diaporama
Dim 10 Mar 2019 - 18:33 par Splash

» » Modifier l'apparence du qeel
Dim 10 Mar 2019 - 16:57 par Synoka

» » Masquer les statistiques du bas de forum (Nb de messages, Nb de membres, dernier inscrit)
Dim 10 Mar 2019 - 15:11 par David1195

» » Feuille de style pleine
Dim 10 Mar 2019 - 15:10 par David1195

» » Le coucou du jour
Ven 8 Mar 2019 - 14:02 par chrisnvidia

» » Différencier le mode texte et le mode WYSIWYG à l'éditeur
Ven 8 Mar 2019 - 13:24 par chrisnvidia

» » Les dernières informations de Forumactif
Mar 5 Mar 2019 - 18:31 par Splash

» » Transfonter
Lun 4 Mar 2019 - 11:10 par valou712

» » Spam, Phishing, Arnaques : Signaler pour agir
Lun 4 Mar 2019 - 10:57 par David1195

» » La feuille de style CSS
Lun 4 Mar 2019 - 10:56 par David1195

» » Enlever la bordure bleu au post-header
Lun 4 Mar 2019 - 10:51 par David1195

» » Le javascript
Dim 3 Mar 2019 - 9:15 par LilaCH

» » Les 30 ans du Web
Dim 3 Mar 2019 - 9:08 par LilaCH

» » Remplacer Servimg par Imgur
Dim 3 Mar 2019 - 9:03 par LilaCH

» » Ajouter imgur à l'éditeur de la réponse rapide
Dim 3 Mar 2019 - 9:03 par LilaCH

» » Ajouter les boutons liste à la réponse rapide
Dim 3 Mar 2019 - 9:02 par LilaCH

» » Un texte qui clignote
Dim 3 Mar 2019 - 9:02 par LilaCH

» » Ajouter des polices supplémentaires à l'éditeur
Dim 3 Mar 2019 - 9:01 par LilaCH

Mettre des couleurs différentes aux catégories

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

Splash

Splash

StaffAdmin
StaffAdmin

MessageSplash le Dim 23 Sep 2018 - 13:58

  • MP
  • Zoom
Mettre ce code javascript Sur l'index :
Code:
$(function(){
$('h2.category-title span:contains("Titre de la catégorie 1")').closest('div').attr('id','M14_CAT_0');
$('h2.category-title span:contains("Titre de la catégorie 2")').closest('div').attr('id','M14_CAT_1');
$('h2.category-title span:contains("Titre de la catégorie 3")').closest('div').attr('id','M14_CAT_2');
$('h2.category-title span:contains("Titre de la catégorie 4")').closest('div').attr('id','M14_CAT_3');
});

Chaque ligne de code ajoute un ID aux catégories à colorer (CAT_0 - CAT_1 - CAT_2 - CAT_3) et ainsi de suite suivant le nombres de catégories

Ensuite pour affecter les couleurs il faut mettre ce code à la Feuille de style CSS :
Code:

/* CATEGORIES EN COULEUR */

 /*DEBUT PREMIERE CATEGORIE*/
#M14_CAT_0.forum-header
{
background-color: couleur cat 1;  
}
#M14_CAT_0.forum-header  span
{
color: couleur du titre;
}
/*FIN PREMIERE CATEGORIE*/

/*DEBUT DEUXIÈME CATEGORIE*/
#M14_CAT_1.forum-header
{
background-color: couleur cat 2;
}
#M14_CAT_1.forum-header  span
{
color: couleur du titre;
}
/*FIN DEUXIÈME CATEGORIE*/

/*DEBUT TROISIÈME CATEGORIE*/
#M14_CAT_2.forum-header
{
background-color: couleur cat 3;
}
#M14_CAT_2.forum-header  span
{
color: couleur du titre;
}
/*FIN TROISIÈME CATEGORIE*/

/*DEBUT QUATRIÈME CATEGORIE*/
#M14_CAT_3.forum-header
{
background-color: couleur cat 4;
}
#M14_CAT_3.forum-header  span
{
color: couleur du titre;
}
/*FIN QUATRIÈME CATEGORIE*/

/* FIN CATEGORIES EN COULEUR */

Le background-color correspond à la couleur de fond des catégories
Le color correspond à la couleur de texte des titres des catégories

En image cela donne ceci :



Les catégories 1 & 4 ont une couleur identique
Les catégories 2 & 3 ont chacune une couleur attitrée




† Aucune aide ne sera donnée en privé

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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