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 à ne pas rater :
Pokémon EV06 : où acheter le Bundle Lot 6 Boosters Mascarade ...
Voir le deal

QEEL

Pisrale :: Codages :: Thèmes complets :: Gang Technology
KoalaVolant
KoalaVolant
Mar 20 Déc 2022 - 10:32
Version du forum : PHPBB2

Ceci est un code appartenant à un thème complet. Vous pouvez
Voir le thème complet "Gang Technology"
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 :
- Crédits : KoalaVolant
- Les images se redimensionnent toutes seules
- L'avatar du dernier inscrit s'affiche

Couleurs & Fonts


  1. Pour rappel, ce code appartient à un thème complet. Si vous utilisez déjà d'autres codes de ce thème, vous pouvez esquiver cette partie. Elle concerne les couleurs, et les polices d'écriture.

    Sinon : les couleurs sont à placer où vous voulez, mais quand vous les modifierez, elles se modifieront partout où les "variables" sont utilisées.

    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 n'appartenant pas à ce thème, il y a des chances qu’il y ait des conflits. Si vous voulez qu’on modifie les codes pour vous, suivez un de ces boutons

    Personnaliser mon code
    Signaler un souci

  2. Pour copier coller le ":root" il faut aller dans le Panneau d'administration > Affichage > Couleurs et CSS > Feuille de style CSS et copier coller ça :

    Code:
    :root{
        --fond-deg:linear-gradient(90deg, var(--dark) 32.29%, var(--light) 89.86%);
        --fond-img:url('https://www.zupimages.net/up/22/45/f0t6.png');
        --fond-img2:url('https://www.zupimages.net/up/22/45/f0t6.png');
        --fond-bodyline:#4d4d4d;
        --dark:#531b37;
        --light:#88263C;
        
        --black:#FDE8ED;
        --white:#dedede;
      --whitef:#363636;
        
        --text-shadow:0px 0px 0px #757575;
        --font-text:'Inter', sans-serif;
        --font-title:'GothamPro', sans-serif;
      
      --groupe1:#d7ba83;
    --groupe2:#ff85a7;
    --groupe3:#88c6ff;
    --groupe4:#6ed373;
    }

  3. Attention, les polices d'écriture utilisées sur ce thème sont "Inter" et "Gotham Pro" dans ce but, donc, il vous faudra les installer. Pour ça, connectez vous au compte fondateur, allez dans le Panneau d'administration > Affichage > Templates > Haut du forum (overall-header) et avant le "< /head>" (sans espace), copiez coller ça :
    Code:
      <!-- FONTS DU FORUM -->
      <link href="https://cdn.statically.io/gist/mfd/f3d96ec7f0e8f034cc22ea73b3797b59/raw/fad2f254369fb54250260077a4c87391a6280c52/gotham.css" rel="stylesheet">
        <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=Inter:wght@400;700;900&display=swap" rel="stylesheet">

  4. Vous pouvez bien sûr changer les fonts par autre chose, en allant vous servir sur Google Fonts Very Happy



