Liste des sous-forums modulable

Auteur.e.s: Jei

Templates & CSS & JS

Templates modifiés:index_box

index_box

Remplacer l'intégralité du template par le code suivant:

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" />
 
<rpgbox class="header-links">
 <!-- BEGIN switch_user_logged_in -->
 <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
 <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
 <!-- END switch_user_logged_in -->
 <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
 <!-- BEGIN switch_user_logged_in -->
 <a href="{U_MARK_READ}" accesskey="m" class="rightside"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
 <!-- END switch_user_logged_in -->
</rpgbox>
 
<rpgbox class="picker"></rpgbox>
 
<rpgbox class="categories">
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<rpgbox class="category" data-id="{catrow.tablehead.L_FORUM}">
<div class="topiclist">
<!-- END tablehead -->
 
<!-- BEGIN forumrow -->
<div class="forumrow" data-name="{catrow.forumrow.FORUM_NAME}">
  <div class="fr_bg">
    <div class="fr_bg_trigger"><span class="mdi mdi-format-list-text"></span></div>
    <div class="fr_links">
      {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      {forumrow.SUBFORUMS}
    </div>
    
    <div class="fr_stats">
      <dd class="topics"><span class="mdi mdi-message"></span> {catrow.forumrow.TOPICS}</dd>
      <dd class="posts"><span class="mdi mdi-message-reply-text"></span> {catrow.forumrow.POSTS}</dd>
    </div>
  </div>
  
  <div class="fr_infos">
    <div class="fr_title"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></div>
    <div class="fr_desc">{catrow.forumrow.FORUM_DESC}</div>
  </div>
  
  <div class="fr_desccheck" style="display: none !important;">{catrow.forumrow.FORUM_DESC}</div>
  <div class="fr_lastpost">
    <!-- BEGIN avatar -->
    <span class="fr_avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
    <!-- END avatar -->
 
    <span class="fr_lp_details">
      <!-- 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 -->
      <span>{catrow.forumrow.USER_LAST_POST}</span>
    </span>
  </div>
</div>
<!-- END forumrow -->
 
<!-- BEGIN tablefoot -->
</div>
</rpgbox>
 <!-- END tablefoot -->
<!-- END catrow -->
</rpgbox>
  
<!-- 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">$(function() {
$('rpgbox.category').each(function() {
var regex = /(<([^>]+)>)/ig;
var body = $(this).attr('data-id');
var result = body.replace(regex, '');
$(this).attr('data-id', result);
 
    
    $('rpgbox.picker').append('<span class="pick" data-id="' + result + '">' + result + '</span>');
});
 
$('rpgbox.picker span').on('click', function() {
var regex = /(<([^>]+)>)/ig;
var body = $(this).attr('data-id');
var result = body.replace(regex, '');
 
    $(this).addClass('activecat');
    $(this).siblings().removeClass('activecat');
    $('rpgbox.category').hide();
    $('rpgbox.category[data-id="' + result + '"]').show();
});
  
$('rpgbox.picker span:first').addClass('activecat');
 
$('.fr_bg_trigger').on('click', function() {
    $(this).next().fadeToggle('100');
    $(this).parent().find('.fr_stats').fadeToggle('100');
});
  
$('.fr_links').each(function() {
    if ($(this).is(':empty')) {
        $(this).parent().find('.fr_bg_trigger').remove();
   $(this).remove();
    }
    });
 
var forumsizes2 = '.forumrow[data-name="Nom du forum"], .forumrow[data-name="Nom du forum"]';
var fselector2 = $(forumsizes2);
var forumsizes3 = '.forumrow[data-name="Votre 1er forum"]';
var fselector3 = $(forumsizes3);
 
fselector2.addClass('fsize2');
fselector3.addClass('fsize3');
  
});
</script>

css

Code:

/* - - - - - - 
------ LISTE DES SOUS-FORUMS MODULABLE - JEI
--- Merci de me créditer ! <3
- - - - - - */

/* - - Liens supérieurs (Nouveaux messages, marquer forums comme lus, etc.) - - */
rpgbox.header-links {
    display: block;
    margin: 2% 0;
    text-align: center;
    padding: 0 1%;
}

rpgbox.header-links a {
    color: #393939;
    font-size: 9pt;
    margin: 0 .5%;
    opacity: .75;
    transition: all .25s ease-in-out;
}

rpgbox.header-links a:hover {
    opacity: 1;
}

/* - - - - - - */
/* - - Choix de la catégorie à afficher - - */
rpgbox.picker {
    display: block;
    width: fit-content;
    margin: 2% auto;
    background-color: #f3f7fb;
    border-radius: 5px;
    padding: 5px;
    height: 50px;
}

span.pick {
    display: inline-block;
    margin: 0 10px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
 cursor: pointer;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    color: #767f8e;
}

span.pick.activecat {
    background-color: white;
    color: #013051;
    font-weight: 500;
}
/* - - - - - - */
/* - - Affichage des catégories - - */
rpgbox.category {
    display: none;
}

/* on affiche la première catégorie par défaut */
rpgbox.categories rpgbox.category:first-of-type {
    display: block;
}

