Bonjour, bonsoir -- voici le premier qeel en libre-service que je poste. Le QEEL est codé en flex, la largeur de votre forum ne devrait pas poser de problème comme il se redimensionne tout seul,
voici un petit tutoriel pour que vous puissiez installer le code sans problème.

VERSION LIVE DU QEEL
LIEN VERS LA PA QUI VA AVEC
LIEN VERS LES CATÉGORIES QUI VONT AVEC

---

(1) Avant toute chose, voici les informations importantes:

Avant toute chose, s'il vous plaît ne supprimez pas le crédit écrit en bas du qeel. Si je remarque qu'il n'y en pas, je vais le notifier à FA. C'est un QEEL, pas une signature et ça m'a pris beaucoup de temps pour le terminer, du coup s'il vous plaît respectez le travail qui a été fait.


Si vous avez des questions je vous renvoie à mon tumblr et/ou ce sujet sur le forum.

---

(2) LES CODES

HTML

Pour installer l'HTML, il vous suffit d'aller dans le panneau d'administration, affichage, templates, général, index_body

Quand vous ouvrez la template et n'avez pas besoin de tout remplacer. Trouvez la balise

Code:

<!-- BEGIN disable_viewonline -->

Elle devrait se terminer avec cette balise:

Code:

<!-- END disable_viewonline -->

Remplacez les balises et le code HTML dedans par le code ci-dessous:

CODE POUR MODERNBB & PHPBB3

Code:

