Images différentes à chaque catégorie [modernBB]

[LouSheeta]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,
J'ai le même soucis que sur ce sujet : https://forum.forumactif.com/t385900-mettre-une-image-differente-en-fond-de-chaque-categorie.
A savoir, je souhaiterais mettre une image de background différente à chaque catégorie. Cependant, je suis sur le modernBB, donc de ce fait le code donné pour l'autre sujet ne fonctionne pas. Ce qui est au final normal.
Pouvez-vous m'aider ? Vous serez des z'amours
Merci d'avance.

[LouSheeta]

Up

[LouSheeta]

Upinup ?
Je rajoute mon template

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>
         <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 -->
      <section class="cat">
         <h2>{catrow.tablehead.L_FORUM}</h2>
         <ul class="fow">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
            <li style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat 0 30px, rgba(250, 250, 250, 0.8); background-size: 70% 170px, cover;">
               <h3>
                  <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
               </h3>
               <div class="lastpost">
                  <!-- BEGIN ads -->
                     <img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" />
                                          <span>
                                             <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                          </span>
                  <!-- END ads -->
                  
                                 <!-- BEGIN avatar -->
                                        <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                                     <!-- END avatar -->
                  <div>
                     <!-- BEGIN switch_topic_title -->
                        <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br/>
                                                        <span class="lp-infos">{catrow.forumrow.ads.DATE} {catrow.forumrow.ads.LOCATION} {catrow.forumrow.USER_LAST_POST}</span>
                     <!-- END switch_topic_title -->
                  </div>
               </div>
                                    <div class="desc">
                  {catrow.forumrow.FORUM_DESC}
                  <!-- BEGIN switch_moderators_links -->
                     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                  <!-- END switch_moderators_links -->
                  {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                  <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
               </div>
            </li>
   <!-- END forumrow -->

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

<!-- 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>
      <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
   </li>
   <!-- BEGIN switch_delete_cookies -->
      <li>
         <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;
}
 
  $(function(){
  $('section.cat h2:contains("Général")').closest('section.cat').attr('id','IDENTIFIANT1');
});
//]]>
 
 
</script>


Code:

/*BASES*/
   /*BASES BASES*/
      body, html, header, footer, nav, p {
         margin: 0;
         padding: 0;
         width: 100%;
         background-color: #f1f1f1;
         font-family: 'Verdana';
      }
      ul, ol{
         list-style-type: none !important;
         margin: 0;
         padding: 0;
      }
   /*BASES TITLES*/
      h1, h2, h3, h4, h5, h6 {
         font-family: 'Times New Roman';
         position: relative;
      }
      h1{
         text-align: center;
         font-size: 30pt;
      }
      h2{
         margin: 0 0 0 3em;
         font-size: 25pt;
         clear:both;
      }
      h3{
         text-align: center;
         font-size: 20pt;
      }
      h4{}
   /*BASES IMAGES*/
      img{
         width: 50px;
         height: 50px;
      }
   /*BASES LINKS*/
      a{
         text-decoration: none !important;
         text-transform: uppercase;
         color: silver;
         transition-property: all;
         transition-duration: 0.5s;
      }
      a:hover{color: #006391;}
      a:active{color: #006391;}

/*HEADER*/
   /*HEADER BASES*/
      header{
         background-color: #1D262C;
         background-image: url(https://i62.servimg.com/u/f62/19/85/65/29/header10.jpg);
         background-position: center center;
         background-repeat: no-repeat;
         height: 450px;
         background-size: cover;
         height: 550px;
         margin: 0;
         overflow: hidden;
         padding: 0;
         position: relative;
      }
   /*HEADER NAV*/
      ul#nav {
         width: 100%;
         z-index: 999;
         top: 0;
         position: fixed;
         text-align: center;
         margin: 0 auto;
         padding: 0;
         background-color: #f1f1f1;
         box-shadow: 0 2px 10px 1px rgba(80, 80, 80, 0.5);
            -webkit-box-shadow: 0 2px 10px 1px rgba(80, 80, 80, 0.5);
      }
      #nav li{
         display: inline-block;
         margin: 0;
         padding: 10px 0;
      }
      #nav li img{
         width: 0;
         height: 0;
      }
      #nav li a{
         font-family: 'Pacifico', cursive;
         letter-spacing: 0px;
         margin: 0;
         padding: 10px 15px;
         font-size: 15px;
         text-transform: none;
         color: #fff;
         text-shadow: -1px 0 0 rgba(69, 69, 69, 1),
            1px 0 0 rgba(69, 69, 69, 1),
            0 -1px 0 rgba(69, 69, 69, 1),
            0 1px 0 rgba(69, 69, 69, 1),

            -1px 0 1px rgba(69, 69, 69, 1),
            1px 0 1px rgba(69, 69, 69, 1),
            0 -1px 1px rgba(69, 69, 69, 1),
            0 1px 1px rgba(69, 69, 69, 1);
      }
      #nav li a:hover{
         color: #a0edfd;
      }

