[Toutes versions] QEEL sur 3 lignes (groupes, stats/membres en ligne, anniversaires)

Hello hello

Dans ce LS, je te propose un qeel ^^ Voici le rendu :

Ce LS utilise ce tutoriel pour personnaliser les phrases du QEEL.

Ce LS est utilisable sur toutes les versions de forum.

Ce LS se base sur une commande.



Voici le code HTML du qeel :

Code:

<div id="new-qeel" class="feq">
  <div class="header">
    Qui est en ligne ?
  </div>
  <div class="d-flex">
    <figure>
      <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="Qui est en ligne ?">
    </figure>
    <div>
      <div id="qeel-groupes">
        [@groupes$][@]
      </div>
      <div class="d-flex">
        <div id="qeel-stats" class="blk">
          <p>Les éco-friends ont posté un total de <strong>@messages@ messages</strong>.</p>
          <p>Nous avons <strong>@membres_enregistres@ éco-friends</strong> enregistrés.</p>
          <p>L'éco-friend enregistré le plus récent est <strong>@dernier_membre@</strong>.</p>
          <p>Il y a en tout @@connectes_forum?@connectes_forum=<strong>@connectes_forum$&@ utilisateur</strong>$<strong>@connectes_forum@ utilisateurs@</strong> en ligne :: @@enregistres?@enregistres=@enregistres$&@ Éco-friend$@enregistres@ Éco-friends@$0 Éco-friend@@, @@invisibles?@invisibles=@invisibles$&@ Invisible$@invisibles@ Invisibles@$0 Invisible@@ et @@invites?@invites=@invites$&@ Invité$@invites@ Invités@$0 Invité@@.</p>
        </div>
        <div id="qeel-last-hours" class="blk">
          <p>@@membres_connectes?Éco-friends en ligne : @membres_connectes$, @.$Éco-friend n'est en ligne.@@</p>
          <p>@@derniers_membres_connectes?Éco-friends connectés au cours des 48 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@</p>
        </div>
      </div>
      <div id="qeel-anniv">
        <p>@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=<span>Il/Elle fête son anniversaire aujourd'hui :</span> @membres_anniversaire_aujourdhui$&@$<span>Ils fêtent leur anniversaire aujourd'hui :</span> @membres_anniversaire_aujourdhui$, @@$<span>Aucun membre ne fête son anniversaire aujourd'hui.</span> @@<br />
        @@membres_anniversaire_prochains_jours?@membres_anniversaire_prochains_jours=<span>Nous fêterons prochainement l'anniversaire de :</span> @membres_anniversaire_prochains_jours$&@$<span>Nous fêterons prochainement les anniversaires de :</span> @membres_anniversaire_prochains_jours$, @@$<span>Il n'y aura pas d'anniversaire prochainement.</span> @@</p>
      </div>
    </div>
  </div>
</div>

Et voilà le style :

Code:

/*** --- QEEL --- ***/
    #new-qeel{
      background: #F1FCD6;
        border: #53703A 3px solid;
        border-radius: 30px;
        margin: 10px 0;
        overflow: hidden;
        width: 100%;
    }

    #new-qeel .d-flex{
      align-items: stretch;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      padding:  4px;
      width: 100%;
    }

    #new-qeel > .d-flex{
      align-items: center;
    }

    #new-qeel .header{
      border: 0;
        border-bottom: 2px solid #53703A;
        border-radius: 0;
          color: #53703A;
        font-size: 18px;
        font-family: Merienda, cursive!important;
        margin: 0 auto;
        padding: 4px 0;
        text-align: center;
    }

    #new-qeel figure{
      margin: 0;
    }
    
    #new-qeel .blk{
        background: #F7F5C9;
        border: 1px solid #856025;
        border-radius: 30px;
        margin: 8px;
        padding: 10px;
    }

    #new-qeel #qeel-groupes{
      text-align: center;
    }

• les textes


• les couleurs de fond, des textes et des bordures ;
• la typographie du titre :

Code:

