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

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

    <table width="100%" border="0" cellspacing="2" cellpadding="0">
     <tr>
              <div class="topmessage">
                <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="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>
     </tr>
    </table>

    <table class="forumline profileprofile" width="100%" border="0" cellspacing="1" cellpadding="0" >
     <tr>
     <div class="titremessage">        
              <span class="paginamess">{PAGINATION}</span>
            </div>
     </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} profiletotal"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
     <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>
       <span class="rankprofil">{postrow.displayed.POSTER_RANK}</span></div>
       <span class="postdetails poster-profile">
                                      <span class="vavaprofil"> {postrow.displayed.POSTER_AVATAR}</span>
     <span class="rankprofilimage">{postrow.displayed.RANK_IMAGE}</span>
     <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>
     </span><br />
                    
     </td>
     <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="100%">
     <div class="postdate"><span class="postdetails">
       <h1>{postrow.displayed.POST_SUBJECT}</h1>  
       <span class="pooostdate">{postrow.displayed.POST_DATE}</span></span></div>
                       <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>
     <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 -->
                                                                  <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 -->
                                        {postrow.displayed.ONLINE_IMG}</div>

                                                      </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 -->
     <tr align="right">
     <td class="titremessage" colspan="2" height="28">
    <a name="bottomtitle"></a><div class="cattitle">{TOPIC_TITLE}</div>

     </td>
     </tr>
    </table>
    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px; border:none !important;">
     <tr>
     <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
     <!-- BEGIN topicpagination -->
     <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
     <!-- END topicpagination -->
     </tr>
     <!-- BEGIN switch_user_logged_in -->
     <!-- BEGIN watchtopic -->
     <tr>
     <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
     </tr>
     <!-- END watchtopic -->
     <!-- END switch_user_logged_in -->
    </table>

    <!-- BEGIN promot_trafic -->
    <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px; border:none !important;">
     <tr>
     <td class="catBottom" height="28">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr>
     <td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
     <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
     </tr>
     </table>
     </td>
     </tr>
    </table>

    <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px; border:none !important;">
     <tr>
     <td class="catBottom" height="28">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr>
     <td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
     <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
     </tr>
     </table>
     </td>
     </tr>
     <tr>
     <td class="row2 postbody" valign="top">
     <!-- BEGIN link -->
     » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
     <!-- END link -->
     </td>
     </tr>
    </table>
    <!-- END promot_trafic -->

    <!-- BEGIN switch_forum_rules -->
    <table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px; border:none !important;">
     <tbody>
     <tr>
     <td class="catBottom">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tbody>
     <tr>
     <td valign="top">
     <div class="cattitle"> {L_FORUM_RULES}</div>
     </td>
     </tr>
     </tbody>
     </table>
     </td>
     </tr>
     <tr>
     <td class="row1 clearfix">
     <table>
     <tr>
     <!-- BEGIN switch_forum_rule_image -->
     <td class="logo">
     <img src="{RULE_IMG_URL}" alt="" />
     </td>
     <!-- END switch_forum_rule_image -->
     <td class="rules postbody">
     {RULE_MSG}
     </td>
     </tr>
     </table>
     </td>
     </tr>
     </tbody>
    </table>
    <!-- END switch_forum_rules -->

    <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>
     <td class="catBottom" colspan="2" height="28">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr>
     <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
     <!-- BEGIN show_permissions -->
     <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
     <!-- END show_permissions -->
     </tr>
     </table>
     </td>
     </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>
     <td class="catBottom" colspan="2" height="28">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr>
     <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
     <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
     </tr>
     </table>
     </td>
     </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 -->

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


    /************* PROFIL ET MESSAGE ***************/

    /* Fil d'ariane */

    .navmessage .nav .nav, .catBottom .nav .nav{ font-size:15px; letter-spacing:1px; font-family:var(--font-title); font-weight:100; color:var(--black);  }

    /* Profil de gauche */

    .profileprofile .row1, .profileprofile .row2{ background:none !important; }
    .profileprofile{ background:none; width:100%; }
    .profileprofile .profiletotal{ margin-bottom:80px; background:var(--fond-deg) !important; padding:10px !important; height:850px !important; display:block; width:100%; position:relative; }
    .profiletotal:after{ content:' '; width:100%; height:230px; background:var(--fond-img); z-index:2; position:absolute; left:0; bottom:-70px; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);}

    /* PSEUDO */

    .profiletotal .pseudorankprofil{ text-align:center; margin:10px 0 20px 0; background:var(--light); padding:5px; }
    .profiletotal .pseudodo{ display:block; }
    .profiletotal .pseudodo a{ font-size:18px; text-align:center; display:block; font-family:var(--font-title);  }
    .profiletotal .rankprofil{ font-size:12px; }

    .profiletotal .vavaprofil{ width:200px; height:320px; }
    .profiletotal .rankprofilimage{ margin:10px 0; display:block; }
    .profiletotal .labelprofile{ background:var(--light); padding:5px; font-size:12px; line-height:1.2em; height:340px; overflow:auto; position:relative; z-index:10;  width:200px; text-align:justify; }
    .profiletotal .labelprofile .label{ margin-top:10px; display:block; word-wrap: font-family:var(--font-title); font-size:12px; letter-spacing:1px; font-weight:800; white-space:none !important;}

    .postdetails.poster-profile span.label{ white-space:normal !important; }
    /* Profil de droite */

    /* Titre */

    .post .row1{ padding:0; }
    .postdate{ background:var(--fond-img); padding:5px 10px; }
    .postdetails{ }
    .postdate h1{ font-size:18px; color:var(--white); text-shadow:var(--text-shadow); font-family:var(--font-title); letter-spacing:1px; }
    .postdate .pooostdate{ margin-top:-10px; display:block; color:var(--white); margin-bottom:10px; }

    .modifmess img, .iconsmess img, .leftmessage img{     filter: brightness(2.5); }
    /* Message */

    .postbody { font-size: 12px;line-height: 1.2em; background:#2a2a2a;
    padding: 30px; text-align: justify; }
    .postbody .iconsmess{ margin-top:30px;     }

    /* TITRE DU BAS */

    .titremessage .cattitle{ font-weight: 700;
        font-size: 15px;
        letter-spacing: 1px;
        color: #647076;
      font-family: var(--font-title); }

Revenir en haut

Nos amis proches

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