Découvrir le conceptSans inscriptionMettez les créditsCommandes ouvertes
Pisrale

Venez retrouver du libre service divers en graphisme (avatars, icons, gifs, etc. . . ) ou codage (fiche rp, signatures, templates, etc. . . ) et ce sans inscription avec commande possible, c'est chez

Le Deal du moment : -50%
-50% Baskets Nike Air Huarache Runner
Voir le deal
69.99 €

QEEL n°8

Pisrale :: Codages :: Apparence du forum :: Templates
KoalaVolant
KoalaVolant
Dim 9 Avr 2023 - 15:17
Version du forum : PHPBB2 & ModernBB




Particularités du code :
- Il a été fait sur ModernBB mais est possible à insérer dans PHPBB2
- L'avatar du dernier inscrit s'affiche dans le QEEL
- Comme crédit il faut mettre : KoalaVolant
- Les liens des groupes sont à mettre vous même.

Installation du HTML


  1. Vous devez avoir le compte fondateur du forum

  2. Allez dans le Panneau d'administration > Affichage > Templates > Général > index_body

  3. Cherchez cette partie :

    Code:
    <!-- BEGIN disable_viewonline -->

    Et cette partie

    Code:
    <!-- END disable_viewonline -->

  4. Entre les deux codes nommés précédemment, vous copier/coller ceci :

    Code:
     <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Poppins:wght@400;500;600;800;900&display=swap" rel="stylesheet">

              <div class="qeel-total">
                <!-- TITRE DU QEEL QUI EST MODIFIABLE -->
                <div class="qeel-titre">Quand les pastels se connectent</div>
                <!-- FLEX ils sont la ou ils étaient là -->
                <div class="qeel-flex">
                  <!-- GAUCHE -->
                  <div class="qeel-gauche">
                  <div class="qeel-connectes">
                    <span class="qeel-tit">Ils sont là</span>
                    <span class="qeel-co" id="memen">{LOGGED_IN_USER_LIST}</span>
                  </div>
                  <div class="qeel-membresmess">
                    <span class="membres" id="memtot">{TOTAL_USERS} membres</span>
                    <span class="messages" id="messtot">{TOTAL_POSTS}</span>
                  </div>
                  <div class="qeel-bienvenue">
                   <span class="image-last"></span>
                     <span id="last-user">
            <div id="newus" class="qeel-bloc">
              <h2>Bienvenue à {NEWEST_USER}</h2>
                <div id="ib-last-user"></div>
                       </div>
          </span>
                  </div>
                  <!-- FIN GAUCHE --> </div>
                <!-- DROITE -->
                <div class="qeel-lasts">
                 <span class="qeel-tit">Ils étaient là</span>
                  <span class="qeel-col" id="24h">{L_CONNECTED_MEMBERS}</span>
                  
                <!-- Fin droite -->
                  </div>
                  <!-- BAS DES GROUPES -->
                  <div class="qeel-groupes" id="groupesrep">
                   <a href="" target="_blank">Groupe 1</a>
                    <a href="" target="_blank">Groupe 2</a>
                    <a href="" target="_blank">Groupe 3</a>
                    <a href="" target="_blank">Groupe 4</a>
                    <!-- VOUS POUVEZ AJOUTER DES GROUPES EN COPIANT JUSTE LE GROUPE 4 AVEC LE LIEN DE VOS GROUPES -->
                  </div>

                  <!-- FIN FLEX ET QEEL -->
                </div></div>

    <!-- MODIFIABLE SELON VOTRE NOMBRE D'HEURES -->

      <script type="text/javascript">document.getElementById('24h').innerHTML=document.getElementById('24h').innerHTML.replace(/Membres connectés au cours des 24 dernières heures :/," ");</script>

    <!-- LE JAVASCRIPT -->

      <script type="text/javascript">$(document).ready(function(){
         if( $('#last-user').length ){
     
            var $lastUser = $('#last-user'),
      
                urlLastUser = $lastUser.find('a').attr('href'),
                pseudoLastUser = $lastUser.find('a > span > strong').text();
      
            $('#last-user #ib-last-user').insertAfter($lastUser.find('a'));
      
            $('#last-user #ib-last-user').load('' + urlLastUser +' img[alt="'+ pseudoLastUser +'"]');

        }
    });</script>
      <script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/Nos membres ont posté un total de/,"");</script>
        <script type="text/javascript">document.getElementById('onlinetot').innerHTML=document.getElementById('onlinetot').innerHTML.replace(/Enregistré/,"habitant");</script>
            <script type="text/javascript">document.getElementById('onlinetot').innerHTML=document.getElementById('onlinetot').innerHTML.replace(/Enregistrés/,"habitants");</script>
            <script type="text/javascript">document.getElementById('onlinetot').innerHTML=document.getElementById('onlinetot').innerHTML.replace(/Invité/,"touriste");</script>
            <script type="text/javascript">document.getElementById('onlinetot').innerHTML=document.getElementById('onlinetot').innerHTML.replace(/Invités/,"touristes");</script>
      <script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/Nous avons/,"");</script>
    <script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/membre enregistré/,"");</script>
    <script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/membres enregistrés/,"");</script>
    <script type="text/javascript">document.getElementById('newus').innerHTML=document.getElementById('newus').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");</script>
                <script type="text/javascript">document.getElementById('memen').innerHTML=document.getElementById('memen').innerHTML.replace(/Utilisateurs enregistrés :/," ");</script>

  5. Une fois que c'est fait, repérez tout ce qui est en bas (les script avec innerHTML= etc). Dedans, il y a tout ce qui est remplaçable. Du genre "touriste" ou "touristes" ou "habitants", etc. Vous pouvez les changer avec ce que vous voulez. Attention : le plus important c'est "membres connectés au cours de 48 dernière heures". Si de votre côté il s'agit de 24h ou autre chose, il faudra remplacer 48 par le bon nombre Smile.

    Vous êtes perdu ? On peut le faire pour vous !
    Personnaliser mon code




