catégorie forum phpBB2

[Petit Coq]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://lespoulaillers-bf.forumactif.org

Description du problème

Bonsoir, comment fait-on pour avoir une couleur différente pour chaque catégories et aussi pour pouvoir les replier et déplier ?

Merci, mon fofo est un phpBB2

Encore merci

[Flaura]

Bonjour,

pour replier et déplier les catégories, voici un tuto: https://forum.forumactif.com/t262264-categorie-retractable-sans-invision

pour les couleurs différentes, par contre, je ne sais pas (sauf si il s'agit juste du titre de la catégorie)

[Miettes]

Coucou

Tu peux jouer avec un peu de javascript :

> A n'afficher que sur l'index :

Code:

$(function () {
   // Ajout id pour chaque catégorie
   var n = 1;
   $( '.three-col .forumline .secondarytitle' ).each(function( index ) {
      $(this).parent().parent().parent().attr('id', 'cate'+n+'');
      n++;
   });
});

En gros, on parcourt chaque "titre de catégorie", puis, on remonte le code pour arriver sur le tableau qui contient toute la catégorie et on lui ajoute un id du type : cateN où N est calculé automatiquement. Ce qui donnera par exemple :
G.E.I-C - LE FORUM => id="cate1"
G.E.I-C - GOODGAME BIG FARM => id="cate2"
G.E.I-C - ESPACE DÉTENTE => id="cate3"

Ensuite, il te ne reste plus qu'à t'amuser avec la CSS

[Petit Coq]

Bonsoir à tous !


Merci mais j'ai pas trop compris Miette dsl :-)

[Miettes]

Coucou

qu'est ce que tu n'as pas compris ?

[Petit Coq]

Euh.... tout, je maitrise pas trop :-(

[Miettes]

Bon ^^ Je vais essayer de t'expliquer le javascript ^^

- Le script se lancera une fois la page chargée :

Code:

$(function () {

- On crée une variable (= une sorte de case mémoire) qui commencera à 1

Code:

var n = 1;

- On parcourt chaque titre de catégorie :

Code:

$( '.three-col .forumline .secondarytitle' ).each(function( index ) {

- On ajoute sur le "parent du parent du parent" (= en gros sur le tableau contenant la catégorie) un id qui contiendra un nombre pour pouvoir la cibler :

Code:

$(this).parent().parent().parent().attr('id', 'cate'+n+'');

- Ensuite, on ajoute 1 à la variable :

Code:

n++;

Autrement dit, le code html de ta page va être "virtuellement modifié" pour ajouter un id sur chaque tableau de catégorie.

Du coup,

> Le tableau de la catégorie 1 aura l'id "cate1"
> Le tableau de la catégorie 2 aura l'id "cate2"
....

C'est plus clair ou pas du tout ?

[Petit Coq]

CC, euh trop compliqué pour ma petite personne, je vais abandonné :-(

[Miettes]

On peut le faire pour toi je pense (si tu nous dis les couleurs que tu veux) ; mais ça veut dire que tu ne sauras pas le modifier tout seul :/

[Petit Coq]

Coucou, euh oui ca serait super sympas

caté1 = #359FD4
caté2 = #71BF46
caté3= #E6AD1E
caté 4 = #E64733

Merci bien

[Miettes]

Coucou

Du coup :

> Javascript à n'afficher que sur l'index :

Code:

$(function () {
  // Ajout id pour chaque catégorie
  var n = 1;
  $( '.three-col .forumline .secondarytitle' ).each(function( index ) {
      $(this).parent().parent().parent().attr('id', 'cate'+n+'');
      n++;
  });
});

> La CSS :

Code:


/*** --- Couleurs de fond des catégories ---*/

.forumline#cate1 td{
  background: #359FD4;
}

.forumline#cate2 td{
  background: #71BF46;
}

.forumline#cate3 td{
  background: #E6AD1E;
}

.forumline#cate4 td{
  background: #E64733;
}


[Petit Coq]

Merci et du coup, les couleurs des forums, on peut les changer ou non ?


Encore merci

[Miettes]

C'est à dire ?

Par exemple, quand tu es là :
http://groupementcoop-bf.forumactif.org/f14-informations-du-forum

d'avoir cette couleur : #359FD4 ?

[Petit Coq]

Coucou, oui c'est ca ^^

[Miettes]

Coucou

On va donc modifier ce qu'on a fait en remplacer la CSS par :

Code:

 
/*** --- Couleurs de fond des catégories ---*/
 
.forumline.cate1 td{
  background: #359FD4;
}
 
.forumline.cate2 td{
  background: #71BF46;
}
 
.forumline.cate3 td{
  background: #E6AD1E;
}
 
.forumline.cate4 td{
  background: #E64733;
}

et en remplaçant le javascript par :

Code:

$(function () {
 
  // Ajout class pour chaque catégorie
  (function(){
      var n = 1;
      $( '.three-col .forumline .secondarytitle' ).each(function( index ) {
          $(this).parent().parent().parent().attr('class', 'cate'+n+'');
          n++;
      });
  })();

  // Couleurs de fond en fonction de la catégorie
  (function(){
    if( $('div.nav a.nav:first-child + h1 a.nav').length ){
      var nom_cate = $('div.nav a.nav:first-child + h1 a.nav').attr("href")
      , nom_classe ;

      switch (nom_cate) {
        case 'c2-g-e-i-c-le-forum' :
          nom_classe = 'cate1';
          break;
        case '/c8-g-e-i-c-goodgame-big-farm' :
          nom_classe = 'cate2';
          break;
        case '/c4-g-e-i-c-espace-detente' :
          nom_classe = 'cate3';
          break;
        case '/f10-archives' :
          nom_classe = 'cate4';
          break;
        default:
          nom_classe = '';
      }

      $('.forumline').addClass(nom_classe);
    }

  })();

});



On va aussi afficher le javascript sur toutes les pages (et pas seulement sur l'index).

[winatickets]

Bonjour miettes on parle de la même chose mais moi je suis en phbb3 et sa ne marche pas ( je ses que ses la le phbb2) donc c'est pour sa ouvert un topic sur le même sujet pour version phbb3 : lien

merci à tous de vos aides

[Petit Coq]

Coucou miette, ca marche pass

[Miettes]

Tu peux quand meme le mettre sur ton forum que je puisse voir ce qui pose problème ?

[winatickets]

Bonjour miette , pour commencer sache que je suis pas la pour me prendre la tête ni de spammer , sauf que d'une j'ai le même soucis sous phbb3 et surtout j'ai

Don Vito Corleone modérateur forumactif

qui à indiqué de venir aussi ici pour piocher informations etc....car on souhaitent en gros la même chose petit coq sous pphbb2 et moi sous phbb3

donc je vois pas ou est le soucis , bref merci de ton professionnalisme et j'attendrai ton aide merci encore

amicalement serge

---

Edit Walt : @Don Vito Corleone n'est pas membre de l'équipe de ce forum.

[Miettes]

Plus tu spammeras ce topic plus j'ignorerai tes messages (et probablement le sujet de ton aide).... Inutile donc de venir polluer ce message sauf si c'est pour proposer une solution au problème de Petit Coq.

Merci d'avance.

[Petit Coq]

Voila Miettes c'est fait, merci bcp

Merci de ta compréhension winatickets

[Miettes]

Ok je vois ^^

Du coup, ça fonctionne, mais à moitié ^^

Voilà le bon javascript :

Code:

$(function () {
 
  // Ajout class pour chaque catégorie
  (function(){
      var n = 1;
      $( '.three-col .forumline .secondarytitle' ).each(function( index ) {
          $(this).parent().parent().parent().addClass('cate'+n+'');
          n++;
      });
  })();
 
  // Couleurs de fond en fonction de la catégorie
  (function(){
    if( $('div.nav a.nav:first-child + h1 a.nav').length ){
      var nom_cate = $('div.nav a.nav:first-child + h1 a.nav').attr("href")
      , nom_classe ;
 
      switch (nom_cate) {
        case '/c2-g-e-i-c-le-forum' :
          nom_classe = 'cate1';
          break;
        case '/c8-g-e-i-c-goodgame-big-farm' :
          nom_classe = 'cate2';
          break;
        case '/c4-g-e-i-c-espace-detente' :
          nom_classe = 'cate3';
          break;
        case '/f10-archives' :
          nom_classe = 'cate4';
          break;
        default:
          nom_classe = '';
      }
 
      $('.three-col > tbody > tr > td > .forumline').each(function( index ) {
        $(this).addClass(nom_classe);
      });
    }
 
  })();
 
});
 

[Petit Coq]

Merci beaucoup ca marche :-)