Le Deal du moment :
Mannesmann – Set de tournevis – 18 ...
Voir le deal
13.02 €

KoalaVolant
KoalaVolant


TYPE : PHPBB2



HTML



Remplacer tout ce qu'il y a dans viewtopic_body ici :

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">       
 <h1 class="cattitle"> {TOPIC_TITLE}</h1>
          <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">
 <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><br />
 <span class="postdetails poster-profile">
                                  <span class="vavaprofil"> {postrow.displayed.POSTER_AVATAR}</span>
 <span class="rankprofil">{postrow.displayed.POSTER_RANK}<br />
                                  {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>
                                  <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>
 </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">
                                        {L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}    |
                                        {postrow.displayed.POST_DATE}</span></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>
                <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>

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

CSS



Les couleurs marchent par les root. Voici donc le code à mettre avant, si vous n'avez pris aucun des codes déjà présents sur ce thème :

Code:
:root{ --main-color:#A3171A;
  --snd-color:#970000;
  --main-color-v:url('https://i.servimg.com/u/f30/19/45/51/53/fondbi10.jpg');
  --white:#fff;
  --black:#444;
  --grisc:#dedede;
  --griscc:#f0f0f0;
 
  --font1:'Anton', sans-serif;
--font2:'Kaushan Script', cursive;;
--font3:'Lato', sans-serif;}

  /* Ascenseur */
 
  ::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
::-webkit-scrollbar-thumb {background:var(--main-color); height:30px; border-radius:30px;}
::-webkit-scrollbar-corner {background:none;}
.cate-descr span, .redpres *{    scrollbar-color: var(--main-color) var(--white);
  scrollbar-width: thin; }

Puis le reste :

Code:
/****** SUJET ET MESSAGE PAR KOALAVOLANT ***/

.bodylinewidth{ width:800px; }
.bodyline{ border:none; }
.profileprofile, .profileprofile *{ box-sizing:border-box; }
.profileprofile td.row1, .profileprofile td.row3.over:hover, .profileprofile td.row1.over:hover, .profileprofile td.row2 {    background-color: transparent; }

/* Haut du sujet et message */

.topmessage{ display: flex; justify-content: space-between; }
.navmessage .nav {    font-size: 17px; font-family:var(--font2); color:var(--main-color-v); }

/* Titre */

.titremessage {    text-align: center;    padding: 10px; margin-top:10px; background-color:var(--white); }
h1.cattitle, .cattitle {    display: block;    font-size: 20px;    color: var(--main-color);    padding: 0;    font-family: var(--font2); }
.paginamess{ font-size: 12px;    margin-top: 5px;  display: block; }
/* Profil */
.profileprofile{ background: transparent; border:none; }
.profiletotal{    height: auto !important; width:220px; position:relative; margin-top:2px; }
.profiletotal *{ box-sizing:border-box; }
  .profiletotal, .modifmess{ background:var(--main-color-v); background-position:center; background-size:cover;clip-path: polygon(0 0, 100% 0%, 100% 86%, 50% 100%, 0 86%);
  display:flex; flex-wrap:wrap; position:relative; }
  .profiletotal:after, .modifmess:after{ position: absolute; content: ''; z-index:7;display: block; top: 0; left: 0; height: 100%; width: 100%;  background: var(--main-color); 
    mix-blend-mode: hard-light; }
.profiletotal *{ position:relative; z-index:99; }

/* Pseudo & Rang */

.pseudoprofil .pseudodo a, .rankprofil{ display:block; padding:5px; margin:10px; background-color:var(--white); width:194px; font-size:18px; line-height:20px;
  text-align:center; font-family:var(--font1); }
.rankprofil{ font-size:15px; }
.vavaprofil img{ width:200px; height:320px; object-fit:cover; margin:0 auto;  display:block; border:3px solid var(--white); }
.profiletotal .labelprofile{ background-color: var(--white);    width: 200px;  height: 320px; display:block; position:absolute;    top: 0px;
    left: 50%;  padding: 15px; -webkit-transform: scale(0)  translateX(-50%); transform: scale(0)  translateX(-50%); transition:800ms; overflow:auto; }
.profiletotal:hover .labelprofile{ -webkit-transform: scale(1) translateX(-50%);transform: scale(1) translateX(-50%); }

/* Icons */

.iconsmess{    margin-bottom:30px;  padding: 20px; display: flex;    justify-content: center;    flex-wrap: wrap;}
.iconsmess a{ display:block; margin:3px; }
.iconsmess img{ width:35px; height:35px; object-fit:cover; }

/* Message */

.postbody{ display:flex; justify-content:space-between; flex-wrap:wrap; }
.contentmess{ width:84%; min-height:463px; background-color:var(--white); padding:20px; color:var(--black); text-align:justify; font-size:13px; margin: 7px 7px 7px 2px;}
.modifmess{ width:14%; margin-top:6px; height:200px; display:block; }
.modifmess *{ position:relative; z-index:999; }
.modifmess a{ display:flex; justify-content:center; margin:10px 0px;    color: var(--white);    text-decoration: none;    text-transform: uppercase;
    font-family: var(--font1);    font-size: 18px;}
.modifmess img{ width:89%; height:20px; object-fit:cover; }

/* Date */
.postdate .postdetails{ background-color: var(--white);    display: block;    padding: 15px;    font-family: var(--font3);    font-size: 14px;    color: var(--main-color); }
KoalaVolant
KoalaVolant


TYPE : ModernBB



HTML



Remplacer tout ce qu'il y a dans viewtopic_body ici :

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>

<div class="sub-header">
 <div class="sub-header-info">
 <div class="sub-header-path">
 <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
 {NAV_CAT_DESC}
 </div>
 </div>

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

<div class="topic-actions">
 <!-- BEGIN topicpagination -->
 <div class="pagination">
 {PAGINATION}
 </div>
 <!-- END topicpagination -->

 <h1 class="page-title">
 <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
 </h1>

</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>
 
 <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
 <!-- div class="online2"></div-->
 <div class="profiltotal"> <div class="postprofile-name">
 {postrow.displayed.POSTER_NAME}
 </div>
                          <div class="postprofile-avatar">
 {postrow.displayed.POSTER_AVATAR}
 </div>
 
 <div class="postprofile-rank">
 {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
 </div>

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


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

 <div class="postbody"><div class="post-head">
 
 <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
 <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 -->
 </div>
 </div>
 <div class="postflex">
                                  <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 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>
 <!-- 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 -->

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

CSS



Les couleurs marchent par les root. Voici donc le code à mettre avant, si vous n'avez pris aucun des codes déjà présents sur ce thème :

Code:
:root{ --main-color:#A3171A;
  --snd-color:#970000;
  --main-color-v:url('https://i.servimg.com/u/f30/19/45/51/53/fondbi10.jpg');
  --white:#fff;
  --black:#444;
  --grisc:#dedede;
  --griscc:#f0f0f0;
 
  --groupe1:#3F00A7;
  --groupe2:#A5005C;
  --groupe3:#097B0A;
  --groupe4:#FF7800;
  --groupe5:#3094CF;
  --groupe6:#97649B;
 
  --font1:'Anton', sans-serif;
--font2:'Kaushan Script', cursive;;
--font3:'Lato', sans-serif;}

  /* Ascenseur */
 
  ::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
::-webkit-scrollbar-thumb {background:var(--main-color); height:30px; border-radius:30px;}
::-webkit-scrollbar-corner {background:none;}
.cate-descr span, .redpres *{    scrollbar-color: var(--main-color) var(--white);
  scrollbar-width: thin; }

Puis le reste :

Code:
/****** SUJET ET MESSAGE PAR KOALAVOLANT ***/

#main-content{ width:800px; }
.button, .button1, .button2, input[type="submit"]{ background-color:var(--main-color); font-family:var(--font3); }
.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover{ background-color:var(--black); }
.online:before{ display:none; }

/* Haut du sujet */

.sub-header{    display: flex;    justify-content: center;    align-items: center;    margin-top: 10px; }
.sub-header-info{ margin-right:10px; }
.sub-header-path, .sub-header-path a{    font-size: 17px;  font-weight:bold;  font-family: var(--font2);  color: var(--main-color-v); }
h1.page-title{    text-align: center;    padding: 10px;    margin-top: 10px;  background-color: var(--white); }
h1.page-title a{    display: block;    font-size: 23px;    color: var(--main-color);    padding: 0;  font-family: var(--font2); }

/* Display flex */

.postotal{ display:flex; justify-content:space-between; flex-wrap:wrap; background: none;border: none;box-shadow: none;margin: 0px; padding: 0px;}
.postbody{ width:568px; margin-right:0px; margin-left:20px; }
.postflex{ display:flex; justify-content:space-between; }

/* Profil */

.profiltotal{  padding: 5px 0px 5px 0px;  height: auto !important; width:220px; position:relative; margin-top:2px; }
.profiltotal *{ box-sizing:border-box; }
 .profiltotal, .buttonscontent{ background:var(--main-color-v); background-position:center; background-size:cover;clip-path: polygon(0% 0%, 100% 0%, 100% 86%, 50% 100%, 0% 86%);
 position:relative; }
 .profiltotal:after, .buttonscontent:after{ position: absolute; content: ''; z-index:7;display: block; top: 0; left: 0; height: 100%; width: 100%;  background: var(--main-color); 
  mix-blend-mode: hard-light; }
.profiltotal *{ position:relative; z-index:99; }

/* Pseudo & Rang */

.postprofile-name, .postprofile-rank{ display:block; padding:5px; margin:10px; background-color:var(--white); width:200px; font-size:18px; line-height:20px;
 text-align:center; font-family:var(--font1); }
.postprofile-rank{ font-size:15px; }
.postprofile-avatar img{ width:200px; height:320px; object-fit:cover; margin:0 auto; border-radius:0px; display:block; border:3px solid var(--white); }
.profiltotal .labelprofile{ background-color: var(--white);    width: 200px;  height: 320px; display:block; position:absolute;    top: 55px;
  left: 50%;  padding: 15px; -webkit-transform: scale(0)  translateX(-50%); transform: scale(0)  translateX(-50%); transition:800ms; overflow:auto; }
.profiltotal:hover .labelprofile{ -webkit-transform: scale(1) translateX(-50%);transform: scale(1) translateX(-50%); }

/* Icons */

.iconsmess{    margin-bottom:30px;  padding: 20px; display: flex;    justify-content: center;    flex-wrap: wrap;}
.iconsmess a{ display:block; margin:3px; }
.iconsmess img{ width:35px; height:35px; object-fit:cover; }

/* Date */

.post-head{ background-color: var(--white); margin-bottom:10px; border-bottom:none; display: block;    padding: 15px;    font-family: var(--font3);    font-size: 14px;    color: var(--main-color); }

/* Message */

.postbody .content{ background-color:var(--white); padding:20px; color:var(--black); font-family:var(--font3); text-align:justify; width:500px;}

/* Boutons */

.buttonscontent{ width:14%; margin-left:10px; height:200px; display:block; }
.buttonscontent *{ position:relative; z-index:999; }
.buttonscontent li{ border:none; }
.buttonscontent a, .buttonscontent li, .buttonscontent span{ display:flex; justify-content:center; margin:2px auto;    color: var(--white);    text-decoration: none;    text-transform: uppercase;
  font-family: var(--font1);    font-size: 18px; border:none; box-shadow:none; display:flex; justify-content:center; width:100%;}
Revenir en haut

Partenaires footer

Masqué RPG-Chevalier Altered Tokyo Les mythes d'YsarillRealm EnchantedAbstract Logo WyvArtem