font-family: Merienda, cursive!important;

   
La CSS n'est pas commentée. De ce fait, n'hésite pas à demander de l'aide si tu as du mal à faire ce que tu veux



Pour l'image du QEEL, il te suffit d'aller dans Panneau d'administration > Affichage > Images & couleurs > Gestion des images > Mode avancé > Qui est en ligne. Par exemple ici, ce sera celle-ci :

Spoiler:

Restons dans cette zone On va aller mettre la CSS dans Panneau d'administration > Affichage > Images & couleurs > Couleurs > feuille de style CSS.

Code:

"use strict";
var fa_extraction_qeel = {
    "A_marqueur": "$",
    "D_delim": "@",
    "F_delim": "@",
    "version": "1.2",
    "MAJ_script": "05-04-2015",
    "regexp": {
        "messages": /un total de\D+(\d+)\D+messages/i,
        "membres_enregistres": /nous avons\D+(\d+)\D+membre/i,
        "dernier_membre": /plus récent est.*?(<a.+?\/u\d+.+?<\/a>)/i,
        "connectes_forum": /Il y a en tout\D+(\d+)\D+utilisateur/i,
        "enregistres": /::\s*(\d+)/i,
        "invisibles": /::\s*\d+\D+(\d+)/i,
        "invites": /::\s*\d+\D+\d+\D+(\d+)/i,
        "record_connectes": /Le record.*?(\d+)/i,
        "date_record_connectes": /record.*le\s+(\D+\d{1,2}\D+[^:]+\d{1,2}:\d{2})/i,
        "connectes_chatbox": /(\d+)\D+utilisateur\(s\)/i,
        "groupes": /(<b><a.+?\/g\d+.+?<\/b>)/gi,
        "membres_chatbox": /chatbox.+?\[/i,
        "membres_connectes": /utilisateurs enregistrés.+?membre/i,
        "derniers_membres_connectes": /dernières heures.+?membre/i,
        "membres_anniversaire_aujourdhui": /anniversaire aujourd[\s\S]+?anniversaire/i,
        "membres_anniversaire_prochains_jours": /prochains jours[\s\S]+(légende|statistiques)/i
    },
    "vars": {},
    "extraction": function() {
        var qc = document.getElementById("mon-qeel").innerHTML;
        var agreg = function(i, a) {
            var b;
            var c;
            var r = [];
            switch (i) {
                case "membres_chatbox":
                case "membres_connectes":
                case "derniers_membres_connectes":
                    c = a.exec(qc);
                    a = /(<a.+?\/u\d+.+?<\/a>)/gi;
                    while ((b = a.exec(c)) != null) {
                        r.push(b && b[1])
                    }
                    return r;
                case "membres_anniversaire_aujourdhui":
                case "membres_anniversaire_prochains_jours":
                    c = a.exec(qc);
                    a = /(<a.+?\/u\d+.+?<\/a>.+?\))/gi;
                    while ((b = a.exec(c)) != null) {
                        r.push(b && b[1])
                    }
                    return r;
                default:
                    if (!a.global) {
                        b = a.exec(qc);
                        return b && b[1]
                    }
                    while ((b = a.exec(qc)) != null) {
                        r.push(b && b[1])
                    }
                    return r
            }
        };
        for (var a in this.regexp) {
            this.vars[a] = agreg(a, this.regexp[a])
        }
        return this.vars
    },
    "formater": function(texte) {
        this.extraction();
        var D = this.D_delim;
        var F = this.F_delim;
        var A = this.A_marqueur;
        var t = texte;
        var vars = this.vars;
        var i, reg, bouclage;
        var r = [];
        var exp = function(a, b, c) {
            if (a == null) return c;
            if (a instanceof Array) {
                return a.length > 0 ? b : c
            }
            return (a > 0) ? b : c
        };
        for (i in this.regexp) {
            r.push(i)
        }
        bouclage = new RegExp(D + '(' + r.join("|") + ').*' + F, "g");
        while (bouclage.test(t)) {
            for (var a in vars) {
                t = t.replace(new RegExp(D + a + F, "g"), vars[a])
            }
            for (var a in vars) {
                t = t.replace(new RegExp(D + "nombre_" + a + F, "g"), (vars[a] instanceof Array) ? vars[a].length : vars[a])
            }
            for (var a in vars) {
                t = t.replace(new RegExp(D + a + '[' + A + ']' + "(.*?)" + F, "g"), (vars[a] instanceof Array) ? vars[a].join("$1") : vars[a])
            }
            for (var a in vars) {
                t = t.replace(new RegExp(D + a + '=([^' + A + ']*?)[' + A + ']([^' + A + ']*?)' + F, "g"), (vars[a] instanceof Array) ? vars[a].length > 1 ? "$2" : "$1" : vars[a] > 1 ? "$2" : "$1")
            }
            for (var a in vars) {
                t = t.replace(new RegExp("(?:" + D + "){2}" + a + "[?]([^" + A + "]*?)[" + A + "](.*?)(?:" + F + "){2}", "g"), exp(vars[a], "$1", "$2"))
            }
        }
        return t
    }
};
jQuery(function() {
    var feq = fa_extraction_qeel;
    $(".feq").each(function() {
        $(this).html(feq.formater($(this).html()))
    })
});

