Découvrir le conceptSans inscriptionMettez les créditsCommandes ouvertes
-50%
Le deal à ne pas rater :
-50% Baskets Nike Air Huarache
64.99 € 129.99 €
Voir le deal

Arya
Arya
Sam 17 Juil 2021 - 20:15
Ce code fait partie du thème complet "Simple Harry Potter"


Testé sous : google chrome, Firefox, Edge
Version(s) du forum : phpBB2
Acceptez-vous que l'on modifie votre code pour corriger les erreurs ? [X] Oui [ ] Non
Rendu :
Aperçu du rendu:
Ne pas retirer le copyright

Introduction


Ce code est adapté pour un forum de largeur 800px.
L'image est modifiable et vous pouvez utiliser la taille que vous souhaitez.
Ce code est assorti à ces catégories.

Codes et Explications


Prérequis. Installation des polices personnalisées


Dans votre panneau d'administration, allez dans la section Affichage → Templates → Général et éditez le template overall_header.
Cherchez la balise </head> et juste avant ajoutez le code suivant :
Code:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Gupter&display=swap" rel="stylesheet">

Note: Cette ligne sert à ajouter la police Gupter sur votre forum. Si vous souhaitez changer les polices d'écriture utilisées dans le CSS, pensez à retirer ou modifier cette ligne, Google Fonts vous donnera le code à utiliser. (Naturellement, si la police Gupter est déjà installée sur votre forum, vous pouvez sauter toute cette étape)
Note 2: La première ligne (celle qui contient "preconnect") n'est nécessaire qu'une seule fois, donc si vous avez installé d'autres modifications sur votre forum, vérifiez que qu'elle n'y est pas déjà.

Enregistrez vos modifications et publiez votre template.

Template index_body


Dans votre panneau d'administration, allez dans la section Affichage → Templates → Général et éditez le template index_body.
Trouvez les commentaires HTML <!-- BEGIN disable_viewonline --> et <!-- END disable_viewonline -->, supprimez les ainsi que l'intégralité de ce qu'il y a entre les deux, et remplacez le tout par le code suivant :
Code:
<!-- BEGIN disable_viewonline -->
<div class="QEEL">
  <div class="QEELtitre"><img src="https://images2.imgbox.com/e6/7a/zzwVgWqU_o.png" /></div>

  <div class="blocqeel">
    <div class="stastqeel">
      <span class="soustitresQEEL">Statistiques</span>&nbsp;
      <span id="sorcier">{TOTAL_POSTS}. {TOTAL_USERS}. {TOTAL_USERS_ONLINE}</span>
    </div>
    <span id="avatar_dernier_membre"></span>

    <div class="nouveaumembre">
      <span id="dernier_membre">{NEWEST_USER}</span>
    </div>

    <div class="membresco">
      <span class="soustitresQEEL">Sorciers parcourant actuellement les dédales de Poudlard</span>
      <span id="loggedlist">{LOGGED_IN_USER_LIST}</span>
    </div>

    <div class="groupes">
      <a href="LIEN_DE_VOTRE_GROUPE">GRYFFONDOR</a> <br />
      <a href="LIEN_DE_VOTRE_GROUPE">SERDAIGLE</a> <br />
      <a href="LIEN_DE_VOTRE_GROUPE">SERPENTARD</a> <br />
      <a href="LIEN_DE_VOTRE_GROUPE">POUFSOUFFLE</a> <br />
      <a href="LIEN_DE_VOTRE_GROUPE">PERSONNEL</a> <br />
      <a href="LIEN_DE_VOTRE_GROUPE">SORCIERS</a><br />
      <a href="LIEN_DE_VOTRE_GROUPE">PNJ</a>
    </div>

    <div class="membrescoh24">
      <span class="soustitresQEEL">Sorciers ayant parcourus les couloirs de Poudlard ces 24 dernières heures</span>
      <table id="connmembers"> {L_CONNECTED_MEMBERS}</table>
    </div>

    <div class="anniversaire">
      <span class="soustitresQEEL">Anniversaires</span>
      <table id="anniv"> {L_WHOSBIRTHDAY_TODAY}</table>
    </div>

  </div>
