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 (06/10)Discord
    (sans flood)
    Le deal à ne pas rater :
    Précommandes lancées pour le nouvel iPad Mini 7 (2024) de Apple
    609 €
    Voir le deal

    Profil & Message

    Pisrale :: Codages :: Thèmes complets :: Glassomorphism
    KoalaVolant
    KoalaVolant
    Lun 13 Mai 2024 - 9:58
    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".



    clique pour voir le survol

    Particularités du code :
    - Crédits : KoalaVolant
    - Les images se redimensionnent toutes seules
    - Les champs de profil apparaissent au survol de l'avatar


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

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

      Code:
      <!-- BEGIN switch_plus_menu -->
      <script type="text/javascript">
          //<![CDATA[
          var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
         </script>
         <!-- END switch_plus_menu -->
         <script type="text/javascript">
        
         var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
         showHiddenMessage = function(id) {
             try {
                 var regId = parseInt(id, 10);
                 if( isNaN(regId) ) { regId = 0; }
        
                 if( regId > 0) {
                     $('.post--' + id).toggle(0, function() {
          if( $(this).is(":visible") ) {
          $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
          } else {
          $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
          }
          });
                 }
             } catch(e) { }
        
          return false;
         };
        
         //]]>
         </script>
         <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
         <div class="sub-header">
            <div class="sub-header-buttons">
          <!-- BEGIN switch_user_authpost -->
          <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="ion-edit button1">{L_POST_NEW_TOPIC}</a>
          <!-- END switch_user_authpost -->
          <!-- BEGIN switch_user_authreply -->
          <a href="{U_POST_REPLY_TOPIC}" class="ion-reply button1">{L_POST_REPLY_TOPIC}</a>
          <!-- END switch_user_authreply -->
          </div>
          
          <div class="sub-header-path">
          <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
          {NAV_CAT_DESC}
          </div>
         </div>
        
         <div class="topic-actions">
          <!-- BEGIN topicpagination -->
          <div class="pagination">
          {PAGINATION}
          </div>
          <!-- END topicpagination -->
        
         </div>
        
        
        
         {POLL_DISPLAY}
        
         <!-- BEGIN postrow -->
          <!-- BEGIN hidden -->
          <div class="post {postrow.hidden.ROW_COUNT}">
          <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
          </div>
          <!-- END hidden -->
          <!-- BEGIN displayed -->
          <div id="p{postrow.displayed.U_POST_ID}" class="postotal post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
                     <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
          
          <!-- DEBUT DE PROFIL -->
          <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
          <!-- div class="online2"></div-->

          <!-- PROFIL GAUCHE -->
          <div class="profiltotal">
            <!-- AVATAR DE LA PERSONNE -->
                   <div class="postprofile-avatar">
          {postrow.displayed.POSTER_AVATAR}
          </div>
            <!-- FIN AVATAR DE LA PERSONNE -->
            
            <!-- RANG DE LA PERSONNE -->
             <div class="postprofile-rank">
          {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
          </div>
            <!-- FIN RANG DE LA PERSONNE -->
            
            <!-- CHAMP PROFIL -->
             <div class="labelprofile"><!-- BEGIN profile_field -->
          {postrow.displayed.profile_field.LABEL}
          {postrow.displayed.profile_field.CONTENT}
          {postrow.displayed.profile_field.SEPARATOR}
          <!-- END profile_field -->
          {postrow.displayed.POSTER_RPG}</div>
         <!-- FIN CHAMP PROFIL -->

         <div class="iconsmess">
          {postrow.displayed.PROFILE_IMG}
          {postrow.displayed.PM_IMG}
         {postrow.displayed.EMAIL_IMG}
          <!-- BEGIN contact_field -->
          {postrow.displayed.contact_field.CONTENT}
                                                           <!-- END contact_field -->
           </div>
            </div>  
          </div>
          <!-- INFOS PROFIL AVANT MESSAGE -->
            <div class="infosprofil">
              <!-- TITRE SUJET -->
          <h1 class="page-title">
          <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
          </h1>
          <!-- FIN SUJET -->
              <div class="infosprofil-flex">
              <!-- PSEUDO -->
                 <div class="postprofile-name">
          {postrow.displayed.POSTER_NAME}
          </div><!-- FIN PSEUDO -->
              <!-- DATE -->
                 <div class="topic-date">
          {postrow.displayed.POST_DATE_NEW}
        
          <!-- BEGIN switch_vote_active -->
          <div class="vote">
          <!-- BEGIN switch_vote -->
          <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-plus-circled"></a>
          <!-- END switch_vote -->
        
          <!-- BEGIN switch_vote -->
          <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-minus-circled"></a>
          <!-- END switch_vote -->
        
          <!-- BEGIN switch_bar -->
          <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
          <div class="vote-bar-desc">
          {postrow.displayed.switch_vote_active.L_VOTE_TITLE}
          </div>
        
          <div class="vote-bars">
          <!-- BEGIN switch_vote_plus -->
          <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
          <!-- END switch_vote_plus -->
        
          <!-- BEGIN switch_vote_minus -->
          <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
          <!-- END switch_vote_minus -->
          </div>
          </div>
          <!-- END switch_bar -->
        
          <!-- BEGIN switch_no_bar -->
          <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
          <!-- END switch_no_bar -->
          </div>
          <!-- END switch_vote_active -->
          <!-- FIN DATE --> </div>
          <!-- FIN INFO FLEX -->  </div>
          <!-- FIN INFO PROFIL --> </div>

          <!-- MESSAGE -->
          <div class="postbody"><div class="post-head">
                      <!-- ICONS CITER EDITER ETC-->
                      <div class="buttonscontent"><ul class="profile-icons">
                          <li class="btn-thank">
                          <a href="{postrow.displayed.THANK_URL}">
                          <i class="ion-heart"></i>
                          </a>
                          </li>
                          <li class="btn-quote-multi">
                          <span onclick="{postrow.displayed.MULTIQUOTE_URL}" id="post_mq{TOPIC_ID}_{postrow.displayed.U_POST_ID}">
                          <i class="ion-quote"></i>
                          <i class="ion-ios-plus-empty"></i>
                          </span>
                          </li>
                          <li class="btn-quote">
                          <a href="{postrow.displayed.QUOTE_URL}">
                          <i class="ion-quote"></i>
                          </a>
                          </li>
                          <li class="btn-edit">
                          <a href="{postrow.displayed.EDIT_URL}">
                          <i class="ion-edit"></i>
                          </a>
                          </li>
                          <li class="btn-delete">
                          <a href="{postrow.displayed.DELETE_URL}">
                          <i class="ion-trash-a"></i>
                          </a>
                          </li>
                          <li class="btn-ip">
                          <a href="{postrow.displayed.IP_URL}">
                          <i class="ion-ios-information"></i>
                          </a>
                          </li>
                          <li class="btn-report">
                          {postrow.displayed.REPORT_IMG}
                          </li>
                          </ul>
                        
                                                   </div></div>
                  <div class="content">
                  <div>{postrow.displayed.MESSAGE}</div>
                  <!-- BEGIN switch_attachments -->
                  <dl class="attachbox">
                  <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                  <dd class="attachments">
                  <!-- BEGIN switch_post_attachments -->
                  <dl class="file">
                  <dt>
                  <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
                  </dt>
                  <dd>
                  <!-- BEGIN switch_dl_att -->
                  <span><a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}</span>
                  <!-- END switch_dl_att -->
                
                  <!-- BEGIN switch_no_dl_att -->
                  <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}</span>
                  <!-- END switch_no_dl_att -->
                
                  <!-- BEGIN switch_no_comment -->
                  <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</span>
                  <!-- END switch_no_comment -->
                
                  <!-- BEGIN switch_no_dl_att -->
                  <span><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></span>
                  <!-- END switch_no_dl_att -->
                
                  <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
                  </dd>
                  </dl>
                  <!-- END switch_post_attachments -->
                  </dd>
                  </dl>
                  <!-- END switch_attachments -->
                
                  <div class="edited-message">
                  {postrow.displayed.EDITED_MESSAGE}
                  </div>
                  <!-- BEGIN switch_signature -->
                  <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
                  <!-- END switch_signature -->
                  </div>
                

                  </div></div>
          <!-- BEGIN first_post_br -->
          <hr id="first-post-br" />
          <!-- END first_post_br -->
          <!-- END displayed -->
         <!-- END postrow -->
         </div>
         <a name="bottomtitle"></a>
        
         <div class="quick-nav-topics bottom">
             <!-- BEGIN switch_isconnect -->
          <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
             <!-- END switch_isconnect -->
             <a href="#top">{L_BACK_TO_TOP}</a>
             <!-- BEGIN switch_isconnect -->
          <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
             <!-- END switch_isconnect -->
         </div>
        
         <div class="topic-actions bottom">
          <!-- BEGIN topicpagination -->
          <div class="pagination">
          {PAGINATION}
          </div>
          <!-- END topicpagination -->
        
          <div class="topic-actions-buttons">
          <!-- BEGIN switch_user_logged_in -->
          <!-- BEGIN watchtopic -->
          {S_WATCH_TOPIC}
          <!-- END watchtopic -->
          <!-- END switch_user_logged_in -->
        
          <!-- BEGIN switch_user_authpost -->
          <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="ion-edit button1">{L_POST_NEW_TOPIC}</a>
          <!-- END switch_user_authpost -->
          <!-- BEGIN switch_user_authreply -->
          <a href="{U_POST_REPLY_TOPIC}" class="ion-reply button1">{L_POST_REPLY_TOPIC}</a>
          <!-- END switch_user_authreply -->
          </div>
         </div>
        
         <!-- BEGIN promot_trafic -->
          <div class="block" id="ptrafic_close" style="display: none;">
          <div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-plus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
          </div>
          <div class="block" id="ptrafic_open" style="display:'';">
          <div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-minus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
          <ul class="ptrafic">
          <!-- BEGIN link -->
          <li>
          <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">
          <i class="ion-ios-chatbubble-outline"></i>{promot_trafic.link.TITLE}
          </a>
          </li>
          <!-- END link -->
          </ul>
          </div>
         <!-- END promot_trafic -->
        
         <!-- BEGIN switch_forum_rules -->
         <div class="post row1" id="forum_rules">
          <div class="h3">{L_FORUM_RULES}</div>
          <div class="clear"></div>
          <table class="postbody">
          <tr>
          <!-- BEGIN switch_forum_rule_image -->
          <td class="logo">
          <img src="{RULE_IMG_URL}" alt="" />
          </td>
          <!-- END switch_forum_rule_image -->
          <td class="rules content">
          {RULE_MSG}
          </td>
          </tr>
          </table>
         </div>
         <!-- END switch_forum_rules -->

       <div class="sub-header">
            <div class="sub-header-buttons">
          <!-- BEGIN switch_user_authpost -->
          <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="ion-edit button1">{L_POST_NEW_TOPIC}</a>
          <!-- END switch_user_authpost -->
          <!-- BEGIN switch_user_authreply -->
          <a href="{U_POST_REPLY_TOPIC}" class="ion-reply button1">{L_POST_REPLY_TOPIC}</a>
          <!-- END switch_user_authreply -->
          </div>
          
          <div class="sub-header-path">
          <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
          {NAV_CAT_DESC}
          </div>
         </div>
        
         <div class="topic-actions">
          <!-- BEGIN topicpagination -->
          <div class="pagination">
          {PAGINATION}
          </div>
          <!-- END topicpagination -->
        
         </div>
        
         <!-- BEGIN switch_user_logged_in -->
          <a name="quickreply"></a>
          {QUICK_REPLY_FORM}
         <!-- END switch_user_logged_in -->
        
         <form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
          <fieldset class="jumpbox">
          <label>{L_JUMP_TO}:</label>
          {S_JUMPBOX_SELECT}
          <input class="button2" type="submit" value="{L_GO}" />
          </fieldset>
         </form>
        
         <!-- BEGIN viewtopic_bottom -->
         <form method="get" action="{S_FORM_MOD_ACTION}">
          <fieldset class="quickmod">
          <input type="hidden" name="t" value="{TOPIC_ID}" />
        
          <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
          <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
          <label>{L_MOD_TOOLS}:</label>
          {S_SELECT_MOD}
          <input class="button2" type="submit" value="{L_GO}" />
          </fieldset>
         </form>
        
         <p class="right">{S_TOPIC_ADMIN}</p>
         <!-- END viewtopic_bottom -->
        
         <!-- BEGIN show_permissions -->
          <div class="block">
          <div class="h3">{L_TABS_PERMISSIONS}</div>
          {S_AUTH_LIST}
          </div>
         <!-- END show_permissions -->
        
         <!-- BEGIN switch_image_resize -->
         <script type="text/javascript">
         //<![CDATA[
         $(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
         //]]>
         </script>
         <!-- END switch_image_resize -->
        


         <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
         <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
         <script>
         $(document).ready(function() {
          $('pre, code').each(function(i, block) {
          hljs.highlightBlock(block);
          });
        
          $('.post').each(function() {
          if (!$(this).find('.postprofile-avatar').html().length) {
          $(this).find('.postprofile-rank').css('border-bottom', 'none');
          $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
          }
          });
         });
         </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 et c'est tout :

      Code:
      /* PROFIL ET MESSAGE */

      /* Haut avant le message */

      .sub-header{ display:flex; align-items:center; }
      .sub-header-buttons{ float:none; width:34%;  }
      .sub-header-buttons a:before{ display:none;  }
      .sub-header-buttons a{ background:var(--fond1); padding:5px 10px;
         box-shadow:none; font-family:var(--font1); font-weight:bold;   }
      .sub-header-buttons a:hover{ box-shadow:none; background:var(--fond2);  }
      .sub-header-path{  width:69%;
         background:var(--fond2); color:var(--txt3); padding:5px; border-radius:5px; font-weight:bold;}
      .sub-header-path .nav{  color:var(--txt3); font-family:var(--font1); display:flex; align-items:center;}
      .sub-header-path .nav p{  line-height:12px; font-size:13px; }
      .sub-header-path .nav:hover{ color:var(--txt2); }


      .postotal{ font-family:var(--font1); background:none !important; display:flex; box-shadow:none; border:none; }
      .postotal .postprofile{ width:30%; }
      .postotal .postbody{ width:70%; margin-right:0;}

      .profiltotal{ position:relative; z-index:85; left:0px;}
      .profiltotal .postprofile-avatar img{ border-radius:0; border:none; box-shadow:none;
      width:200px; height:320px; object-fit:cover; }
      .profiltotal .postprofile-avatar{ width:220px; height:340px; padding:5px; padding-top:10px;
         border-radius:10px; border:1px solid var(--border1); margin:0 auto; }
      .profiltotal .postprofile-rank{ font-weight:bold; margin-top:10px; color:#E1BCBC; border:none;  }

      .profiltotal .labelprofile{ background:var(--fond6); color:var(--txt3); padding:10px;
      width:200px; height:320px; overflow:auto; position:absolute; top:11px; left:10px; font-size:11px;
      text-align:justify; transform:scale(0); transition:500ms;}
      .profiltotal:hover .labelprofile{ transform:scale(1); transition:500ms;  }
      .profiltotal .labelprofile .label span{ color:var(--txt2) !important; }
      .profiltotal .labelprofile img{ width:200px }
      .profiltotal .iconsmess{ display:flex; justify-content:center; }
      .profiltotal .iconsmess a{ margin:0 5px;}

      .postotal{ position:relative; font-family:var(--font1); }
      .postotal .infosprofil{ position:absolute; top:0; left:0; width:100%; padding:15px;
         background:var(--fond3); border-radius:20px; z-index:80;}
      .postotal .infosprofil h1.page-title{ margin-left:250px; font-family:var(--font1);
      font-weight:bold; font-size:20px;
         border:1px solid var(--txt2); border-radius:10px; padding:10px;}
      .postotal .infosprofil h1.page-title a{ color:var(--txt2);  }

      .postotal .infosprofil .infosprofil-flex{ position:relative; display:flex; margin-left:250px;
      margin-top:10px; justify-content:space-between; color:var(--txt1); align-items:center;  }

      .postotal .postbody{ margin-top:105px; position:relative; left:-3px; width:100%; }
      .postotal .postbody .post-head{ border:none; display:flex; margin:0; padding:10px 0;  }
      .postotal .postbody .post-head .buttonscontent li{ background:var(--fond3);  border-radius:5px;  }
      .postotal .postbody .post-head .buttonscontent li a{ color:var(--txt2); }

      .postotal .postbody .content{ border-radius:10px; text-align:justify;
         padding:20px; background:var(--fond2); color:var(--txt1); font-family:var(--font1); }

      /* BAS DU FORUM */

      .topic-actions.bottom, .topic-actions.bottom *{
         font-family:var(--font1); color:var(--txt1); font-style:normal; }
      .topic-actions.bottom .button1{ background:var(--fond2); }

      #ptrafic_open{ background:var(--fond2);
         font-style:normal; font-family:var(--font1); }
      .h3{ color:var(--txt1) !important; border-color:var(--border1); }
      #ptrafic_open a{ color:var(--txt1); }

      input[type="submit"], .button, .button1, .button2{ background:var(--fond2); font-family:var(--font1); }

      .block{ background:var(--fond2); color:var(--txt2); }
      .block a{ color:var(--txt1); }

    Revenir en haut

    Profil & Message

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

    Nos amis proches

    Profil & Message Parto512 Life Is Strange L'AnnuaireImage Mirror of MagicProfil & Message B-squareAinsi tomba ThédasDuralasCoeur de la force