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 : -39%
Ordinateur portable ASUS Chromebook Vibe CX34 Flip
Voir le deal
399 €

Profil & Message

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 :
- Crédits : KoalaVolant (codage) & Andrea (maquette & couleurs)
- 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, 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:
      /* COLORS */

      :root{
     
      --font1:'Encode Sans', sans-serif;
      --font2:'Fjalla One', sans-serif;
     
      --fond:#1c1c1c;
      --fond2:#666464;
      --fond3:#2c2c2c;
      --text: #959494;
      --text2:#848484;
      --black:#000;
        --colorp:#9860b1;
      --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;
      }

  3. Attention, les polices d'écriture utilisées sur ce thème sont "Encode Sans" et "Fjalla One" 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:
       <link href="https://fonts.googleapis.com/css2?family=Encode+Sans:wght@300;400;600;700;800;900&family=Fjalla+One&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. Allez dans Panneau d'administration > Affichage > Templates > viewtopic_body (Affichage d'un sujet)

  2. Remplacez son contenu par :
    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>

    <table width="100%" border="0" cellspacing="2" cellpadding="0">
     <tr>
              <div class="topmessage">
                                <h1>{TOPIC_TITLE}</h1>
                <div class="leftmessage">
     <span class="nav">
     <!-- BEGIN switch_user_authpost -->
     <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
     <!-- END switch_user_authpost -->
     <!-- BEGIN switch_user_authreply -->
     <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
     <!-- END switch_user_authreply -->
     </span>
                </div>
                <div class="messageflexpagina">
                <div class="navmessage">
     <span class="nav">
                    <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                    <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                    {NAV_CAT_DESC_SECOND}
                </span>
                </div>
                  <div class="titremessage">     
              <span class="paginamess">{PAGINATION}</span>
                  </div>
                </div>
              </div>
     </tr>
    </table>

    <table class="forumline profileprofile" width="100%" border="0" cellspacing="1" cellpadding="0" >
     <tr>
     </tr>
     {POLL_DISPLAY}
     <!-- BEGIN postrow -->
     <!-- BEGIN hidden -->
     <tr>
     <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
     </tr>
     <!-- END hidden -->
     <!-- BEGIN displayed -->
     <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
     <td class="{postrow.displayed.ROW_CLASS} profiltotel1"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
     <div class="profiletotal"><div class="pseudorankprofil">
      <span class="name pseudoprofil">
        <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
        <strong class="pseudodo">{postrow.displayed.POSTER_NAME}</strong>
      </span>
      <!-- Fin de pseudo rank profil -->
    </div>
      <span class="postdetails poster-profile">
        <!-- AVATAR -->
                                      <span class="vavaprofil"> {postrow.displayed.POSTER_AVATAR}</span>
        <!-- RANG -->
            <span class="rankprofil">{postrow.displayed.POSTER_RANK}
              <span class="rankprofilimage">{postrow.displayed.RANK_IMAGE}</span></span>
              <!-- CHAMPS PROFIL -->
     <div class="labelprofile"><!-- BEGIN profile_field --></span>
     {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
     <!-- END profile_field -->
                                      {postrow.displayed.POSTER_RPG}</div>
        <!-- EN LIGNE -->
    <div class="iconsmess">{postrow.displayed.ONLINE_IMG}</div>
      </span><br /></div>
      <div class="survforum">{S_WATCH_TOPIC}</div>
     </td>
     <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="100%">
      <!-- TITRE ET DATE / HAUT DU SUJET -->
     <div class="postdate">
      <!-- TITRE ET DATE -->
      <div class="postinfos">
      <span class="titlesubject">{postrow.displayed.POST_SUBJECT}</span>
      <span class="pooostdate">{postrow.displayed.POST_DATE}</span>
      </div>
      <!-- EDITER CITER ETC -->
          <div class="modifmess">{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG}
        {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}</div>
        </div>
      <!-- FIN HAUT DU SUJET -->
      </div>
     <div class="postbody">

                              <div class="contentmess">{postrow.displayed.MESSAGE}
                                <!-- <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span> -->
                                <!-- BEGIN switch_signature -->
     <div class="signmess">
     {postrow.displayed.SIGNATURE}
     </div>
     <!-- END switch_signature -->
                                <!-- FIN MESSAGE -->
    </div>
      <!-- BAS DU SUJET -->
      <div class="bassujet">
        <!-- FIL D'ARIANE -->
        <span class="nav">
                    <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                    <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                    {NAV_CAT_DESC_SECOND}
                </span>
        <!-- PAGINATION -->
                  <div class="titremessage">     
              <span class="paginamess">{PAGINATION}</span>
      </div>
        <!-- FIN DU BAS DU SUJET -->
      </div>

     </td>
     </tr>


     <!-- BEGIN first_post_br -->
    </table>
    <hr />
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
     <tr>
     <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
     <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
     </tr>
     <!-- END first_post_br -->
     <!-- END displayed -->
     <!-- END postrow -->
     <!-- BEGIN no_post -->
     <tr align="center">
     <td class="row1" colspan="2" height="28">
     <span class="genmed">{no_post.L_NO_POST}</span>
     </td>
     </tr>
     <!-- END no_post -->
    </table>


    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="border:none !important;">
     <tr>
     <td class="row2" colspan="2" align="center" style="padding:0px">
     <!-- BEGIN switch_user_logged_in -->
     <a name="quickreply"></a>
     {QUICK_REPLY_FORM}<br />
     <!-- END switch_user_logged_in -->
     </td>
     </tr>
     <tr>
     <td style="margin:0; padding: 0;" colspan="2">
     <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
     <tbody>
     <!-- BEGIN show_permissions -->
     <tr>
     <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
     <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
     </tr>
     <!-- END show_permissions -->
     <tr>
     </tr>
     </tbody>
     </table>
     </td>
     </tr>
     <tr>
     <td style="margin:0; padding: 0;" colspan="2">
     <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
     <tbody>
     <tr>
     </tr>
     </tbody>
     </table>
     </td>
     </tr>
    </table>

    <form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
    <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
     <tr>
     <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
     <span class="nav">
     <!-- BEGIN switch_user_authpost -->
     <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
     <!-- END switch_user_authpost -->
     <!-- BEGIN switch_user_authreply -->
     <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
     <!-- END switch_user_authreply -->
     </span>
     </td>

     <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

     <!-- BEGIN moderation_panel -->
     <td align="center">
     <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
     </td>
     <td align="center" width="250">
     <span class="gensmall"> </span>
     </td>
     <!-- END moderation_panel -->
     </tr>
    </table>
    </form>

    <!-- BEGIN viewtopic_bottom -->
    <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
     <tr>
     <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
     <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
     <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}" />

     <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
     </form>
     </td>
     </tr>
    </table>
    <!-- END viewtopic_bottom -->

    <!-- BEGIN switch_image_resize -->
    <script type="text/javascript">
    //<![CDATA[
    $(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
    //]]>
    </script>
    <!-- END switch_image_resize -->



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

  2. Ajoutez y le code du profil / message
    Code:
    /* PROFIL ET MESSAGE */

    .topmessage{ margin-bottom:5px; }
    .topmessage h1{ width:99%; color:var(--text); font-size:18px; padding:5px; font-weight:normal; text-align:center; background:var(--fond); font-family:var(--font1);  }

    .leftmessage{ width:100%; }
    .leftmessage a{ display:inline-block; margin:0 3px; }

    .messageflexpagina{ display:flex; justify-content:space-between; margin-top:10px; }
    .messageflexpagina span, .messageflexpagina a{ color:var(--text); font-size:16px; font-family:var(--font2); }

    .profileprofile, .profileprofile *{ box-sizing:border-box; }
    .profileprofile{ background:none; border:none; position:relative; }
    .profileprofile .row1, .profileprofile .row2{ background:none; }

    /* TITRE ETC */

    .profileprofile .postdate{ position:absolute; background:var(--fond); width:100%; left:0; z-index:1; padding:15px; padding-left:250px; color:var(--text); display:flex; justify-content:space-between; align-items:center;  }
    .profileprofile .post{ margin-bottom:50px; display:block; }

    /* Titre et date */
    .profileprofile .postdate .postinfos span{ display:block; font-family:var(--font1); }
    .profileprofile .postdate .postinfos .pooostdate{ font-size:10px; }

    .modifmess a{ display:block; }

    /* PROFIL */

    .profileprofile .profiltotel1{ position:relative; margin-top:45px; z-index:5; left:10px; top:20px; }
    .profileprofile .profiletotal{ background:var(--fond2); padding:10px; }

    /* Pseudo */

    .pseudodo{background:var(--fond); border:2px solid var(--black); display:block; padding:3px; font-size:15px; text-align:center; font-family:var(--font1);  }

    /* Avatar */

    .vavaprofil{ margin:10px 0; display:block; width:200px; height:320px; }
    .vavaprofil img{ width:200px; height:320px; max-height:320px !important; object-fit:cover; }

    /* Rank */

    .rankprofil{ background:var(--fond); border:2px solid var(--black); display:block; padding:3px; font-size:15px; text-align:center; font-family:var(--font1); color:var(--text); }

    /* Label */

    .labelprofile{ text-align:justify; height:400px; overflow:auto; padding:10px; background:var(--fond); border:2px solid var(--black); margin-top:10px; color:var(--text); }
    .labelprofile .gen{ color:var(--text); }
    .labelprofile textarea{ background:var(--fond2); color:#c6c6c6; }

    /* En ligne */
    .iconsmess{ position:relative; bottom:-20px; display:flex; justify-content:center; width:100%; }

    /* Surveiller sujet */

    .survforum a{ display:block; margin-top:10px; background:var(--degrade); padding:5px; text-decoration:none; font-family:var(--font1); text-align:center; font-size:17px; color:var(--text); transition:500ms; }
    .survforum a:hover{ text-decoration:none !important; color:#bebebe; transition:500ms;}

    /* Contenu message */

    .postbody{ text-align:justify; font-size:13px; line-height:1.5em; width:94%; margin:0 auto; margin-top:125px; padding-left:10px; }
    .postbody .contentmess{ min-height:770px;  }

    /* Bas du sujet */

    .bassujet{ display:flex; justify-content:space-between; border-top:1px solid var(--fond); padding-top:10px; color:var(--text); font-family:var(--font2);}
    .bassujet .nav{ color:var(--text); }
    .bassujet a{ color:var(--text);  font-size:15px; }
Revenir en haut

Profil & Message

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

Nos amis proches

Profil & Message Parto512 Logo WyvArtem