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)
    -35%
    Le deal à ne pas rater :
    -35% sur la machine à café Expresso Delonghi La Specialista Arte
    359.99 € 549.99 €
    Voir le deal

    Catégories

    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

    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_box
      Appuyez sur la roue crantée pour le modifier

    2. Copier coller ça à l'intérieur :

      Code:
      <ul class="linklist top">
       <!-- BEGIN switch_user_logged_in -->
       <li>
       <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
       </li>
       <li>
       <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
       </li>
       <!-- END switch_user_logged_in -->
       <li>
       <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
       </li>
       <!-- BEGIN switch_user_logged_in -->
       <li class="rightside">
       <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
       </li>
       <!-- END switch_user_logged_in -->
      </ul>

      <!-- BEGIN catrow -->
       <!-- BEGIN tablehead --><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

      <div class="cate-title">{catrow.tablehead.L_FORUM}</div>
       <!-- END tablehead -->
       <!-- BEGIN forumrow -->
       <div class="cate-forum">
          <div class="forum-encart">
             <img class="cate-no" src="{catrow.forumrow.FORUM_FOLDER_IMG}">
            <div class="cate-descr">
              <div class="forum-titre"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></div>
              <span>{catrow.forumrow.FORUM_DESC}</span>
            </div>
            <div class="cate-sous">
                        <!-- Sous forum -->
      <span class="subforums ssfo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                            <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</span>
            </div>
            
        <div class="cate-infos">
       <div class="cate-vava">            <!-- BEGIN avatar -->    
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                           <!-- END avatar -->
                </div>    
                <div class="cate-dermess">
                     <!-- BEGIN switch_topic_title -->
       <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}" class="titresujet">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
       <!-- END switch_topic_title -->
                  <span class="userlast">{catrow.forumrow.USER_LAST_POST}
                    <span class="material-symbols-outlined">chevron_right</span>
                  </span>
                </div>
            </div>
                  <div class="cate-messvue">
                    <span><strong>{catrow.forumrow.TOPICS}</strong> sujets</span>
                    <span><strong>{catrow.forumrow.POSTS}</strong> messages</span>
                </div>
      <script type="text/javascript">$('.subforums').each(function () {$(this).html($(this).html().replace(/, /g,''))});</script>
        </div>
        </div>
              
       <!-- END forumrow -->

       <!-- BEGIN tablefoot -->
       <!-- END tablefoot -->
      <!-- END catrow -->        

      <!-- BEGIN switch_on_index -->
      <ul class="linklist bottom">
       <li>
       <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
       </li>
       <li>
       <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
       </li>
       <li class="last">
       <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
       </li>
       <!-- BEGIN switch_delete_cookies -->
       <li class="rightside">
       <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
       </li>
       <!-- END switch_delete_cookies -->
      </ul>
      <!-- END switch_on_index -->

      <script type="text/javascript">
      //<![CDATA[
      $(document).ready(function() {
       var btn_collapse = $('<div></div>', {
       class: 'btn-collapse'
       });

       var btn_collapse_show = $('<i></i>', {
       class: 'ion-android-add-circle hidden',
       'data-tooltip': '{L_EXPEND_CAT}'
       }).appendTo(btn_collapse);

       var btn_collapse_hide = $('<i></i>', {
       class: 'ion-android-remove-circle',
       'data-tooltip': '{L_HIDE_CAT}'
       }).appendTo(btn_collapse);

       var collapsed = [];

       if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
       collapsed = readCookie('collapsed').split(',');
       }

       $(document).on('click', '.btn-collapse', function() {
       $(this).children('.ion-android-add-circle').toggleClass('hidden');
       $(this).children('.ion-android-remove-circle').toggleClass('hidden');
       $(this).parents('.forabg').toggleClass('hidden');

       if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
       collapsed = readCookie('collapsed').split(',');
       }

       if (!$(this).parents('.forabg').hasClass('hidden')) {
       removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

       createCookie('collapsed', collapsed);
       } else {
       collapsed.push('' + $(this).parents('.forabg').data('cindex'));

       createCookie('collapsed', collapsed);
       }
       });

       $('.forabg').each(function(i) {
       $(this).data('cindex', '' + i);

       $(btn_collapse)
       .clone()
       .attr('id', 'forabg' + i)
       .appendTo($(this).find('.header'));

       if ($.inArray('' + i, collapsed) > -1) {
       $(this).toggleClass('hidden');
       $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
       $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
       }
       });
      });

      function removeFromArray(item, array) {
       var i = array.indexOf(item);

       if (i > -1) {
       array = array.splice(i, 1);
       }
      }

      function createCookie(name, value, days) {
       var expires;

       if (days) {
       var date = new Date();
       date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
       expires = "; expires=" + date.toGMTString();
       } else {
       expires = "";
       }
       document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
      }

      function readCookie(name) {
       var nameEQ = encodeURIComponent(name) + "=";
       var ca = document.cookie.split(';');
       for (var i = 0; i < ca.length; i++) {
       var c = ca[i];
       while (c.charAt(0) === ' ') c = c.substring(1, c.length);
       if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
       }
       return null;
      }
      //]]>
      </script>

    3. 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. Copier coller ça à l'intérieur :

      Code:
      /* TITRE CATEGORIES */

      .cate-title{ margin-top:70px; }
      .cate-title h2{ color:var(--color1); padding:15px;
      border:2px solid var(--color2); border-radius:20px;
      display:inline-block; font-family: var(--font1); font-weight:800; }
      .cate-title h2:nth-child(2){ margin-top:40px; }


      /* FORUM */

      .cate-forum{ margin:10px 0; position:relative; font-family: var(--font1); }
      .cate-forum, .cate-forum *{ box-sizing:border-box; }
      .cate-forum .forum-encart{ display:flex; justify-content:space-between; align-items:center; border-radius: 10px;
      background:var(--fond1); padding:15px; padding-left:90px; }

      /* Cate No */

      .cate-no{ position:absolute; object-fit:cover; width:102px; height:80px; top:50%;
         transform:translateY(-50%) rotate(-3deg); left:-30px; border-radius:15px; }

      /* Cate Descr */

      .cate-descr{ width:42%; }
      .cate-descr .forumtitle{ border-radius: 20px;
      background:var(--fond2); position:relative; padding:5px 15px; font-size:16px; transition:500ms; font-weight:600;  color:var(--txt1) !important;font-family: var(--font1);}
      .cate-descr .forumtitle:hover{ text-decoration:none; transition:500ms; }
      .cate-descr .forumtitle:before{ content:' '; position:absolute; bottom:1px; height:1px;
      background:var(--border1); left:50%; width:96%; transition:1s; transform:scale(0) translateX(-50%); border-radius:20px; }
      .cate-descr .forumtitle:hover:before{ transition:1s; transform:scale(1) translateX(-50%); }

      .cate-descr span{ margin-top:5px; border:1px solid var(--border1); color:var(--txt1); text-align:justify; border-radius:10px; padding:10px; display: block; height:100px; overflow:auto; }
      .cate-descr span strong{ color:var(--txt2);}

      /* Sous forums */

      .cate-sous{ width:18%;  }
      .cate-sous .ssfo{ display:flex; flex-direction:column; text-align:center; height:130px; overflow:auto; }
      .cate-sous .ssfo a{ display:block; color:var(--txt3); border-radius: 5px;
         border: 1px solid rgba(234, 188, 204, 0.00); margin:2px 0; font-size:12px; line-height:12px; padding:5px;
         font-weight:600;
      background:var(--fond3);}
      .cate-sous .ssfo a:nth-child(even){ margin-left:10px; }
      .cate-sous .ssfo a:nth-child(odd){ margin-right:10px; }
      .cate-sous .ssfo a:hover{ background: var(--fond3hover);}
      /* Last post */

      .cate-infos{ width:27%; height:130px; display:flex; align-items:center; border-radius: 10px;
      background: var(--fond2); padding:5px;}
      .cate-infos .cate-vava{ width:30%;}
      .cate-vava .lastpost-avatar{ height:130px; width:85px;}
      .cate-vava .lastpost-avatar:after{ display:none; }
      .cate-vava .lastpost-avatar img{ object-fit:cover; border:none; border-radius:20px; width:100%; height:100%;}

      .cate-infos{ position:relative; }
      .cate-infos .cate-dermess{ width:55%; margin-left:10px;}
      .cate-infos .titresujet{ padding:5px; color:var(--txt3); font-size:11px;
         border:1px solid var(--txt3); border-radius:5px; display:inline-block; width:100%; text-align:center; margin:0 auto 5px auto;  }
      .cate-infos:hover .titresujet{ background:var(--fond4); }
      .cate-infos .userlast{ color:var(--txt1); font-size:10px; text-align:center; display:flex; justify-content:center; flex-wrap:wrap;   }
      .cate-infos .last-post-icon{ position:absolute;z-index:2; right:5px; top:50%; transform:translateY(-50%); }
      .cate-infos .last-post-icon img{ width:20px; visibility:hidden; }
      .cate-infos .material-symbols-outlined{ position:absolute; right:5px; top:50%; transform:translateY(-50%); width:20px; color:var(--txt1); }

      /* Sujets Messages */

      .cate-messvue{ width:8%; display:flex; flex-direction:column; font-size:11px;}
      .cate-messvue span{ border-radius: 5px;
      border: 0.5px solid ;
      background:var(--fond5); text-align:center;
         color:var(--txt1); padding:5px; margin:5px 0;  }
      .cate-messvue span strong{ display:block; }

    Revenir en haut

    Catégories

    Pisrale :: Codages :: Thèmes complets :: Glassomorphism

    Nos amis proches

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