</div>


<script type="text/javascript">
  /*statistiques */
  document.getElementById('sorcier').innerHTML = document.getElementById('sorcier').innerHTML
    .replace(/Nos membres ont posté/, "Nos sorciers ont lancé")
    .replace(/messages/, "sortilèges")
    .replace(/Nous avons/,"Il y a")
    .replace(/membre(s?) enregistré(s?)/, "sorcier$1 parcourant les couloirs du château")
    .replace(/utilisateur(s?) en ligne/, "Sorcier$1 présent$1").replace(/Enregistré(s?)/, "Sorcier$1")
    .replace(/Invisible(s?) et/, "Fantôme$1,")
    .replace(/Invité(s?)/, "Moldu$1");

  /* nouveau membre */
  document.getElementById('dernier_membre').innerHTML = document.getElementById('dernier_membre').innerHTML.replace(/L'utilisateur enregistré le plus récent est/, "Le dernier sorcier <span>inscrit est</span>");

  /* anniversaires */
  document.getElementById('anniv').parentNode.innerHTML = document.getElementById('anniv').parentNode.innerHTML
    .replace(/Membres fêtant leur anniversaire aujourd'hui/, "Sorcier fêtant son anniversaire aujourd'hui")
    .replace(/Aucun membre ne fête son anniversaire aujourd'hui/, "Aucun sorcier ne fête son anniversaire aujourd'hui.");

  /* membres connectés au cours des 24 dernières heures */
  document.getElementById('connmembers').innerHTML = document.getElementById('connmembers').innerHTML.replace(/Membres connectés au cours des [0-9]* dernières heures :/, " ");

  /* membres en ligne */
  document.getElementById('loggedlist').innerHTML = document.getElementById('loggedlist').innerHTML.replace(/Utilisateurs enregistrés :/, " ");
</script>

<!-- END disable_viewonline -->


Installer le CSS


Dans votre panneau d'administration, allez dans la section Affichage → Images et Couleurs → Couleurs et cliquez sur l'onglet Feuille de style CSS.
Ajoutez-y le code CSS qui suit :
Code:
/* QEEL - ARYA DEBUT */

.QEEL {
    width: 750px;
    margin: auto;
    background: #f3f3e8;
    padding: 10px;
    box-sizing: border-box;
    height: 310px;
}

.QEELtitre img {
    margin: auto;
    display: block;
}

.blocqeel {
    position: relative;
    height: 250px;
    width: 100%;
}

.groupes {
    color: #293740;
    left: 333px;
    top: 20px;
    position: absolute;
    width: 100px !important;
}

.groupes a {
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    text-decoration: none !important;
    text-align: center;
    line-height: 7px;
    background-color: #c4d6a4 !important;
    border: 1px solid #c4d6a4 !important;
    width: 150px !important;
    display: block;
    margin-bottom: -11px;
    height: 7px;
    padding: 4px;
    font-family: 'gupter', sans-serif;
}

.groupes a:hover {
    color: #fff;
    text-decoration: none !important;
    background-color: #d26d8f !important;
    transition: 0.5s;
    border: 1px solid #d26d8f !important;
}

.stastqeel {
    background-color: #fafaf0;
    border: 3px solid #eaeadb;
    color: #272b2c !important;
    font-family: 'Gupter', sans-serif;
    font-size: 13px;
    left: 504px;
    padding: 5px;
    position: absolute;
    text-align: justify;
    width: 200px;
    top: 100px;
    height: 84px;
    overflow-y: auto;
    overflow-x: hidden
}

.membrescoh24 {
    background-color: #fafaf0;
    border: 3px solid #eaeadb;
    color: #272b2c !important;
    font-family: verdana, cursive;
    font-size: 11px;
    left: 504px;
    padding: 5px;
    position: absolute;
    text-align: justify;
    width: 200px;
    top: 10px;
    height: 80px;
    overflow-y: auto;
    text-decoration: none !important;
    overflow-x: hidden;
}

.membrescoh24 table {
    display: inline;
}

.membrescoh24 .row1 {
    background: none;
}

.membrescoh24 a, .membrescoh24 a:hover,
.membresco a, .membresco a:hover,
.nouveaumembre a, .nouveaumembre a:hover {
    text-decoration: none !important;
    color: black;
}

.soustitresQEEL {
    background-color: #ecbdcc;
    color: #f1f4ef;
    padding: 1px;
    font-family: 'Gupter', serif;
    text-transform: uppercase;
}

.nouveaumembre {
    background-color: #fafaf0;
    border: 3px solid #eaeadb;
    color: #d26d8f !important;
    font-family: 'Gupter', serif;
    font-size: 14px;
    height: 60px;
    left: 85px;
    position: absolute;
    text-transform: uppercase;
    top: 10px;
    line-height: 22px;
    width: 220px;
    padding: 20px 5px 20px 5px;
    text-align: center;
}

.nouveaumembre span span {
    color: #85986c;
}

#avatar_dernier_membre img {
    height: 90px;
    width: 90px;
    position: absolute;
    left: 6px;
    top: 10px;
    border: 3px solid #d8d5c7;
    object-fit: cover;
}

.membresco {
    background-color: #fafaf0;
    border: 3px solid #eaeadb;
    color: #8F8E8E !important;
    font-family: verdana, cursive;
    font-size: 11px;
    padding: 5px;
    position: absolute;
    text-align: justify;
    width: 300px;
    height: 84px;
    left: 5px;
    top: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

.anniversaire {
    background-color: #fafaf0;
    border: 3px solid #eaeadb;
    width: 700px;
    position: absolute;
    font-size: 11px;
    font-family: 'Gupter', sans-serif;
    color: #272b2c !important;
    padding: 5px;
    text-align: justify;
    top: 200px;
    left: 5px;
}

.anniversaire table {
    display: inline !important;
}

/* QEEL ARYA FIN */


Afficher l'avatar du dernier membre dans le QEEL


Pour pouvoir afficher l'avatar du dernier membre dans ce QEEL, vous allez devoir faire quelques modifications supplémentaires, basées sur les explications partagées sur le le forum des forums par no_way, un Aidactif.

Pour que ce code fonctionne, vous devez désactiver le profil avancé : dans votre panneau d'administration, allez dans Utilisateurs & Groupes → Utilisateurs → Profils → Options générales et choisissez Non pour l'option Activer le profil avancé.
Assurez vous aussi que profil est accessible aux invités en allant vérifier dans Utilisateurs & Groupes → Permissions spéciales que l'option "voir le profil" soit bien réglée sur "invités".


Dans votre panneau d'administration, allez dans la section Affichage → Templates → Profil et éditez le template profil_view_body.  Trouvez la variable suivante :
Code:
{AVATAR_IMG}
et remplacez-là par :
Code:
<span id="avatar_membre">{AVATAR_IMG}</span>
On y est presque, n'oubliez pas d'enregistrer les modifications de votre template et de le publier.

Enfin, rendez-vous dans l'onglet ModulesHTML & JavascriptGestion des codes Javascript. Assurez vous que l'option Activer la gestion des codes Javascript est bien réglée sur oui, puis cliquez sur le bouton Créer un nouveau javascript. Donnez à votre script un titre explicite, par exemple "avatar dans le QEEL", cochez la case "sur l'index" puis dans la zone de texte dédiée au code Javascript, collez le code qui suit :
Code:
$(function(){
$.get($("#dernier_membre a[href^='/u']")[0].href,function(d){
(a=$("#avatar_membre img",$(d))).length&&$("#avatar_dernier_membre").html(a);})
});
Cliquez sur le bouton Valider puis revenez à l'Administration des codes Javascript. Votre nouveau script est désormais dans la liste des scripts de votre forum !

Et voilà, c'est fini !
Revenir en haut

Nos amis proches

QEEL Parto512 Logo WyvArtem