Code:

"use strict";
var fa_extraction_qeel = {
    "A_marqueur": "$",
    "D_delim": "@",
    "F_delim": "@",
    "version": "1.2",
    "MAJ_script": "05-04-2015",
    "regexp": {
        "messages": /un total de\D+(\d+)\D+messages/i,
        "membres_enregistres": /nous avons\D+(\d+)\D+membre/i,
        "dernier_membre": /plus récent est.*?(<a.+?\/u\d+.+?<\/a>)/i,
        "connectes_forum": /Il y a en tout\D+(\d+)\D+utilisateur/i,
        "enregistres": /::\s*(\d+)/i,
        "invisibles": /::\s*\d+\D+(\d+)/i,
        "invites": /::\s*\d+\D+\d+\D+(\d+)/i,
        "record_connectes": /Le record.*?(\d+)/i,
        "date_record_connectes": /record.*le\s+(\D+\d{1,2}\D+[^:]+\d{1,2}:\d{2})/i,
        "connectes_chatbox": /(\d+)\D+utilisateur\(s\)/i,
        "groupes": /(<b><a.+?\/g\d+.+?<\/b>)/gi,
        "membres_chatbox": /chatbox.+?\[/i,
        "membres_connectes": /utilisateurs enregistrés.+?membre/i,
        "derniers_membres_connectes": /dernières heures.+?membre/i,
        "membres_anniversaire_aujourdhui": /anniversaire aujourd[\s\S]+?anniversaire/i,
        "membres_anniversaire_prochains_jours": /prochains jours[\s\S]+(légende|statistiques)/i
    },
    "vars": {},
    "extraction": function() {
        var qc = document.getElementById("mon-qeel").innerHTML;
        qc += document.getElementById("mon-qeel2").innerHTML;
        var agreg = function(i, a) {
            var b;
            var c;
            var r = [];
            switch (i) {
                case "membres_chatbox":
                case "membres_connectes":
                case "derniers_membres_connectes":
                    c = a.exec(qc);
                    a = /(<a.+?\/u\d+.+?<\/a>)/gi;
                    while ((b = a.exec(c)) != null) {
                        r.push(b && b[1])
                    }
                    return r;
                case "membres_anniversaire_aujourdhui":
                case "membres_anniversaire_prochains_jours":
                    c = a.exec(qc);
                    a = /(<a.+?\/u\d+.+?<\/a>.+?\))/gi;
                    while ((b = a.exec(c)) != null) {
                        r.push(b && b[1])
                    }
                    return r;
                default:
                    if (!a.global) {
                        b = a.exec(qc);
                        return b && b[1]
                    }
                    while ((b = a.exec(qc)) != null) {
                        r.push(b && b[1])
                    }
                    return r
            }
        };
        for (var a in this.regexp) {
            this.vars[a] = agreg(a, this.regexp[a])
        }
        return this.vars
    },
    "formater": function(texte) {
        this.extraction();
        var D = this.D_delim;
        var F = this.F_delim;
        var A = this.A_marqueur;
        var t = texte;
        var vars = this.vars;
        var i, reg, bouclage;
        var r = [];
        var exp = function(a, b, c) {
            if (a == null) return c;
            if (a instanceof Array) {
                return a.length > 0 ? b : c
            }
            return (a > 0) ? b : c
        };
        for (i in this.regexp) {
            r.push(i)
        }
        bouclage = new RegExp(D + '(' + r.join("|") + ').*' + F, "g");
        while (bouclage.test(t)) {
            for (var a in vars) {
                t = t.replace(new RegExp(D + a + F, "g"), vars[a])
            }
            for (var a in vars) {
                t = t.replace(new RegExp(D + "nombre_" + a + F, "g"), (vars[a] instanceof Array) ? vars[a].length : vars[a])
            }
            for (var a in vars) {
                t = t.replace(new RegExp(D + a + '[' + A + ']' + "(.*?)" + F, "g"), (vars[a] instanceof Array) ? vars[a].join("$1") : vars[a])
            }
            for (var a in vars) {
                t = t.replace(new RegExp(D + a + '=([^' + A + ']*?)[' + A + ']([^' + A + ']*?)' + F, "g"), (vars[a] instanceof Array) ? vars[a].length > 1 ? "$2" : "$1" : vars[a] > 1 ? "$2" : "$1")
            }
            for (var a in vars) {
                t = t.replace(new RegExp("(?:" + D + "){2}" + a + "[?]([^" + A + "]*?)[" + A + "](.*?)(?:" + F + "){2}", "g"), exp(vars[a], "$1", "$2"))
            }
        }
        return t
    }
};
jQuery(function() {
    var feq = fa_extraction_qeel;
    $(".feq").each(function() {
        $(this).html(feq.formater($(this).html()))
    })
});