/*CATEGORIES*/
   /*CATEGORIES BASES*/
      .cat {
         box-sizing: content-box;
         width: 100%;
         height: auto;
         position: relative;
         text-align: center;
         word-spacing: 0px;
         margin: 0 auto;
         padding: 50px 0 130px;
         background-image: url(https://pre00.deviantart.net/3197/th/pre/i/2015/019/e/c/fantasy_landscape_by_raymondminnaar-d8eii74.jpg);
         background-size: cover;
         background-position: center center;
      }
      .cat::before {
         box-sizing: content-box;
         width: 100%;
         height: 80px;
         position: absolute;
         content: "";
         top: 0px;
         left: 0px;
         z-index: 50;
         background-image: url(http://nsm07.casimages.com/img/2018/02/11//18021105093212157315551309.png);
         background-size: 100% 100%;
      }
      .cat::after {
         box-sizing: content-box;
         width: 100%;
         height: 80px;
         position: absolute;
         z-index: 50;
         content: "";
         bottom: 0px;
         left: 0;
         background-image: url(http://nsm07.casimages.com/img/2018/02/11//18021105093112157315551308.png);
         background-size: 100% 100%;
      }
      .cat ul{
         text-align: center;
         margin: 0 auto;
         vertical-align: top;
      }
   /*CATEGORIES TITLES*/
      .cat h2{
         color: #fff;
         font-family: Pacifico, cursive;
         font-size: 35px;
         letter-spacing: 0;
         margin: -20px 0 50px 0;
         padding: 0 15px;
         text-shadow: -1px 0 0 rgba(69,69,69,1), 1px 0 0 rgba(69,69,69,1), 0 -1px 0 rgba(69,69,69,1), 0 1px 0 rgba(69,69,69,1), -1px 0 1px rgba(69,69,69,1), 1px 0 1px rgba(69,69,69,1), 0 -1px 1px rgba(69,69,69,1), 0 1px 1px rgba(69,69,69,1);
         text-transform: none;
      }

/*FORUM*/
   /*FORUM BASES*/
      ul.fow{
         width: 100%;
      }
      .fow li{
         position: relative;
         width: 40%;
         height: 200px;
         display: inline-block;
         margin: 0 2.5% 5%;
         text-align: center;
         box-shadow: 0 0 10px 0 #3B3B3B;
            -o-box-shadow: 0 0 10px 0 #3B3B3B;
            -webkit-box-shadow: 0 0 10px 0 #3B3B3B;
         }
      .fow a{
         font-family: 'Poiret One', cursive;
         font-size: 18px;
         color: #fff;
         width: 100%;
         padding: 0 auto;
      }
   /*FORUM TITLE*/
      .fow h3{
         width: 100%;
         height: 30px;
         vertical-align: middle;
         background-color: rgba(145, 145, 145, 0.5);
         text-shadow: -1px 0 0 rgba(69, 69, 69, 1),
            1px 0 0 rgba(69, 69, 69, 1),
            0 -1px 0 rgba(69, 69, 69, 1),
            0 1px 0 rgba(69, 69, 69, 1),

            -1px 0 1px rgba(69, 69, 69, 1),
            1px 0 1px rgba(69, 69, 69, 1),
            0 -1px 1px rgba(69, 69, 69, 1),
            0 1px 1px rgba(69, 69, 69, 1);
      }
   /*FORUM CONTENUE*/
      /*FORUM DESCRIPTION*/
         .desc{
            position: absolute;
            right: 0;
            bottom: 0;
            padding: 5px 5px 10px 5px;
            overflow: auto;
            height: 80px;
            width: 76%;
            font-family: 'Verdana';
            font-size: 10px;
            text-align: justify;
            border-top-left-radius: 10px;
               -moz-border-radius-topleft: 10px;
               -webkit-border-top-left-radius: 10px;
            border-bottom-left-radius: 40px;
               -moz-border-radius-bottomleft: 40px;
               -webkit-border-bottom-left-radius: 40px;
         }
      /*FORUM LAST POST*/
         .lastpost{
            position: absolute;
            right: 0;
            top: 26;
            width: 75%;
            height: 70px;
            margin: 10px 5px 10px 0;
            padding: auto 0;
            font-size: 10px;
            font-family: 'Verdana';
         }
         .lastpost-avatar img {
            display: block;
            position: relative;
            z-index: 1;
            height: 55px;
            width: 55px;
            padding:0;
            background-color :rgba(250, 250, 250, 1);
            border: 2px solid #fff;
            border-radius: 55px;
            box-shadow: 0 0 5px -0 rgba(69,69,69,1);
               -moz-box-shadow: 0 0 5px -0 rgba(69,69,69,1);
               -webkit-box-shadow: 0 0 5px -0 rgba(69,69,69,1);
         }
         .lastpost-avatar::after{
            display:none;
         }
         .lastpost div{
            position: absolute;
            left: 25px;
            width: 80%;
            height: 48px;
            margin: 14px 0 0 0;
            overflow: hidden;
            background-color :rgba(250, 250, 250, 0.5);
            border-color: #5e5e5e;
            border-style: dotted;
            border-width: 1px 0;
         }
         .lastpost a{
            font-weight: bolder;
            font-size: 12px;
            color: #404040;
         }
         .lp-infos a{
            font-size: 10px;
         }
         .last-post-icon img{
            height: 8px;
            width: auto;
         }

/*LISTLINK*/
   .linklist-top, .linklist-bottom{
      width: 100%;
      text-align: center;
      margin: 0 0 20px 0;
   }
   .linklist-top li, .linklist-bottom li{
      display: inline-block;
   }
   .linklist-top a, .linklist-bottom a{
      font-size: 10px;
   }



#IDENTIFIANT 1{
  background : url(http://abduzeedo.com/sites/default/files/originals/floating_islands_by_sebastianwagner-d606krh.jpg);
}

[MasDan]

Bonjour LouSheeta,

En utilisant le tuto cité dans votre premier message, remplacer le code javascript par le code suivant

Code:

$(function(){
  $('section.cat h2:contains("NOM DE LA CATEGORIE 1")').closest('section.cat').attr('id','IDENTIFIANT1');
});

[LouSheeta]

Je vais tester cela et je vous dis ce qu'il en est. Merci.

[LouSheeta]

Ca fonctionne merci beaucoup ^^