Image de catégories différentes

[Chilidish]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://brokenmelodies.forumactif.com/

Description du problème

Bonjour à tous !
J'essaye d'appliquer une image différente à chaque catégorie grâce à un javascript, sans succès. J'aimerais que l'image dans mon code (.catone) soit différente selon la catégorie. J'ai essayé de suivre cette solution et d'autres trouvées sur forumactif et l'adapter à mon forum mais cela ne veut pas fonctionner.
Le javascript en question :

Code:

$(function(){
$('a.forumtitle:contains("Votre 1er forum")').closest('.catone').attr('id','IDENTIFIANT1');
});

Le CSS (pas complet, juste la partie pour que ça marche)

Code:

#IDENTIFIANT1{ background-image: url('https://i.pinimg.com/564x/16/74/28/167428cf650c3de29538ae2d1695c4d5.jpg')!important;}

Le template

Code:

<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
<div class="nomcate">{catrow.tablehead.L_FORUM}</div>
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
                          <div class="catwrap">
  <div class="catone"></div>
  <div class="catdeux"><b1><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></b1>
 <br> {catrow.forumrow.TOPICS} TOPICS et {catrow.forumrow.POSTS} POSTS<br>
  <span class="dernier_message">
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
  </div>
  <div class="cattrois"> {catrow.forumrow.FORUM_DESC}</div>
  <div class="catquat"><div class="contava">  <!-- BEGIN avatar -->
                          {catrow.forumrow.avatar.LAST_POST_AVATAR}
                            <!-- END avatar --></div></div>
  <div class="catcinq">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
</div>
            
               
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
         
   <!-- END tablefoot -->
<!-- END catrow -->


<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
   var btn_collapse = $('<div></div>', {
      class: 'btn-collapse'
   });

   var btn_collapse_show = $('<i></i>', {
      class: 'ion-android-add-circle hidden',
      'data-tooltip': '{L_EXPEND_CAT}'
   }).appendTo(btn_collapse);

   var btn_collapse_hide = $('<i></i>', {
      class: 'ion-android-remove-circle',
      'data-tooltip': '{L_HIDE_CAT}'
   }).appendTo(btn_collapse);

   var collapsed = [];

   if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
      collapsed = readCookie('collapsed').split(',');
   }

   $(document).on('click', '.btn-collapse', function() {
      $(this).children('.ion-android-add-circle').toggleClass('hidden');
      $(this).children('.ion-android-remove-circle').toggleClass('hidden');
      $(this).parents('.forabg').toggleClass('hidden');

      if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
         collapsed = readCookie('collapsed').split(',');
      }

      if (!$(this).parents('.forabg').hasClass('hidden')) {
         removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

         createCookie('collapsed', collapsed);
      } else {
         collapsed.push('' + $(this).parents('.forabg').data('cindex'));

         createCookie('collapsed', collapsed);
      }
   });

   $('.forabg').each(function(i) {
      $(this).data('cindex', '' + i);

      $(btn_collapse)
         .clone()
         .attr('id', 'forabg' + i)
         .appendTo($(this).find('.header'));

      if ($.inArray('' + i, collapsed) > -1) {
         $(this).toggleClass('hidden');
         $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
         $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
      }
   });
});

function removeFromArray(item, array) {
   var i = array.indexOf(item);

   if (i > -1) {
      array = array.splice(i, 1);
   }
}

function createCookie(name, value, days) {
   var expires;

   if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toGMTString();
   } else {
      expires = "";
   }
   document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
   var nameEQ = encodeURIComponent(name) + "=";
   var ca = document.cookie.split(';');
   for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
   }
   return null;
}
//]]>
</script>


Merci par avance !

[Toryudo]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour !

Votre structure de HTML étant un peu différente, il faut modifier le script en conséquence.
La fonction closest cherche l'élément .catone parmi les ancêtres du a.forumtitle en question, mais dans votre structure, .catone n'est pas un ancêtre de a.forumtitle, c'est plutôt... le frère d'un arrière-grand-père, si vous voyez ce que je veux dire.

Du coup, l'idée, c'est de remonter jusqu'à l'arrière-grand-père .catwrap, puis de chercher l'un de ses descendants .catone, comme ceci :

Code:

$(function(){
  $('a.forumtitle:contains("Votre 1er forum")').parents('.catwrap').find('.catone').attr('id','IDENTIFIANT1');
});

Et normalement, ce sera bon !

[Chilidish]

Ça marche !! Je savais que c'était sous mes yeux haha, merci beaucoup