HTML

  1. Avec le compte fondateur, il faut aller dans Panneau d'administration > Affichage > Templates > index_body
    Appuyez sur la roue crantée pour le modifier

  2. Repérez
    Code:
    <!-- BEGIN disable_viewonline -->
    Et
    Code:
    <!-- END disable_viewonline -->
  3. Il y a déjà quelque chose à l'intérieur, mais remplacez tout ce qu'il y a à l'intérieur par :

    Code:
    <div class="qeeltotal">
      <div class="qeel-title">Es-tu <strong>parmi</strong> nous ?</div>
      <div class="qeel-flex1">
        <span id="onlinetot">{TOTAL_USERS_ONLINE}</span>
        <span>Nous avons <strong id="messtot">{TOTAL_POSTS} discussions</strong> parmi <strong id="memtot">{TOTAL_USERS} habitants</strong></span>
    </div>
      <div class="qeel-flex2">
        <div class="qeel-gauche">
          
          <div class="qeel-coco">
            <div class="qeel-title1">Ils <strong>sont là</strong> dans les rues</div>
            <div class="qeel-co" id="memen">{LOGGED_IN_USER_LIST}</div>
          </div>
          
          <div class="qeel-bienvenue">
             <span id="last-user">
            <div id="newus" class="qeel-bloc"><h2>Bienvenue à toi {NEWEST_USER}</h2></div>
                <div id="ib-last-user"></div>
               <div class="bienvenue-last">Quels seront tes <br/><strong>choix</strong> de vie ?</div>
          </span>
          </div>
          
          <!-- FIN GAUCHE -->
        </div>
        <!-- MILIEU -->
        <div class="qeel-milieu"></div>
        <!-- FIN MILIEU -->
        <div class="qeel-droite">
          <div class="qeel-title1">On <strong>les a vu</strong> passer à Detroit</div>
          <div class="qeel-dernco">
            <table id="24h" class="qeel-dernier"><span class="gensmall">{L_CONNECTED_MEMBERS}</span></table>
          </div>
        </div>
        <!-- FIN DROITE -->
       <!-- FIN FLEX PRINCIPAL -->  
      </div>
            <!-- GROUPES -->
      <div class="qeelgroupes">
        <a class="groupe1" href="https://becomeyourlife.forumactif.com/g6-fragility">Fragility</a>
        <a class="groupe2" href="https://becomeyourlife.forumactif.com/g5-we-are-free">We are free</a>
        <a class="groupe3" href="https://becomeyourlife.forumactif.com/g7-it-s-time-to-decide">It's time to decide</a>
        <a class="groupe4" href="https://becomeyourlife.forumactif.com/g3-software-instability">Software Instability</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(/Invisible/,"caché");</script>
            <script type="text/javascript">document.getElementById('onlinetot').innerHTML=document.getElementById('onlinetot').innerHTML.replace(/Invisibles/,"cachés");</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é/,"pixel");</script>
            <script type="text/javascript">document.getElementById('onlinetot').innerHTML=document.getElementById('onlinetot').innerHTML.replace(/Invités/,"pixels");</script>
            <script type="text/javascript">document.getElementById('onlinetot').innerHTML=document.getElementById('onlinetot').innerHTML.replace(/Moteur de recherche/,"robot");</script>
            <script type="text/javascript">document.getElementById('onlinetot').innerHTML=document.getElementById('onlinetot').innerHTML.replace(/Moteurs de recherche/,"robots");</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 24 dernières heures :/," ");</script>

  4. Validez une fois que c'est bon (il faut confirmer la modification une fois de retour dans la page des templates

  5. Si vous désirez changer la couleur des groupes, il suffit de changer la couleur des variables dans le CSS comme --groupe1



