Ajouter le module des derniers sujets

Présentation

Nous allons voir comment afficher n'importe où le module qui regroupe les derniers sujets dans lesquels il y a eu de l'activité. Les codes fournis sont personnalisés pour le Blank Theme mais le tutoriel est valable pour n'importe quel forum.

Installation  

Activer et configurer le module
Dirigez-vous dans votre panneau d'administration Module → Portail & Widgets → Gestion des widgets du forum puis cochez oui pour afficher les widgets du forum.

Dans la liste des widgets prédéfinis, cliquez et glissez le widget "Sujets récénts" à gauche (voir screenshot ci-dessous).



Enfin, cliquez sur la roue crantée pour accéder aux paramètres et désactivez le défilement des sujets.

Afficher le module
Le module peut être déplacé dans n'importe quel template. Pourquoi pas dans le début du template index_body pour une PA un peu poussée ou à la fin du même template pour l'intégrer à votre QEEL.

Copiez/collez le code suivant où vous le souhaitez.

Code:

<!-- BEGIN giefmod_index1 -->{giefmod_index1.MODVAR}<!-- END giefmod_index1 -->

Personnaliser le module
Le template du module se trouve dans Templates → Portails → mod_recent_topics et pour ce tutoriel je vous propose de remplacer tout son contenu par le code HTML suivant :

Code:

<div class="recent_topics">
    <!-- Titre "Derniers sujets" -->
    <h2 class="recent_topics-title">{L_RECENT_TOPICS}</h2>

    <!-- Container des derniers sujets -->
    <!-- BEGIN classical_row -->
    <div class="topics_container">
 
        <!-- Container d'UN dernier sujet -->
        <!-- BEGIN recent_topic_row -->
            <div class="recTopic">
                <!-- Tire du dernier sujet -->
                <a href="{classical_row.recent_topic_row.U_TITLE}" class="recTopic-title" >{classical_row.recent_topic_row.L_TITLE}</a>
                <br/>
          
                <span class="recTopic-info">
                    <!-- Auteur membre ou invité -->
                    <span class="recTopic--author">
                        <!-- BEGIN switch_poster -->
                        <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}" >{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
                        <!-- END switch_poster -->
                  
                        <!-- BEGIN switch_poster_guest -->
                        {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
                        <!-- END switch_poster_guest -->
                    </span>
                     -&nbsp;
                    <!-- Heure du dernier post -->
                    <span class="recTopic-time">{classical_row.recent_topic_row.S_POSTTIME}</span>

                </span>
            </div>
    <!-- END recent_topic_row -->
  
    </div>
    <!-- END classical_row -->
</div>

Puis, le CSS suivant :

Code:

/* Container du mocule */
.recent_topics {
    background-color: var(--neutralDark);
    border-radius: 5px;
    padding: 10px;
}

/* Titre du module */
.recent_topics-title {
    font-size: var(--large-size);
    font-weight: bold;
    text-transform: uppercase;
    margin: 5px 0 15px;
    text-align: center;
}

/* Container qui liste les derniers sujets */
.topics_container {
    border-radius: 10px;
    background-color: var(--neutral);
    padding: 10px;
    height: 180px; /* Hauteur de la liste */
    overflow: auto;
}

/* Container de chaque ligne */
.recTopic:not(:last-of-type) {
    border-bottom: 1px solid var(--neutralDark);
    padding: 4px 0 8px;
    margin-bottom: 8px;
}

Comme précisé en introduction, ce code est personnalisable comme vous le souhaitez !