Catégories à fermer


Aller en bas
Miettes
Miettes
Râleuse
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord

Pseudo Discord : Miettes
Messages : 2312

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

le Mar 24 Sep - 13:58

Toutes versions

QEEL sur 3 lignes (groupes, stats/membres en ligne, anniversaires)

Hello hello Smile

Dans ce LS, je te propose un qeel ^^ Voici le rendu :
[Toutes versions] QEEL sur 3 lignes (groupes, stats/membres en ligne, anniversaires) Rendu12

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

Idea Ce LS est utilisable sur toutes les versions de forum.

Idea Ce LS se base sur une commande.

Les codes

Le HTML du QEEL

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>

La CSS du QEEL

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;
    }

Ce que tu dois changer

Dans le HTML

• les textes Smile

Dans la CSS

• les couleurs de fond, des textes et des bordures ;
• la typographie du titre :
Code:
font-family: Merienda, cursive!important;
   
Idea 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 Wink

L'installation

L'image

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:

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

La CSS

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

Du Javascript

Pour phpBB2, phpBB3, punBB, Invision

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()))
    })
});

ModernBB, AwesomeBB

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.

Le template

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">

Idea 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 -->

Idea 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 Smile

On valide et on publie Smile

A faire en plus pour ModernBB

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 Smile

A faire en plus pour AwesomeBB

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 : )

       

   
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses