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 : -20%
-20% Récupérateur à eau mural 300 ...
Voir le deal
79 €

QEEL

Pisrale :: Codages :: Thèmes complets :: Sombre Pose
KoalaVolant
KoalaVolant
Ven 26 Mai 2023 - 13:38
Version du forum : PHPBB2

Ceci est un code appartenant à un thème complet. Vous pouvez
Voir le thème complet "Sombre Pose"
Si vous utilisez d'autres codes de ce thème, vous n'avez pas besoin de recopier-coller la partie "couleurs".




Particularités du code :
- 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.
- Il y a quelques petites modifs à faire pour correspondre à votre forum.

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:
    <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
     <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
     <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>

    Et enlevez là.

  4. Maintenant il vous faudra chercher cette partie :

    Code:
    <!-- BEGIN disable_viewonline -->

    Et cette partie

    Code:
    <!-- END disable_viewonline -->
  5. Entre les deux codes nommés précédemment, vous copier/coller ceci :

    Code:
     <div class="qeel-boutons">
     <a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a>
    <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
    <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
                </div>
     <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Marck+Script&display=swap" rel="stylesheet">
    <div class="qeel-total">
      <div class="qeel-title qeel-bloc">Ce qui bouge à Seattle</div>
      <div class="qeel-infos" id="onlinetot">{TOTAL_USERS_ONLINE}</div>
      <div class="qeel-flex">
        <!-- GAUCHE -->
      <div class="qeel-gauche">
        <div class="enlign qeel-bloc"><strong>Actuellement présents</strong>
          <span id="memen">{LOGGED_IN_USER_LIST}</span></div>
        </div>
        <div class="qeel-middle">
                <span class="qeel-mess qeel-bloc" id="messtot">{TOTAL_POSTS} Messages</span>
              <span class="qeel-membre qeel-bloc" id="memtot">{TOTAL_USERS} Habitants</span>
            <span id="last-user">
            <div id="newus" class="qeel-bloc"><h2>Bienvenue à {NEWEST_USER}</h2></div>
                <div id="ib-last-user"></div>
          </span>
      </div>
        <!-- DROITE -->
        <div class="qeeldroite">
          <div class="dern-co qeel-bloc"><strong class="qeeltitle2">Ils sont passés par là</strong><table id="24h" class="qeel-dernier"><span class="gensmall">{L_CONNECTED_MEMBERS}</span></table></div>
        </div>
        <!-- FIN FLEX -->
      </div>
      <!-- GROUPES -->
      <div class="qeelgroupes">
        <a class="groupe1" href="">Nom du groupe</a>
        <a class="groupe2" href="">Nom du groupe</a>
        <a class="groupe3" href="">Nom du groupe</a>
        <a class="groupe4" href="">Nom du groupe</a>
        <a class="groupe5" href="">Nom du groupe</a>
      </div>
      <!-- FIN QEEL -->
        </div>
      
      
            
              <script type="text/javascript">$(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('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/messages/,"");</script>
    <script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/message/,"");</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>
                      <script type="text/javascript">document.getElementById('24h').innerHTML=document.getElementById('24h').innerHTML.replace(/Membres connectés au cours des 48 dernières heures :/," ");</script>

  6. 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:

      /* RESET */
     
      .pantos, .pantos *{ box-sizing:border-box; font-family:Verdana; }
    .qeel-total, .qeel-total *{ box-sizing:border-box;  }
      .pantos img, .qeel-total img{ object-fit:cover; width:100%; }
      .pantos a, .pantos a:hover, .qeel-total a, .qeel-total a:hover, .qeel-boutons a, .qeel-boutons a:hover{ text-decoration:none !important; }
     
      /* COLORS */

      :root{
     
      --font1:'Encode Sans', sans-serif;
      --font2:'Fjalla One', sans-serif;
     
      --fond:#1c1c1c;
      --fond2:#666464;
      --text: #959494;
      --black:#000;
      --degrade:linear-gradient(90deg, #5e3172 0%, #000 100%);
      --degrade-hover:linear-gradient( #000,#5e3172);
     
      --bg-img:url('https://i.imgur.com/x5JsKHa.png');
    --box-shadow:rgba(0,0,0,0.75);

        /* Couleurs groupes */
        
          --groupe1:#c01919;
          --groupe2:#474ec8;
          --groupe3:#A000F0;
          --groupe4:#E09421;
          --groupe5:#509E4C;
      }

    /* QEEL */

    /* BOUTONS */

    .qeel-boutons{ display:flex; justify-content:center;  width:880px; margin:0 auto; }
    .qeel-boutons a{ display:block; padding:10px; background:var(--degrade);
        margin:10px; color:var(--text); font-size:12px; font-family:var(--font2); letter-spacing:2px;  }
    .qeel-boutons a:hover{ background:var(--degrade-hover);}
    /* TOTAL DU QEEL */
    .qeel-total{ width:880px; margin:0 auto; background:var(--bg-img); background-size:100%;
    background-position:center; padding:10px;}

    /* TITRE */

    .qeel-total .qeel-bloc {background:var(--fond); box-shadow: -1px -1px 23px 3px var(--box-shadow)inset;
    -webkit-box-shadow: -1px -1px 23px 3px var(--box-shadow) inset;
    -moz-box-shadow: -1px -1px 23px 3px var(--box-shadow) inset; color:var(--text); padding:5px;
    }

    .qeel-total .qeel-title{ margin:0 5px; margin-bottom:10px; padding:5px; font-family:var(--font1); color:var(--text); font-size:9px; text-transform:uppercase; letter-spacing:2px; text-align:center; }

    /* Infos */
    .qeel-total .qeel-infos {
        color:var(--text); text-align:center; margin-bottom:10px; font-size:12px; font-family:var(--font1);
    }

    /* ELEMENTS DU FLEX */

    .qeel-total .qeel-flex{ display:flex; justify-content:space-between; }
    .qeel-flex .qeel-gauche, .qeel-flex .qeel-middle, .qeel-flex .qeeldroite{ width:33%;  }
    .qeel-flex .qeel-middle{ margin:0 10px; }

    /* GAUCHE */

    .qeel-gauche .enlign > strong{ display:block; font-family:var(--font2); text-transform:uppercase; text-align:center; color:var(--fond2);}
    .qeel-gauche .enlign{ height:200px; padding:10px;  }
    .qeel-gauche #memen{ border:1px solid var(--fond2); border-left:none; border-right:none;  padding:10px 0;height:160px; overflow:auto; overflow:auto; display:block; font-size:13px; font-family:var(--font1);}

    /* MILIEU */

    .qeel-middle{ display:flex; flex-direction:column; position:relative; }
    .qeel-middle > span{ width:53%; }
    .qeel-middle .qeel-membre{ margin:5px 0; }
    .qeel-middle .qeel-mess, .qeel-middle .qeel-membre{ text-align:center; font-family:var(--font1); font-size:13px; }
    .qeel-middle .qeel-mess strong, .qeel-middle .qeel-membre strong{ color:var(--fond2); font-size:16px; }

    /* Avatar bienvenue */

    #ib-last-user{ position:absolute; top:0; right:0; width:120px; opacity:0.5; transition:500ms; }
    #ib-last-user img{ height:198px;}
    #ib-last-user:hover{ opacity:1; transition:500ms; }

    /* Bienvenue */

    #newus h2{ height:97px; display:flex; justify-content:center; flex-wrap:wrap; align-items:center; color:var(--text); font-family:var(--font1); font-size:14px; text-align:center; font-weight:normal;  }
    #newus a{ display:block; font-size:22px; font-family:var(--font2); font-weight:normal !important; }
    /* DROITE */

    .qeeldroite .qeeltitle2{ display:block; font-family:var(--font2); text-transform:uppercase; text-align:center; color:var(--fond2);}
    .qeeldroite .qeel-dernier{padding:10px;  border:1px solid var(--fond2); border-left:none; border-right:none;  padding:10px 0;height:168px; overflow:auto; overflow:auto; display:block; font-size:14px; font-family:var(--font1); }
    .qeeldroite .qeel-dernier .row1{ background:none; }
    .qeeldroite .qeel-dernier .row1 .gensmall{ font-size:13px; font-family:var(--font1) !important; }

    /* QEEL GROUPES */

    .qeelgroupes{ display:flex; justify-content:space-between; margin-top:10px; }
    .qeelgroupes a{ background:green; width:19%; padding:10px; margin:0 3px;
        text-align:center; color:var(--fond); font-size:14px;
        text-transform:uppercase; font-family:var(--font2);
     box-shadow: -1px -1px 23px 3px var(--box-shadow) inset;
    -webkit-box-shadow: -1px -1px 23px 3px var(--box-shadow) inset;
    -moz-box-shadow: -1px -1px 23px 3px var(--box-shadow) inset;}

    /* Groupes couleurs */

    .qeelgroupes .groupe1{ background:var(--groupe1); }
    .qeelgroupes .groupe2{ background:var(--groupe2); }
    .qeelgroupes .groupe3{ background:var(--groupe3); }
    .qeelgroupes .groupe4{ background:var(--groupe4); }
    .qeelgroupes .groupe5{ background:var(--groupe5); }

    /* FIN QEEL */

  3. Si vous désirez changer la couleur des groupes, il suffit de changer la couleur des variables comme --groupe1

  4. 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

  5. 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


Ajouter un groupe

  1. Allez dans le HTML et repérez "< a class="groupe5" href="">Nom du groupe" (sans l'espace de la balise
  2. Copier coller le code suivant, et mettez "groupe6" à la place (ou 7 ou 8 ou 9, etc), en le plaçant après le groupe 5
    Code:
    <a class="groupe5" href="">Nom du groupe</a>

  3. Allez dans le CSS et repérez
    Code:
    .qeelgroupes .groupe5{ background:var(--groupe5); }
    Dupliquez ce code juste en dessous et remplacez tous les groupe5 par "groupe6" (ou 7 ou 8 ou 9, bref dupliquer le autant de fois que nécessaire ! Very Happy

  4. Restez dans le CSS et repérez la variable (dans le :root) des couleurs de groupes donc exemple :
    Code:
         --groupe5:#509E4C;
    Et dupliquez une de ces variables pour ajouter "--groupe6" avec la bonne couleur. (ou 7 ou 8, bref, dupliquer autant de fois que nécessaire encore une fois).

  5. Si vous galérez, n'y arrivez pas on peut le faire pour vous : Personnaliser mon code


Supprimer un groupe

  1. Allez dans le HTML et repérez "< a class="groupe5" href="">Nom du groupe" (sans l'espace de la balise
  2. Enlevez autant de balise que nécessaire (donc autant de balise cités à l'étape 1).

  3. Allez dans le CSS et repérez
    Code:
    .qeelgroupes .groupe5{ background:var(--groupe5); }
    Enlevez autant de ".qeelgroupes .groupe5{ }" (ou groupe4, ou groupe3, etc) pour n'avoir que le bon nombre de groupe.

  4. Restez dans le CSS et repérez la variable (dans le :root) des couleurs de groupes donc exemple :
    Code:
         --groupe5:#509E4C;
    Et même chose, enlever le bon nombre de variable que nécessaire.

  5. Si vous galérez, n'y arrivez pas on peut le faire pour vous : Personnaliser mon code
Revenir en haut

QEEL

Pisrale :: Codages :: Thèmes complets :: Sombre Pose

Nos amis proches

QEEL Parto512 Logo WyvArtem