Catégories modernBB : icônes du forum absentes

[professeur felyne]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 15/11/2020
Lien du forum : https://professeurfelyne.forumactif.com/

Description du problème

Bonjour.

Je viens de rentrer et de personnalisé un code en LS et je ne sais pas comment ajouter les icônes de forum.
Pourriez-vous m'aider s'il vous plaît?

Template index_box

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="categories__wrapper">
            <div class="categories__title-wrapper">{catrow.tablehead.L_FORUM}</div>
            <!-- END tablehead -->
            <!-- BEGIN forumrow -->
        
            <div class="categories__forum-line" data-new="{catrow.forumrow.L_FORUM_FOLDER_ALT}">
                <div class="categories__first-part">
                    <div class="categories__title-forum">
                        <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                    </div>
                    <div class="categories__description-forum">
                        {catrow.forumrow.FORUM_DESC}
                    </div>
                    <div class="categories__topics-messages">
                        <span class="categories__topics">{catrow.forumrow.TOPICS} sujets</span> & <span class="categories__messages">{catrow.forumrow.POSTS} messages</span>
                    </div>
                </div>
        
                <div class="categories__sous-forums-links">
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                </div>
        
                <div class="categories__lastpost">{catrow.forumrow.LAST_POST}</div>
        
            </div>
    <!-- END forumrow -->
    <!-- BEGIN tablefoot -->
        </div>
    <!-- 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 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>


CSS

Code:

/*--------------------CATEGORIES-----------------------------*/
// Codage des catégories par Nevyin pour La Tambouille et XOOGGE
// https://www.xoogge.fr
// https://tambouille-raleuses.forumactif.com/
.categories__wrapper {
    padding: 10px;
}

.categories__wrapper .categories__title-wrapper h2 {
    position: relative;
    box-sizing: border-box;
    height: 50px;
    margin: 0;
    padding: 10px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    line-height: 34px;
    color: white;
    background: #462100;
    box-shadow:0px 2px 5px #000;
}

.categories__wrapper .categories__title-wrapper h2 {
    margin: 0;
    font-size: 24px;
    color: white;
}

.categories__wrapper .categories__forum-line {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0px;
    padding: 10px;
    background: #efefef;
      box-shadow:0px 2px 5px #000;
}

.categories__wrapper .categories__forum-line:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 3px solid #efefef;
    pointer-events: none;
}

.categories__wrapper .categories__forum-line[data-new="Nouveaux messages"]:after {
    border-color: #462100;
}

.categories__wrapper .categories__forum-line[data-new="Ce forum est verrouillé, vous ne pouvez pas poster, ni répondre, ni éditer les sujets."]:after {
    border-color: #989898;
}

.categories__wrapper .categories__forum-line .categories__first-part {
    z-index: 10;
    position: relative;
    box-sizing: border-box;
    width: 60%;
    height: 113px;
    padding-right: 10px;
    border-right: 1px solid #462100;
}

.categories__wrapper .categories__forum-line .categories__first-part .categories__title-forum a {
    text-decoration: none !important;
    font-size: 18px;
    font-weight: bold;
    color: #462100;
    transition: .4s color;
}

.categories__wrapper .categories__forum-line .categories__first-part .categories__title-forum a:hover {
    color: #636363;
}

.categories__wrapper .categories__forum-line .categories__first-part .categories__description-forum {
    box-sizing: border-box;
    height: 70px;
    padding: 10px;
    overflow: auto;
    font-size: 12px;
    color: #585858;
    background: white;
}

.categories__wrapper .categories__forum-line .categories__first-part .categories__topics-messages {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 20px;
    font-size: 12px;
    color: #636363;
}

.categories__wrapper .categories__forum-line .categories__first-part .categories__topics-messages span {
    margin: 0 3px;
}

.categories__wrapper .categories__forum-line .categories__first-part .categories__topics-messages span:last-child {
    margin-right: 0;
}

.categories__wrapper .categories__forum-line .categories__sous-forums-links {
    display: flex;
    z-index: 10;
    position: relative;
    flex-direction: column;
    justify-content: top;
    box-sizing: border-box;
    width: 20%;
    height: 113px;
    padding: 0 10px;
    border-right: 1px solid #462100;
    overflow: auto;
    font-size: 0;
}

.categories__wrapper .categories__forum-line .categories__sous-forums-links a {
    display: block;
    margin-bottom: 2px;
    padding: 4px 0;
    text-align: center;
    text-decoration: none !important;
    font-size: 12px;
    line-height: 10px;
    color: #462100;
    background: white;
    transition: .4s background,.4s color;
}

.categories__wrapper .categories__forum-line .categories__sous-forums-links a:hover {
    color: white;
    background: #462100;
}

.categories__wrapper .categories__forum-line .categories__lastpost {
    display: flex;
    z-index: 10;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    width: 20%;
    height: 113px;
    padding-left: 10px;
    text-align: center;
    font-size: 12px;
}

.categories__wrapper .categories__forum-line .categories__lastpost > span {
    width: 100%;
}

.categories__wrapper .categories__forum-line .categories__lastpost > span > a {
    text-decoration: none !important;
    color: #462100;
}

Merci d'avance pour votre réponse.

Source du LS : https://tambouille-raleuses.forumactif.com/t1109-categories-en-3-colonnes-et-les-nouveaux-messages-en-bordure

[professeur felyne]

J'ai résolu moi-même le soucis en faisant quelques recherches et en jouant sur la "logique"

Voir l'image:

Entre la ligne 27 et 28 du template, j'ai ajouté ça

Code:

<div class="icon_forum">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>

Puis ça au CSS

Code:

.icon_forum {
           width: 70px;
           height: 70px;
           border: 1px solid black;
           margin-top:10px
           margin-right:10px;
           text-align: center;
           display: table-cell;
           vertical-align: middle
           overflow: hidden;
}

.icon_forum img{
display:inline-block; vertical-align:top;
  width:65px; height:68px;}

.categories__description-forum img{
  display:inline-block; vertical-align:top;
  margin-right:10px;
  width:100px; height:50px;}