rpgbox.category .topiclist {
    margin-left: 1%;
}

/* - - - - - - */
/* - - Affichage d'un sous-forum - - */
.forumrow {
    border: 1px solid #e5e5eb;
 background-color: #fff;
    width: 30%;
    display: inline-block;
    vertical-align: top;
    height: 300px;
    margin: 1.5%;
    text-align: left;
 overflow: hidden;
    box-sizing: border-box;
    border-radius: 10px;
}

/* block du haut - image de fond, affichage des liens des sous-forums du sous-forum et les stats */
.forumrow .fr_bg {
 background-image: url(https://i.imgur.com/Kup7K4z.png); /* image de fond par défaut - retirer ou changer */
 height: 100px;
 position: relative;
 background-size: 100% auto;
 background-position: center;
}

/* personnalisaton de l'image de fond de chaque sous-forum:
- - changer "Nom du forum" par le nom du sous-forum en question et changer le lien de l'image
- - par l'image voulue - copier, coller et répéter pour plusieurs sous-forums */
.forumrow[data-name="Nom du forum"] .fr_bg {
    background-image: url(https://i.imgur.com/NWyIAPZ.png);
}

/* affichage des sous-forums des sous-forums */
.fr_links {
 display: none;
    position: absolute;
    left: 30px;
    top: 0;
    right: 0;
    bottom: 0;
 box-sizing: border-box;
 padding: 2%;
    background-color: #00000075;
}

.fr_links a {
    color: white;
    margin: 0 5px;
    font-size: 9pt;
}

/* bouton affichant les sous-forums des sous-forums */
.fr_bg_trigger {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    text-align: center;
    color: white;
    transition: all .25s ease-in-out;
    background-color: transparent;
    height: 100px;
    line-height: 100px;
 cursor: pointer;
}

.fr_bg_trigger:hover {
    background-color: #00000075;
}

/* statistiques des sous-forums */
.fr_stats {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    background-color: #00000050;
    padding: 1%;
}

.fr_stats dd {
    font-size: 9pt;
    width: fit-content;
}

.fr_stats span {
    margin-right: 5px;
    font-size: 8pt;
}

/* titre du sous-forum */
.fr_title a.forumtitle {
    margin-top: 10px;
    color: #013051;
    font-weight: 500;
}

/* description du sous-forum
- - changer ou retirer le "-webkit-line-clamp: 3;" qui limite l'affichage de la description à 3 lignes */
.fr_desc {
    margin-top: 5px;
    font-size: 9pt;
    max-height: 70px;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    max-width: 100%;
}

.fr_infos {
    padding: 10px 5%;
    text-align: justify;
    height: 125px;
}

/* avatar du dernier posteur */
span.fr_avatar {
    width: 40px;
    height: 40px;
    overflow: hidden;
    display: inline-block;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
}

span.fr_avatar img {
    width: 100%;
    height: auto;
}

/* dernier message */
.fr_lastpost {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 0 0 7.5%;
}

span.fr_lp_details > span > br {
    display: none;
}

span.fr_lp_details > span > strong, span.fr_lp_details > span > span {
    margin-left: 8px;
}

span.fr_lp_details {
    padding-top: 8px;
}

span.fr_lp_details > span {
    font-size: 9pt;
}

span.fr_lp_details > span > a {
    margin-left: 5px;
    transform: translateY(-1px);
    display: inline-block;
}

/* on remonte l'affichage du dernier message si le forum n'a aucune description */
.fr_desccheck:empty + .fr_lastpost {
    margin-top: -40px;
}

/* côté modulable (largeur) des sous-forums */
.forumrow.fsize2 {
    width: 47%; }
.forumrow.fsize3 {
    width: 60%; }

Fonctionnement

Dans le template, la partie suivante se trouve dans le tag script à la fin:

Code:

var forumsizes2 = '.forumrow[data-name="Nom du forum"], .forumrow[data-name="Nom du forum"]';
var fselector2 = $(forumsizes2);
var forumsizes3 = '.forumrow[data-name="Votre 1er forum"]';
var fselector3 = $(forumsizes3);
 
fselector2.addClass('fsize2');
fselector3.addClass('fsize3');

Pour avoir ce résultat-ci (cliquer ici), il vous faut changer la partie var forumsizes2 = '.forumrow[data-name="Nom du forum"], .forumrow[data-name="Nom du forum"]'; en changeant "Nom du forum" par les forums dont vous souhaitez changer la largeur. Pour en avoir qu'un seul, retirer la virgule et la partie suivant celle-ci. Pour en avoir plus de deux, rajouter , .forumrow[data-name="Nom du forum"] à nouveau en changeant le "Nom du forum" par le troisième forum, et ainsi de suite.
Pour avoir le résultat suivant (cliquer ici), c'est pareil, à l'exception qu'il faut changer la ligne var forumsizes3 = '.forumrow[data-name="Votre 1er forum"]';.

Merci de créditer la, le ou les auteur(e/s) quelque part sur le forum: footer, sujet dédié, PA ou autre; c'est un travail qui a pris plusieurs heures de mon temps libre.

modernbb