On va aller dans Panneau d'administration > Modules > HTML & Javascript > Gestion des codes Javascript et on va mettre ce code dans un nouveau javascript qu'on ne va afficher que sur l'index.


Tout va se passer dans le template "index_body" que tu trouveras ici : Panneau d'administration > Affichage > Templates > Général. Ici, on va avoir quelques manips à faire.

1] Tout d'abord, on va repérer ça :

Code:

<!-- BEGIN disable_viewonline -->

Et on va le remplacer par ça :

Code:

<!-- BEGIN disable_viewonline -->
<div id="mon-qeel" style="display: none">

Pour AwesomeBB, il faut en profiter pour supprimer cette ligne :

Code:

<aside id="sidebar" class="sidebar-home">

   
2] Puis on va repèrer ça :

Code:

<!-- END disable_viewonline -->

qu'on va remplacer par :

Code:

</div>
<!-- END disable_viewonline -->

Pour AwesomeBB, il faut en profiter pour supprimer cette ligne :

Code:

</aside>

3] Enfin, on va mettre juste après cette ligne :

Code:

<!-- END disable_viewonline -->

le code HTML du QEEL

On valide et on publie


En plus de la modification du template "index_body", on va devoir éditer le template "overall_footer_begin" en remplaçant ça :

Code:

<div class="statistics">

par ça :

Code:

<div class="statistics" id="mon-qeel2" style="display:none;">

On valide et on publie


En plus de la modification du template "index_body", on va devoir éditer le template "overall_footer_begin" en remplaçant ça :

Code:

<!-- BEGIN disable_viewonline -->
<footer>

par ça :

Code:

<!-- BEGIN disable_viewonline -->
<footer id="mon-qeel2" style="display: none;">

---

   
Si tu te sers de ce code, merci de mettre un petit lien vers La Tambouille quelque part sur ton forum, pas trop caché, pour que tes membres puissent venir chercher de l'aide ou des codes par ici aussi : )