<!-- BEGIN disable_viewonline -->
<div class="qeel_container">
    <div class="qeel1">
        <div class="qeel4">
            <div class="qeel_dc">
                <span id="vingtquatre">
                    {L_CONNECTED_MEMBERS}
                    <script type="text/javascript">document.getElementById('vingtquatre').innerHTML = document.getElementById('vingtquatre').innerHTML.replace(/Membres connectés au cours des 24 dernières heures/, "<w>MEMBRES PRÉSENTS CES DERNIÈRES 24 HEURES</w>");
                    </script>
                </span>
            </div>
            <div class="qeel_nmcred">
                <div class="qeel_nm">
                    <div class="qeel_avatar">
                        <span id="avatar_dernier_membre">
                        </span>
                    </div>
                    <div class="qeel_nouvmembre">
                        <span id="dernier_membre">
                            {NEWEST_USER}
                            <script type="text/javascript">document.getElementById('dernier_membre').innerHTML = document.getElementById('dernier_membre').innerHTML.replace(/L'utilisateur enregistré le plus récent est/, "");
                            </script>
                        </span>
                    </div>
                    <div class="qeel_bienvenue">
                        bienvenue sur forum
                    </div>
                </div>

                <div class="qeel_cred">
                    Un petit texte ici, avec les crédits par exemple.
                </div>
            </div>
        </div>
        <div class="qeel_groups">
            <div class="group">
                <a href="https://iceandfire-forumtest.forumieren.de/" target="_blank"><span style="color:var(--gr1);">groupe 1</span></a>
            </div>
            <div class="group">
                <a href="https://iceandfire-forumtest.forumieren.de/" target="_blank"><span style="color:var(--gr2);">groupe 2</span></a>
            </div>
            <div class="group">
                <a href="https://iceandfire-forumtest.forumieren.de/" target="_blank"><span style="color:var(--gr3);">groupe 3</span></a>
            </div>
            <div class="group">
                <a href="https://iceandfire-forumtest.forumieren.de/" target="_blank"><span style="color:var(--gr4);">groupe 4</span></a>
            </div>
            <div class="group">
                <a href="https://iceandfire-forumtest.forumieren.de/" target="_blank"><span style="color:var(--gr5);">groupe 5</span></a>
            </div>
        </div>
    </div>
    <div class="qeel2">
        <div class="qeel_stats">
            <span id="nbutilisateurs">
                {TOTAL_USERS_ONLINE}
                <script type="text/javascript">document.getElementById('nbutilisateurs').innerHTML = document.getElementById('nbutilisateurs').innerHTML.replace(/Il y a en tout/, "");
                </script>
                <script type="text/javascript">document.getElementById('nbutilisateurs').innerHTML = document.getElementById('nbutilisateurs').innerHTML.replace(/utilisateurs en ligne/, "âmes vagabondes");
                </script>
                <script type="text/javascript">document.getElementById('nbutilisateurs').innerHTML = document.getElementById('nbutilisateurs').innerHTML.replace(/utilisateur en ligne/, "âme vagabonde");
                </script>
                <script type="text/javascript">document.getElementById('nbutilisateurs').innerHTML = document.getElementById('nbutilisateurs').innerHTML.replace(/::/, "<br/>");
                </script>
            </span>
        </div>
        <div class="qeel5">
            <div class="qeel_sujmess">
                <div class="qeel_sujmess2">
                    <span id="total_messages">
                        {TOTAL_POSTS}<br />MESSAGES
                        <script type="text/javascript">document.getElementById('total_messages').innerHTML = document.getElementById('total_messages').innerHTML.replace(/Nos membres ont posté un total de /, "");
                        </script>
                        <script type="text/javascript">document.getElementById('total_messages').innerHTML = document.getElementById('total_messages').innerHTML.replace(/messages/, "");
                        </script>
                    </span>
                </div>
                <div class="qeel_sujmess2">
                    <span id="total_inscrits">
                        {TOTAL_USERS}<br />INSCRITS
                        <script type="text/javascript">document.getElementById('total_inscrits').innerHTML = document.getElementById('total_inscrits').innerHTML.replace(/Nous avons/, "");
                        </script>
                        <script type="text/javascript">document.getElementById('total_inscrits').innerHTML = document.getElementById('total_inscrits').innerHTML.replace(/membres enregistrés/, "");
                        </script>
                        <script type="text/javascript">document.getElementById('total_inscrits').innerHTML = document.getElementById('total_inscrits').innerHTML.replace(/membre enregistré/, "");
                        </script>
                    </span>
                </div>
            </div>
            <div class="qeel_mc">
                <div class="qeel_mc2">MEMBRES CONNECTÉS</div>
                <div class="qeel_mc3">
                    {LOGGED_IN_USER_LIST}
                </div>
            </div>
        </div>
    </div>


    <div class="qeel_iaf">
        QEEL CRÉÉ PAR ICE AND FIRE. (2022)
    </div>
</div>


<!-- END disable_viewonline -->

CODE POUR PHPBB2

Code:

<!-- BEGIN disable_viewonline -->
<div class="qeel_container">
    <div class="qeel1">
        <div class="qeel4">
            <div class="qeel_dc">
<table>
                <span id="vingtquatre">
                    {L_CONNECTED_MEMBERS}
                    <script type="text/javascript">document.getElementById('vingtquatre').innerHTML = document.getElementById('vingtquatre').innerHTML.replace(/Membres connectés au cours des 24 dernières heures/, "<w>MEMBRES PRÉSENTS CES DERNIÈRES 24 HEURES</w>");
                    </script>
                </span>
</table>
            </div>
            <div class="qeel_nmcred">
                <div class="qeel_nm">
                    <div class="qeel_avatar">
                        <span id="avatar_dernier_membre">
                        </span>
                    </div>
                    <div class="qeel_nouvmembre">
                        <span id="dernier_membre">
                            {NEWEST_USER}
                            <script type="text/javascript">document.getElementById('dernier_membre').innerHTML = document.getElementById('dernier_membre').innerHTML.replace(/L'utilisateur enregistré le plus récent est/, "");
                            </script>
                        </span>
                    </div>
                    <div class="qeel_bienvenue">
                        bienvenue sur forum
                    </div>
                </div>

                <div class="qeel_cred">
                    Un petit texte ici, avec les crédits par exemple.
                </div>
            </div>
        </div>
        <div class="qeel_groups">
            <div class="group">
                <a href="https://iceandfire-forumtest.forumieren.de/" target="_blank"><span style="color:var(--gr1);">groupe 1</span></a>
            </div>
            <div class="group">
                <a href="https://iceandfire-forumtest.forumieren.de/" target="_blank"><span style="color:var(--gr2);">groupe 2</span></a>
            </div>
            <div class="group">
                <a href="https://iceandfire-forumtest.forumieren.de/" target="_blank"><span style="color:var(--gr3);">groupe 3</span></a>
            </div>
            <div class="group">
                <a href="https://iceandfire-forumtest.forumieren.de/" target="_blank"><span style="color:var(--gr4);">groupe 4</span></a>
            </div>
            <div class="group">
                <a href="https://iceandfire-forumtest.forumieren.de/" target="_blank"><span style="color:var(--gr5);">groupe 5</span></a>
            </div>
        </div>
    </div>
    <div class="qeel2">
        <div class="qeel_stats">
            <span id="nbutilisateurs">
                {TOTAL_USERS_ONLINE}
                <script type="text/javascript">document.getElementById('nbutilisateurs').innerHTML = document.getElementById('nbutilisateurs').innerHTML.replace(/Il y a en tout/, "");
                </script>
                <script type="text/javascript">document.getElementById('nbutilisateurs').innerHTML = document.getElementById('nbutilisateurs').innerHTML.replace(/utilisateurs en ligne/, "âmes vagabondes");
                </script>
                <script type="text/javascript">document.getElementById('nbutilisateurs').innerHTML = document.getElementById('nbutilisateurs').innerHTML.replace(/utilisateur en ligne/, "âme vagabonde");
                </script>
                <script type="text/javascript">document.getElementById('nbutilisateurs').innerHTML = document.getElementById('nbutilisateurs').innerHTML.replace(/::/, "<br/>");
                </script>
            </span>
        </div>
        <div class="qeel5">
            <div class="qeel_sujmess">
                <div class="qeel_sujmess2">
                    <span id="total_messages">
                        {TOTAL_POSTS}<br />MESSAGES
                        <script type="text/javascript">document.getElementById('total_messages').innerHTML = document.getElementById('total_messages').innerHTML.replace(/Nos membres ont posté un total de /, "");
                        </script>
                        <script type="text/javascript">document.getElementById('total_messages').innerHTML = document.getElementById('total_messages').innerHTML.replace(/messages/, "");
                        </script>
                    </span>
                </div>
                <div class="qeel_sujmess2">
                    <span id="total_inscrits">
                        {TOTAL_USERS}<br />INSCRITS
                        <script type="text/javascript">document.getElementById('total_inscrits').innerHTML = document.getElementById('total_inscrits').innerHTML.replace(/Nous avons/, "");
                        </script>
                        <script type="text/javascript">document.getElementById('total_inscrits').innerHTML = document.getElementById('total_inscrits').innerHTML.replace(/membres enregistrés/, "");
                        </script>
                        <script type="text/javascript">document.getElementById('total_inscrits').innerHTML = document.getElementById('total_inscrits').innerHTML.replace(/membre enregistré/, "");
                        </script>
                    </span>
                </div>
            </div>
            <div class="qeel_mc">
                <div class="qeel_mc2">MEMBRES CONNECTÉS</div>
                <div class="qeel_mc3">
                    {LOGGED_IN_USER_LIST}
                </div>
            </div>
        </div>
    </div>


    <div class="qeel_iaf">
        QEEL CRÉÉ PAR ICE AND FIRE. (2022)
    </div>
</div>


<!-- END disable_viewonline -->

CSS

Pour installer le CSS, il faut que vous vous rendiez dans panneau d'administration, affichage, couleurs, onglet feuille de style css. Vous copiez/collez le code dans son entièreté.

Code:

:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff;  
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
    --gr1: #000;
    --gr2: #DD9F8C;
    --gr3:#6CB29F;
    --gr4: #74ABB6;
    --gr5: #D7A329;
}

/*QEEL*/

/*balise qui contient tout le QEEL*/
.qeel_container {      background: var(--background2);
    margin: 10px 0 0;
    border-radius: 10px;
    padding: 10px 10px 7px;
    display: flex;
    flex-wrap: wrap;}

/*BALISE QUI CONTIENT LES MEMBRES CO 24 HEURES / NOUVEAU MEMBRE / TEXTE CRÉDITS / PARTIE GROUPES*/
.qeel1 {       margin-right: 7px;
    width: 70%;}

/*balise qui contient membres co 24 heures / nouveau membre et txt credits*/
.qeel4 {    display: flex;
margin:0 0 7px 0;}

/*balise connectes dernieres 24 heures*/
.qeel_dc {         width: 57%;
    margin: 0 7px 0 0;
    height: 98px;
    border-top: var(--border1);
    margin-right: 7px;
    padding: 5px;
    font-size: 14px;
    text-align: justify;
    overflow: auto;}

/*balise nouveau inscrit et txt credits*/
.qeel_nmcred {width: 43%;}

/*balise nouveau inscrit*/
.qeel_nm {    border: var(--border1);
    border-radius: 7px 7px 7px 28px;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;}

/*balise avatar nouveau inscrit*/
.qeel_avatar {       width: 50px;
    z-index: 100;
    height: 50px;
    padding: 4px;
    border-radius: 10px 100% 100%;
    background: var(--background2);
    border: var(--border1);
box-sizing: border-box;}

/*avatar nouveau inscrit*/
.qeel_avatar img {   width: 40px;
    object-fit: cover;
    height: 40px;
    border-radius: 10px 100% 100%;}

/*balise pseudo nouveau inscrit*/
.qeel_nouvmembre { text-align: center;
    text-transform: lowercase;
    font-size: 16px;
    line-height: 31px;
    min-height: 30px;
    margin: 0 0 0 20px;}

.qeel_nouvmembre strong {font-weight:500;}

/*balise titre bienvenue sur forum*/
.qeel_bienvenue {      width: 100%;
    text-align: right;
    background: var(--background1);
    text-transform: lowercase;
    font-weight: 600;
    font-size: 12px;
    padding: 0 10px 0 0;
    margin: -17px 0 0 24px;
    border-radius: 4px;
    color: var(--acc1);}

/*balise txt libre/credits*/
.qeel_cred {   text-align: justify;
    height: 45px;
    overflow: auto;
    margin-top: 4px;
    font-size: 12px;}

/*balise contenant groupes*/
.qeel_groups {      display: flex;
    width: 100%;
    border-top: var(--border1);
    padding: 7px 0 0;}

/*balise des groupes*/
.group {    background: var(--background1);
    padding: 3px 10px 2px;
    border-radius: 4px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;margin:0 7px 0 0;
    font-size: 12px;
    font-weight: 600;}

.group:last-child {margin:0;}

/*BALISE QUI CONTIENT NB CONNECTES ET INVITES, MEMBRES CONNECTES ET NB INSCRITS/MESSAGES*/
.qeel2 {    width: 29%;}

/*balise nb utilisateurs en ligne*/
.qeel_stats {    text-align: center;
    text-transform: uppercase;
    font-size: 9px;
    border-bottom: var(--border1);
    padding: 0 0 4px;
  letter-spacing: 1px;}

.qeel_stats strong {
  font-weight:500;}

/*balise nb inscrits/messages et membres connectes*/
.qeel5 {    display: flex;
  margin: 7px 0 0;}

/*balise nb inscrits/messages*/
.qeel_sujmess {      margin: 0 7px 0 0;
    max-width: 85px;}

/*nb inscrits/messages*/
.qeel_sujmess2 {  background: var(--background1);
    text-align: center;
    font-size: 11px;
    padding: 0 10px;
    border-radius: 7px;
    font-weight: 700;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;    color: var(--acc2);}

.qeel_sujmess2:nth-child(1) {margin: 0 0 5px;
    color: var(--acc1);}

/*balise membres connectes*/
.qeel_mc {    border: var(--border1);
    border-radius: 7px;
    padding: 5px;
    text-align: justify;
    text-transform: lowercase;
    width: 100%;}

.qeel_mc br {display:none!important;}

/*balise titre membres co*/
.qeel_mc2 {    text-align: center;
    background: var(--acc2);
    text-transform: uppercase;
    font-size: 11px;
    color: var(--acc3);
  border-radius: 4px;}

/*balise contenant les pseudos des membres co*/
.qeel_mc3 {font-size: 0px;
    height: 76px;
    margin: 4px 0 0;
    border-top: var(--border1);
    overflow: auto;}

.qeel_mc3 a {font-size:14px;}

/*balise credits, surtout ne SUPPRIMEZ PAS*/
.qeel_iaf {    width: 100%;
    border-top: 1px solid #ededed;
    margin: 7px 0 0;
    padding: 7px 0 0;
    text-align: center;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #d1d1d1;}

---

(3) choses à savoir

ajouter un avatar dans le qeel
L'avatar du dernier inscrit n'est pas automatiquement affiché dans le QEEL, pour ça il faut bidouiller quelques petits trucs. Je me suis appuyé sur le tutoriel de no_way que vous pouvez retrouver ici.

Vous n'avez besoin en théorie que de modifier la template profile_view_body puisque la template index_body a déjà le bon code.

supprimez statistiques sur thème modernbb
Sur ModernBB il y a automatiquement les statistiques qui ne sont malheureusement pas dans la template du QEEL. Afin que les informations ne soient pas répétées, vous pouvez les supprimer.

Il faudra aller dans les templates > overall_footer_begin et supprimer toute cette partie:

Code:

<div class="statistics">
 <div class="wrap">
 <div class="statistics-item">
 {TOTAL_POSTS}
 </div>
 <div class="statistics-item">
 {TOTAL_USERS}
 </div>
 <div class="statistics-item">
 {NEWEST_USER}
 </div>
 </div>
</div>

---

(5) mot de fin

Je le redis, mais vraiment si vous avez un problème ou une question, surtout n'hésitez pas.

Je serais bien entendu très heureuse de voir le résultat final dans le cas où vous utilisez le QEEL, donc n'hésitez vraiment pas à me l'envoyer. Vous pouvez également laisser une suggestion dans ce sujet.

FORMULAIRE CRÉÉ PAR ICE AND FIRE. (2021)