CSS

  1. Allez dans Panneau d'administration > Affichage > Couleurs & CSS > Feuille de style CSS

  2. Si vous n'avez pas d'autres codes de ce thème, copier coller ça en plus à l'intérieur :
    Code:
    /* BODY ET CHOSES DE BASE */
    a, a:hover{ text-decoration:none !important; }
    *{ box-sizing:border-box; }
    img{ object-fit:cover; }
    .sceditor-button{width: 28px;}
    .top-bottom-fo{ position:absolute; }
    .bodyline{ border:none; background:var(--fond-bodyline);}
    #i_logo{ width:auto; }
    .sceditor-button{ width:27px !important; height:27px !important; }

    .catBottom{ background:var(--fond-deg) !important;}
    .catBottom a{ color:var(--white) !important;  }
    .catBottom .nav{ color:var(--black) !important;  }
    .row2, .row1{ background:var(--whitef) !important; color:var(--white); }

    input.post, textarea.post, select, #text_editor_iframe, textarea.inputbox{ color:#222; }
    input, textarea, select, #text_editor_iframe, .external-module .external-more a{ color:#222; }
    .forumline{ background:transparent; }
    th, td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom{ background:var(--fond-deg); }

    /* DÉBUT RETRAIT TRAITS NOIRS FORUM */
    .catHead, .catBottom, .catLeft, .catRight, .thLeft, .thRight,
    .thSides, .thCornerL, .thCornerR, .thTop, .thHead, .row3Right, .forumline
    {
    border: none !important;
    }
    /* FIN RETRAIT TRAITS NOIRS FORUM */

  3. Si vous avez déjà un code de ce thème, contentez vous de copier coller ça à l'intérieur et c'est tout :

    Code:
    /* BOUTONS */
    .boutons-cate, .boutons-qeel{ font-family:var(--font-title) !important; display:flex; justify-content:space-between;}
    .boutons-cate a, .boutons-qeel a{ text-shadow:var(--text-shadow); transition:500ms; font-size:12px; line-height:1px; color:var(--white); padding:5px; background:var(--light); display:block; }
    .boutons-cate a:hover, .boutons-qeel a:hover{ text-shadow:none; color:var(--black); letter-spacing:2px; transition:500ms; }


    /*************************** QEEL *************/

    .qeeltotal{ width:100% }
    .qeel-title{ background:var(--fond-img); padding:10px; font-family:var(--font-title); color:var(--white); font-size:25px; text-shadow:var(--text-shadow); letter-spacing:2px; margin-top:10px;  }

    /* DEUX ELEMENTS DU HAUT */

    .qeel-flex1{ display:flex; color:var(--white); font-size:12px; justify-content:center; text-align:center; margin:5px 0; }
    .qeel-flex1 span{ background:var(--dark);  display:block; width:50%; padding:5px; }
    .qeel-flex1 #onlinetot{ margin-right:5px; }

    /* FLEX PRINCIPAL */

    .qeel-flex2{ display:flex; justify-content:space-between; }
    .qeel-flex2 .qeel-title1{ background:var(--fond-deg); color:var(--white); padding:3px; font-family:var(--font-title); font-weight:200; text-shadow:var(--text-shadow);}

    /* QEEL GAUCHE */

    .qeel-gauche{width:50%; }
    .qeel-co{ background:var(--whitef); padding:10px; height:80px; overflow:auto; }
    .qeel-co a{ font-size:14px; }

    .qeel-bienvenue{ position:relative; background:var(--fond-deg); height:60px; margin-top:5px; }
    #last-user{ display:flex; }

    .qeel-bienvenue img{ position:absolute; width:80px; height:70px; left:55%; transform:translateX(-50%); clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);  top:-10px;  }
    .qeel-bienvenue #newus{ width:50%; }
    .qeel-bienvenue #newus h2{ font-size:15px; color:var(--black); padding:0 10px; margin:0; margin-top:10px; font-size:13px; font-weight:200;  }
    .qeel-bienvenue #newus h2 a{ display:block; font-size:15px;  }
    .bienvenue-last{ width:47%;  text-align:right; font-family:var(--font-title); font-weight:200; color:var(--white); letter-spacing:1px; margin-top:10px; font-size:14px; line-height:18px; padding:0 5px 0 5px; margin-left:10px; }

    /* QEEL MIDDLE */

    .qeel-milieu{ width:10%; margin:0 5px; background:var(--fond-img); background-size:cover; background-position:center; }

    /* QEEL DROITE */

    .qeel-droite{ width:40%; }
    .qeel-dernco .qeel-dernier{ background:var(--whitef);  width:100%; height:146px; display:flex; padding:5px; overflow:auto; }
    .qeel-dernco .qeel-dernier a{ font-size:14px; }
    .qeel-dernco .qeel-dernier .row1{ background:none; }

    /* GROUPES */

    .qeelgroupes{ display:flex; justify-content:center; }
    .qeelgroupes a{ display:block; text-transform:uppercase; padding:5px; font-size:14px; margin:5px; border:1px solid var(--light); font-family:var(--font-title); font-weight:200; letter-spacing:2px;   }
    .qeelgroupes .groupe1{ color:var(--groupe1); }
    .qeelgroupes .groupe2{ color:var(--groupe2); }
    .qeelgroupes .groupe3{ color:var(--groupe3); }
    .qeelgroupes .groupe4{ color:var(--groupe4); }
    .qeelgroupes a:hover{ background:var(--light); font-weight:900;}


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 :: Gang Technology

Nos amis proches

QEEL Parto512 Logo WyvArtem