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

AccueilAccueil  
  • RechercherRechercher  
  • S'enregistrerS'enregistrer  
  • ConnexionConnexion  
    • Forum sans inscription - Si vous voulez en savoir plus ou rejoindre éventuellement l'équipe, découvrez le concept
    Commandes demander des créations aux gens de PisraleBoite à idée de créations proposez des idées de créations qui manquent sur PisraleFaceclaim réels trouver une bouille réelleFaceclaim illustré trouver une bouille illustréeBesoin d'un faceclaim pour que Pisrale vous propose une bouilleRemarques questions, suggestions, corrections des invités
    Dernières news (10/11)Discord
    (sans flood)
    Le Deal du moment : -20%
    Drone Dji DJI Mini 4K (EU)
    Voir le deal
    239 €

    QEEL

    Pisrale :: Codages :: Thèmes complets :: Glassomorphism
    KoalaVolant
    KoalaVolant
    Lun 13 Mai 2024 - 9:57
    Version du forum : ModernBB

    Ceci est un code appartenant à un thème complet. Vous pouvez
    Voir le thème complet "Glassormophism"
    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
    - Il est possible de changer le nom des groupes, et d'en enlever, mais pas d'en ajouter.


    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 dans le CSS, mais quand vous les modifierez, elles se modifieront partout où les "variables" sont utilisées.

      Ce code utilise un système de “variables de couleurs". En gros, vous modifiez les couleurs directement dans les variables, et elles se modifient partout où cette variable aura été placée.
      Exemple : Si vous modifiez --color1:#fff; par --color1:black; tous les endroits du CSS qui possèdent --color1 en variable seront en noir.

      Si l'agencement ne vous plais pas, vous pouvez bien sûr changer le nom des variables, changer qui a quel variable (changer color1 en color2).

      Note : 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{
          --color1:#C8BBDE;
          --color2: #806E9F;
        
        --font1:Montserrat;
        
        --fond1: linear-gradient(90deg, #3C395B 50%, #3F2E3A 73.23%);
      --fond2: rgba(103, 100, 148, 0.50);
      --fond3: linear-gradient(180deg, rgba(201, 137, 190, 0.20) 0%, rgba(146, 131, 176, 0.16) 100%);
      --fond3hover:linear-gradient(-180deg, rgba(201, 137, 190, 0.40) 0%, rgba(146, 131, 176, 0.40) 100%);
      --fond4:rgba(255,255,255,0.3);
      --fond5: rgba(156, 115, 144, 0.30);
      --fond6: rgb(94,68,86);
         
      --txt1:#DEDEDE;
      --txt2:#E1BCDB;
      --txt3:#fff;

      --border1:#847FC1;
      --border2: #AF86A3;

      }

    3. Attention, la police d'écriture utilisées sur ce thème est "Montserrat". Elle est déjà installée dans le HTML, mais si vous voulez la changer, il suffit de remplacer ça :
      Code:
      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
      Par une autre font que vous trouverez sur Google Fonts. Au pire, venez demander un ajustement de code dans les commandes sur Pisrale.



    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:
      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
      <div class="qeeltotal" id="app">
        
        <!-- GAUCHE -->
        <div class="qeelgauche">
        <!-- Membres connectés -->
        <div class="qeelcola">
          <div class="qeeltitles">Qui se trouve dans les rues</div>
          <div class="qeelcoco">{LOGGED_IN_USER_LIST}</div>
        </div>
        
        <!-- Membres et messages -->
        <div class="qeelmessmem">
          <span class="mem">{TOTAL_USERS} habitants</span>
          <span class="mess">{TOTAL_POSTS} messages</span>
        </div>
        
        <!-- Crédits -->
        <div class="qeelcredit">Crédits les plus importants à indiquer ici.Crédits les plus importants à indiquer ici. Crédits les plus importants à indiquer ici. Crédits les plus importants à indiquer ici. Crédits les plus importants à indiquer ici. Crédits les plus importants à indiquer ici. Crédits les plus importants à indiquer ici. Crédits les plus importants à indiquer ici.
        </div>
          <!-- FIN GAUCHE -->
      </div>
        
        <!-- MILIEU -->
        <div class="qeelmilieu">
          
          <!-- Bienvenue -->
         <div class="qeelnew">
           <span class="vavaqeel"><img src="https://i.imgur.com/1B6dpJ7.png"/></span>
           <div class="dern-in2" id="newus">
             <span>Bienvenue à toi</span>
             <span class="derqeel">{NEWEST_USER}</span>
            </div>
        </div>
          
          <!-- Groupes titres -->
          <div class="qeelgroupes">
              <span class="groupe1">Groupe 1</span>
              <span class="groupe2">Groupe 2</span>
              <span class="groupe3">Groupe 3</span>
              <span class="groupe4">Groupe 4</span>
              <span class="groupe5">Groupe 5</span>
              <span class="groupe6">Groupe 6</span>
          </div>
          
          <!-- FIN MILIEU -->
      </div>
        
        <!-- DROITE -->
        <div class="qeeldroite">
          <!-- Derniers connectés -->
          <div class="qeel-codern">
          <div class="qeeltitles">Ils étaient là il y a peu</div>
            <div class="dayQEEL">{L_CONNECTED_MEMBERS}</div>
          </div>
          
          <!-- Description des groupes -->
      <div class="qeeldgroupes">
        <span class="groupe1 dpgroup"><strong>Groupe 1</strong> : blablabla</span>
        <span class="groupe2"><strong>Groupe 2</strong> : blablabla</span>
        <span class="groupe3"><strong>Groupe 3</strong> : blablabla</span>
        <span class="groupe4"><strong>Groupe 4</strong> : blablabla</span>
        <span class="groupe5"><strong>Groupe 5</strong> : blablabla</span>
        <span class="groupe6"><strong>Groupe 6</strong> : blablabla</span>
          </div>
          <!-- FIN DROITE -->
      </div>
        <!-- FIN QEEL -->
      </div>

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



    CSS

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

    2. Dans le cas du QEEL, il faudra ajouter les couleurs des groupes dans le :root. Donc ajouter ça juste après "--border2: #AF86A3;" et avant "}"

      Code:
        /* Spécial QEEL couleurs des groupes */
         
         --groupe1:#D0FFCC;
         --groupe2:#B7F6FF;
         --groupe3:#B7BEFF;
         --groupe4:#F3ABFF;
         --groupe5:#FFB0B0;
         --groupe6:#FFE99B;
      }

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

    4. Copier coller ça à l'intérieur et c'est tout :

      Code:
      /******** QUI EST EN LIGNE ********************/

      .qeeltotal{ border-radius:10px; padding:15px; display:flex; justify-content:space-between;
         align-items:center;
      background:var(--fond1); margin:30px 0; font-family:var(--font1);  }
      .qeeltotal br{ display:none; }

      .qeeltotal .qeelgauche{ width:38%; }
      .qeeltotal .qeelmilieu{ width:24%; }
      .qeeltotal .qeeldroite{ width:34%;}

      .qeeltotal .qeeltitles{ background:var(--fond2); border-radius:10px; border:1px solid var(--border1); padding:5px; color:var(--txt1);
      font-weight:600; padding-left:10px; }

      /* Gauche */

      /* Connectés */
      .qeelcoco{ padding:10px 3px; height:80px; overflow:auto; }
      .qeelcoco strong{ font-weight:500; }

      /* Messages */
      .qeelmessmem{ display:flex; align-items:center; justify-content:space-between; }
      .qeelmessmem span{ display:block; border-radius:10px;
         border:1px solid var(--border2); width:48%; text-align:center; padding:8px 0;
         font-size:15px; line-height:15px; color:var(--txt2);  }
      .qeelmessmem span strong{ display:block; font-size:18px; font-weight:900;}

      /* Crédits */
      .qeelcredit{ background:var(--fond2); margin-top:15px; border-radius:20px;
         padding:10px; color:var(--txt1); font-size:11px; line-height:14px; font-weight:600;
      height:50px; overflow:auto; text-align:justify;}

      /***** MILIEU *****/

      /* Bienvenue à */
      .qeelnew{ padding: 13px; background:var(--fond5); border-radius:10px; display:flex; align-items:center;}
      .qeelnew .vavaqeel{ width:90px; height:90px;  }
      .qeelnew .vavaqeel img{ border-radius:10px; width:100%; height:100%; object-fit:cover; }
      .qeelnew .dern-in2{ width:70%; margin-left:10px; }
      .qeelnew .dern-in2 span:first-child{ color:var(--txt3);
         border:1px solid var(--border2); padding:5px; border-radius:5px; }

      .qeelnew .dern-in2 span:last-child strong a{ margin-top:5px; display:block;
      text-align:center; color:var(--txt3); font-size:15px;}

      /* Groupes */
      .qeelgroupes{ display:flex; flex-wrap:wrap; justify-content:center;
      margin-top:10px; }
      .qeelgroupes span{ background:var(--fond5); padding:5px;
         border-radius:5px; margin:5px; width:45%; text-align:center; font-weight:600; cursor:pointer;
         display:block; }
      .qeelgroupes span:hover{ background:var(--fond2); }

      /* Couleurs de groupes */
      .qeelgroupes .groupe1, .qeeldgroupes .groupe1 strong { color: var(--groupe1); }
      .qeelgroupes .groupe2, .qeeldgroupes .groupe2 strong { color: var(--groupe2); }
      .qeelgroupes .groupe3, .qeeldgroupes .groupe3 strong { color: var(--groupe3); }
      .qeelgroupes .groupe4, .qeeldgroupes .groupe4 strong { color: var(--groupe4); }
      .qeelgroupes .groupe5, .qeeldgroupes .groupe5 strong { color: var(--groupe5); }
      .qeelgroupes .groupe6, .qeeldgroupes .groupe6 strong { color: var(--groupe6); }


      /***** DROITE ******/

      /* Titre right */

      .qeel-codern .qeeltitles{ text-align:right; }

      /* Derniers connectés */

      .qeeldroite .dayQEEL{ background:var(--fond3); padding:10px; margin:10px 0; border-radius:10px;
      height:120px; overflow:auto; }

      /* Descriptions groupes */

      .qeeldgroupes span {    display: none; }
      .qeeldgroupes span.dpgroup {    display: block; }
      .qeeldroite .qeeldgroupes span{ background:var(--fond2);
         padding:10px; color:var(--txt3); border-radius:20px;
         height:60px; overflow:auto;  }



    Javascript

    1. Allez dans Modules > Gestion des Pages Javascript
      Assurez vous que les codes javascript sont activés
      Créez une nouvelle page et cocher "Sur l'index"

    2. Puis copier coller ça :

      Code:
      $(document).ready(function() {
        // Groupes
          var selectedGroup = 'groupe1';

          $('.qeelgroupes span').click(function() {
              selectedGroup = $(this).attr('class');
              updateSelectedGroup();
          });

          function updateSelectedGroup() {
              $('.qeeldgroupes span').removeClass('dpgroup');
              $('.qeeldgroupes .' + selectedGroup).addClass('dpgroup');
          }

          // Appeler la fonction initiale pour définir le groupe initial
          updateSelectedGroup();
        
        // Remplacer texte
        $('.qeelcoco').html(function(_, html) { return html.replace('Utilisateurs enregistrés :', '');  });
        $('.qeelmessmem .mem').html(function(_, html) { return html.replace('Nous avons', '');  });
        $('.qeelmessmem .mem').html(function(_, html) { return html.replace('membres enregistrés', '');  });
          $('.qeelmessmem .mess').html(function(_, html) { return html.replace('Nos membres ont posté un total de', '');  });
          $('.qeelmessmem .mess').html(function(_, html) { return html.replace('messages', '');  });
        $('.qeelmessmem .mess').html(function(_, html) { return html.replace('messages messages', 'messages');  });
        $('.derqeel').html(function(_, html) { return html.replace("L'utilisateur enregistré le plus récent est", '');  });
       $('.dayQEEL').html(function(_, html) { return html.replace("Membres connectés au cours des 24 dernières heures : ", '');  });
       $('.dayQEEL').html(function(_, html) { return html.replace("Membres connectés au cours des 48 dernières heures : ", '');  });
         $('.dayQEEL').html(function(_, html) { return html.replace("Membres connectés au cours des 72 dernières heures : ", '');  });
      });

      /* Dernier avatar */
      $(document).ready(function () {
          // Étape 1 : Sélectionnez le lien avec la classe "testlien"
          var lienTest = $(".derqeel a");
        console.log('le lien est :', lienTest);

          // Étape 2 : Accédez à la page liée par le lien en arrière-plan
          var urlPageLiee = lienTest.attr("href");

          $.ajax({
              url: urlPageLiee,
              type: 'GET',
              dataType: 'html',
              success: function (data) {
                  // Étape 3 : Récupérez l'URL de l'image dans la div avec la classe "mod-login-avatar"
                  var imgURL = $(data).find(".mod-login-avatar img").attr("src");

                  // Étape 4 : Placez l'URL dans la balise <img> avec l'id "testavatar"
                  $(".vavaqeel img").attr("src", imgURL);
              },
              error: function (error) {
                  console.error('Erreur lors du chargement de la page : ', error);
              }
          });
      });


    Avatar du dernier inscrit

    1. Attention, si vous n'autorisez pas les invités à voir les profils de vos membres, l'avatar du dernier inscrit ne s'affichera pas dans le QEEL quand on est pas connecté.


    Modifier un groupe

    1. Dans le template, repérez "Groupes Titres" et vous y verrez "groupe 1" "groupe 2" etc, il faut modifier ce qu'il y a à l'intérieur du span pour mettre vos noms de groupes.

    2. Dans le template, repérez "Description des groupes" et vous y verrez "groupe 1" "groupe 2" etc, il faut modifier ce qu'il y a à l'intérieur du span pour mettre la description de vos groupes


    Supprimer un groupe

    1. Allez dans le HTML et repérez le commentaire "Groupes Titres" puis les "< span class="groupe1">" (sans l'espace de la balise span).

    2. Allez dans le HTML et repérez le commentaire "Description des groupes" puis les "< span class="groupe1">" (sans l'espace de la balise span).

    3. Enlevez autant de span qu'il ne vous faut pas

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

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

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

    Nos amis proches

    QEEL Parto512 Life Is Strange L'AnnuaireImage QEEL B-squareAinsi tomba ThédasDuralasCoeur de la force