Images différentes pour chaque catégorie

[Runa Moon]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Dès le début.
Lien du forum : http://les-mondes-sauvages.forumsrpg.com/

Description du problème

Bonjour,
Je suis en pleine construction de forum (c'est pas bien beau on est d'accord), et je patine en codage.

Comme vous pouvez le voir sur la capture d'écran, j'ai installé un petit CSS qui me permet d'avoir une image comme fond de catégorie. Seulement j'aimerais avoir une image différente pour chaque catégorie, et c'est là que le bât blesse : on fait ça comment ? Est-ce seulement possible ?

Mon petit code :

Code:

*IMG TITRES CATEGORIES*/
.secondarytitle {
    background: url(https://zupimages.net/up/19/48/8v38.png) no-repeat;
    ligne-height: 100px;
    text-align: center;
}
th.secondarytitle{
height: 100px;
}
/*IMG TITRES CATEGORIES - END*/

D'avance, je vous remercie

[Miettes]

Coucou

Le plus simple c'est de faire un js qui va ajouter un id à chaque titre de catégorie :

Code:


$(function(){
   var cpt = 1 ;

   // On parcourt chaque titre de catégorie
   $('.forumline th.secondarytitle').each( function(){
      // On lui ajoute un id unique
      $(this).attr('id', 'titre-cate'+ cpt +'');

      // On incrémente de 1 le compteur
      cpt ++;
   });
});


JS à n'afficher que sur l'index

et ensuite, en CSS, tu auras juste à cibler cet id. Par exemple :

Code:


.forumline th.secondarytitle#titre-cate1{
   background: #e26e26;
}

.forumline th.secondarytitle#titre-cate2{
   background: blue;
}


[Runa Moon]

Eeeeeuuuh, comme je l'ai dit, je patine en codage

Du coup autant faire un copié-collé dans mon CSS je sais faire, autant traiter la première partie de ton message je ne sais pas m'y prendre.... Est-ce qu'il faut que je l'ajoute dans un template ou dans le CSS aussi ?

[Miettes]

Ah pardon

On va aller dans
Panneau d'administration > modules > HTML & JAVASCRIPT > Gestion des codes Javascript

Ensuite, on va cocher "oui" à la ligne "Activer la gestion des codes Javascript" et on sauvegarde.

finalement, on va créer un nouveau javascript qu'on va nommer "Compteur titre catégorie", on va cocher "sur l'index" et on y met ce code :

Code:

 
$(function(){
  var cpt = 1 ;
 
  // On parcourt chaque titre de catégorie
  $('.forumline th.secondarytitle').each( function(){
      // On lui ajoute un id unique
      $(this).attr('id', 'titre-cate'+ cpt +'');
 
      // On incrémente de 1 le compteur
      cpt ++;
  });
});

et on sauvegarde.

(il n'y a rien à changer dans ce code )

[Runa Moon]

Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaahh d'accooooooord
J'me sens nouille -_-

Je teste dans la seconde et je te dis !

[Miettes]

ça marche

[Runa Moon]

Miettes.....
Je suis love de toi.

J'ai un peu galéré à comprendre, mais grâce à toi je vais pouvoir avoir exactement la MEF que je veux sur mes titres de catégories ! Tu es géniale !

Dis moi, en passant, est-ce que tu sais comment espacer un peu plus mes catégories ?

[Miettes]

tu peux ajouter ça dans la CSS :

Code:


.forumline + img[src$="empty.gif"]{
   height: 20px;
}


(ici, je précise qu'on travaille sur l'image qui suit juste après le tableau parce que les class forumline sont beaucoup utilisées sur le forum et il ne faudrait pas impacter d'autres choses )

[Runa Moon]

Merci pour tout !

[Miettes]

De rien

Bon courage avec la construction de ton forum ^^

[Runa Moon]

Merci

Vu ta compétence, je pourrais refaire appel à toi ?

[Miettes]

Pas de souci, je passe de temps en temps par ici