Installation du CSS



  1. Le :Root
    Ce code utilise un système de “variables” rangé dans un “:root”.
    Si vous trouvez :root { } dans votre CSS déjà actuel, coller ce qu’il y a à l’intérieur du :root suivant, dans celui que vous possédez déjà.
    Attention, il peut y avoir des conflits de variable. Il ne peut pas y avoir deux mêmes variables. (genre, pas deux fois de --color1). Si c’est le cas, il suffit de renommer “--fond” par exemple en “--main-color-banane” (ce que vous voulez), partout dans le code.
    Pour rechercher et remplacer dans tout un code : https://convertir.github.io/outils/remplacer-texte-en-ligne.html

    Note : Si vous utilisez plusieurs codes de Pisrale, il y a des chances qu’il y ait des conflits. Si vous voulez qu’on modifie les codes pour vous, suivez le bouton

    Personnaliser mon code

  2. Le reste du CSS
    Allez dans le Panneau d’Administration > Affichage > Images et Couleurs > Couleurs & CSS > Feuille de style CSS & 
Copier ce code

    Code:

    /* QEEL PASTEL PAR KOALAVOLANT */

    :root{
    --maincolor:rgba(227, 227, 227, 1);
    --sndcolor:rgba(238, 245, 247, 1);
    --color-titre:rgba(204, 227, 234, 1);
    --color-titre2:#EACCE7;
    --texte:rgba(130, 130, 130, 1);
     
    --border1:1px solid var(--maincolor);
     
    --font1:'Poppins', sans-serif;
    --font2:'Oswald', sans-serif;
     
    }
    .qeel-total, .qeel-total *{ box-sizing:border-box; }
    .qeel-total{ background:white; padding:10px; }
    .qeel-total .qeel-titre{
    font-size:35px; text-transform:uppercase;
    letter-spacing:1px; border:var(--border1);
    font-family:var(--font2); font-weight:900;
     text-align:center; color:var(--color-titre);
    }

    .qeel-flex{ margin-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; }
    .qeel-flex .qeel-gauche, .qeel-flex .qeel-lasts{ width:49%; }


    .qeel-total .qeel-tit{ font-family:var(--font2); font-weight:900;
    text-transform:uppercase; color:var(--color-titre2); font-size:25px; }

    .qeel-total .qeel-co{ padding:10px; display:flex;
     border:var(--border1); height:65px; overflow:auto;  }
    .qeel-total .qeel-co a{ margin:0 3px; }

    .qeel-total .qeel-membresmess{ margin:5px 0; display:flex; justify-content:space-between; }
    .qeel-total .qeel-membresmess span{ display:block; width:49%; text-align:center;
    background:var(--sndcolor); padding:10px; font-family:var(--font1);
    font-size:16px; color:var(--texte);}

    .qeel-total #newus{ background:var(--sndcolor);
     position:relative; overflow:hidden; height:55px; }
    .qeel-total #newus h2{ color:var(--texte); font-size:16px; margin: 15px 10px; text-align:center; width:70%;
    font-family:var(--font1);   }
    .qeel-total #newus #ib-last-user{ position:absolute; right:0; top:0;  }
    .qeel-total #newus #ib-last-user img{ height:55px; width:120px; object-fit:cover; object-position:0% 27%; }

    .qeel-total .qeel-col{ display:block; border:var(--border1); padding:10px; height:176px; overflow:auto;}
    .qeel-total .qeel-col a, .qeel-total .qeel-co a{ font-family:var(--font1);  }
    .qeel-total .qeel-col a strong, .qeel-total .qeel-co a strong{ font-weight:600;  }

    .qeel-total .qeel-groupes{ display:flex; justify-content:center; flex-wrap:wrap; margin-top:5px; width:100%;  }
    .qeel-total .qeel-groupes a{ background:var(--color-titre); font-size:25px; padding:2px 5px; font-weight:700; margin:0 2px;
     text-transform:uppercase; font-family:var(--font2);  color:white !important;  display:block; }

    /* COULEURS DES GROUPES */

    /* Groupe 1 */ .qeel-total .qeel-groupes a:nth-child(1){ background:#EAE9CC; }
    /* Groupe 2 */ .qeel-total .qeel-groupes a:nth-child(2){ background:#EACCE7; }
    /* Groupe 3 */ .qeel-total .qeel-groupes a:nth-child(3){ background:#CCEACF; }
    /* Groupe 4 */ .qeel-total .qeel-groupes a:nth-child(4){ background:#CCD6EA; }

    /* Pour en ajouter, copier coller le groupe 4 et remplacer 4 par 5, etc. */
    .qeel-total .qeel-groupes a:hover{ background:var(--maincolor); }

  3. Les polices d’écriture ne vous plaisent pas ? Vous voulez des bords arrondis ou autre ? Des couleurs différentes ? Une modification minime mais qui rende ce code personnel pour vous ?
    Vous ne savez pas faire, n’avez aucun codeur à disposition ?

    Personnaliser mon code

  4. Le code bug ? Vous ne comprenez pas comment ça fonctionne ? Il y a un souci ? Dites le nous, histoire qu’on puisse vous aider Smile

    Signaler un souci

Revenir en haut

QEEL n°8

Pisrale :: Codages :: Apparence du forum :: Templates

Nos amis proches

QEEL n°8 Parto512 Logo WyvArtem