Récupérer l'id de forums en particulier sous modernBB

[Snow White]

Détails techniques

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

Description du problème

Bonsoir,

Je souhaiterai réaliser un design avec des designs propres à chaque catégorie/forum comme sur mon forum test cependant le tuto que j'utilise : https://www.never-utopia.com/t54098-faire-un-design-different-pour-chaque-categorie-html-et-css n'est adapté qu'à du phpbb, je voulais savoir comment faire la même chose sur modernBB

Voici mon index_body au cas où

Code:

<ul class="linklist top">
   <!-- BEGIN switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
   </li>
   <li>
      <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
   </li>
   <!-- END switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
   </li>
   <!-- BEGIN switch_user_logged_in -->
      <li class="rightside">
         <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
      </li>
   <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="forabg">
         <div class="catTTL">{catrow.tablehead.L_FORUM}</div>
         <section class="forumline aroundCategories">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
                          
                          <div class="blocFO"><div class="backForum">
                             <div class="blocLFT">
                                  <div class="hoverLFT">
                                 <div class="nbrSJT">{catrow.forumrow.TOPICS} {L_TOPICS}</div><div class="nbrMSG">{catrow.forumrow.POSTS} {L_POSTS}</div>
                                  <div class="descFO">{catrow.forumrow.FORUM_DESC}</div>
                                 <div class="subFO">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>   
                                    <script type="text/javascript">$('.subFO').each(function(){$(this).html($(this).html().replace(/,/g,""));});</script>
                               </div>
                                </div>
                            <div class="blocRGT"><div class="boxTTLFO"></div>
                                 <div class="lkFO"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></div>
                                  <div class="lastAVA">
                                       <!-- BEGIN avatar -->
                                  <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                                  <!-- END avatar -->
                                    </div>
                                    <div class="icnFOimg"><dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                                      <div class="icnFO" style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};"></div></div>
                                 <div class="lstSJT">
                                    <span class="lastpost-infos">
            <!-- BEGIN switch_topic_title -->
                                      <div class="tpcTTL"><a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a></div>
            <!-- END switch_topic_title -->
                                      <div class="topicUSR">{catrow.forumrow.USER_LAST_POST}</div>
                </span>
                             </div>
                                </div></div>
                          </div>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
      </div>  </section>
   <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_forum_images -->
<div class="forabg">
   <div class="header">
      <h3 class="table-title" style="padding:18px;display:block;margin:0;">{switch_forum_images.TITLE}</h3>
   </div>
   <div class="container-imgs-list" style="max-height: 500px" id="imageList">
        {switch_forum_images.SCRIPTS}
   </div>
</div>
<!-- END switch_forum_images -->

<!-- BEGIN switch_on_index -->
<ul class="linklist bottom">
   <li>
      <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
   </li>
   <li>
      <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
   </li>
   <li class="last">
      <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
   </li>
   <!-- BEGIN switch_delete_cookies -->
      <li class="rightside">
         <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
      </li>
   <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<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 d'avance ! J'ai cherché mais sans succès, je ne suis pas du tout familier avec cette version

EDIT : j'ai trouvé ça pour les catégories : https://tambouille-raleuses.forumactif.com/t493-invision-modernbb-awesomebb-selectionner-des-categories-a-deplier-replier-en-un-clic soit la balise data-id-cate="{catrow.tablehead.ID}"> mais j'aimerais celle pour l'id des forums

[Toryudo]

Bonjour !

Alors, ça se passe plutôt dans le Template index_box.
Effectivement, vous allez avoir la variable {catrow.tablehead.ID} qui donne l'id de la catégorie.

Par contre, l'id du forum, c'est plus compliqué...
On va utiliser une astuce pas très propre.

Imaginons que vous voulez mettre l'id sur le row (la ligne qui correspond au forum), vous allez mettre :

Code:

<li class="row" id="{catrow.forumrow.U_VIEWFORUM}">

{catrow.forumrow.U_VIEWFORUM}, c'est le lien du forum. Ça veut dire que dans l'id de .row, on met le lien du forum, par exemple "/f5-sous-forum". Ça ne le transforme pas en lien, c'est juste un id qui aurait le même nom qu'un lien, ça ne pose pas de problème. L'avantage, c'est qu'en CSS, on va ensuite pouvoir le cibler précisément comme ceci (ne pas oublier le \ après le #, c'est comme ça qu'il faut l'écrire) :

Code:

#\/f5-sous-forum {
  background: red;
}

Je vous laisse faire plusieurs tests, parce que c'est du bidouillage... je ne suis pas sûr à 100% que ça marche à tous les coups !

[Snow White]

Bonjour !

C'est parfait ! Merci beaucoup !