Remplacez l'intégralité de votre template viewtopic_body par le HTML :

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };

$(function(){
    if(typeof(_atc) == "undefined") {
        _atc = {  };
    }
});

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="total_topic">
<div class="total_title_sujet"><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></div>
<div class="sousnav"><a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>{NAV_CAT_DESC}</div>
</div>

<div class="bts_topic">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow">{L_POST_NEW_TOPIC}</a>
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}">{L_POST_REPLY_TOPIC}</a>
 <!-- END switch_user_authreply -->
</div>

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

 <div class="topic-actions-buttons">
 <!-- BEGIN switch_twitter_btn -->
 <span>
 <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
 </span>
 <!-- END switch_twitter_btn -->

 <!-- BEGIN switch_fb_likebtn -->
 <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
 <!-- END switch_fb_likebtn -->

 <a class="addthis_button">{L_SHARE}</a>
 <!-- BEGIN switch_plus_menu -->
 <script type="text/javascript">//<![CDATA[
 var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
 var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
 var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
 var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
 var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
 insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
 //]]>
 </script>
 <!-- END switch_plus_menu -->
 </div>
</div>

<div class="quick-nav-topics">
    <!-- BEGIN switch_isconnect -->
 <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
    <!-- END switch_isconnect -->
    <a href="#bottom">{L_GOTO_DOWN}</a>
    <!-- BEGIN switch_isconnect -->
 <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
    <!-- END switch_isconnect -->
</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 -->
<a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>

<div class="rankimg">{postrow.displayed.RANK_IMAGE}
  <div class="poster_name">{postrow.displayed.POSTER_NAME}</div></div>
<div class="fond_poste_epicode">
  
  <div class="blok1">
 <div class="postbody_epi">
  
  
  <div class="posttruc">
  <div class="info_new_post"><a href="{postrow.displayed.POST_URL}"># {postrow.displayed.POST_SUBJECT}</a> - {postrow.displayed.POST_DATE_NEW}</div>
  <div class="boutons_post"><a href="{postrow.displayed.EDIT_URL}"><span class="th th-edit"></span></a>
<a href="{postrow.displayed.DELETE_URL}"><span class="th th-trash"></span></a>
<a href="{postrow.displayed.QUOTE_URL}"><span class="th th-quote-up"></span></a>
<a href="{postrow.displayed.IP_URL}"><span class="th th-location-4"></span></a></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>

</div></div>


<div class="blok2">
  <div class="avatar_poster">{postrow.displayed.POSTER_AVATAR}</div>
  <div class="rang_membre">{postrow.displayed.POSTER_RANK_NEW}</div>
  <div class="info_profil_poster"><!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL}
{postrow.displayed.profile_field.CONTENT}
    {postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field --></div>
  </div>
  
  <div class="separation_truc"><img src="https://i.imgur.com/LfkZOPG.png"/></div>
  <!-- BEGIN switch_signature -->
<div class="signa" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
<!-- END switch_signature -->

</div>


 <!-- BEGIN first_post_br -->
 <hr id="first-post-br" />
 <!-- END first_post_br -->
 <!-- END displayed -->
<!-- END postrow -->

<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_page_bas">
 {PAGINATION}
 </div>
 <!-- END topicpagination -->


  <div class="surveiller_sujet"><!-- BEGIN switch_user_logged_in -->
 <!-- BEGIN watchtopic -->
 {S_WATCH_TOPIC}
 <!-- END watchtopic -->
 <!-- END switch_user_logged_in --></div>
<div class="bts_topic">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow">{L_POST_NEW_TOPIC}</a>
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}">{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 -->

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
<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>

Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :

Code:

@font-face {
font-family: "dontlook";
src: url("http://files.jcink.net/uploads/mortalsmonsters/Fonts/Gloss_And_Bloom.ttf");}
.total_topic {
    width: 100%;
    text-align: center;
    background-image: url(https://i.imgur.com/QnxQARM.png);
    background-size: 100%;
    border-radius: 30px 30px 0px 0px;
    padding: 15px;
}
.total_title_sujet a {
    color: #3a3a3a;
    font: 20px dontlook;
    font-style: italic;
}
.sousnav {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}
.sousnav a {
    font: 10px calibri;
    text-shadow: 1px 1px 0px #77682c;
    text-transform: uppercase;
    color: #cdb65c;
}
.bts_topic {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2px;
    text-align: center;
}
.bts_topic a {
    background: #cdb65c;
    width: 49%;
    margin: 0px 5px 0px 0px;
    outline: 1px solid #9e8b3e;
    outline-offset: -4px;
    padding: 4px;
    box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #e8e8e8;
    color: #1e1e1e;
    font: 11px calibri;
    text-transform: uppercase;
}
.surveiller_sujet {
    width: 98%;
    text-align: center;
    box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.8);
    outline: 1px solid #cdb65c;
    outline-offset: -4px;
    padding: 6px;
    margin: 0px auto 10px 7px;
}
.surveiller_sujet a {
    color: #cdb65c;
    font: 11px calibri;
    text-transform: uppercase;
}
.pagination_page_bas {
    background-image: url(https://i.imgur.com/N2Ehhj9.png);
    padding: 5px;
    color: #e8e8e8;
    font: 10px calibri;
    text-transform: uppercase;
    text-align: right;
    margin-bottom: 10px;
}
.pagination_page_bas a {
    color: #cdb65c;
}
.pagination_page {
    background-image: url(https://i.imgur.com/N2Ehhj9.png);
    padding: 5px;
    color: #e8e8e8;
    font: 10px calibri;
    text-transform: uppercase;
}
.pagination_page a {
    color: #cdb65c;
}
.fond_poste_epicode {
    background: #d6d6d6;
    padding: 10px;
    margin: 10px 0px 30px 0px;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.blok1 {
    width: 696px;
    padding: 10px;
}
.blok2 {
    width: 212px;
    text-align: center;
}
.rankimg {
    width: 100%;
    height: 110px;
    overflow: hidden;
}
.rankimg img {
    opacity: 0.8;
    margin-top: -229px;
}
.rankimg:before {
    content: "\ec0a";
    font-family: 'honeybee';
    color: #cdb65c;
    font-size: 150px;
    position: relative;
    top: -60px;
}
.poster_name {
    width: 80%;
    padding: 10px 10px 0px 10px;
    text-align: right;
    font: 20px dontlook;
    position: relative;
    z-index: 9;
    top: -385px;
    margin: 0 auto;
    border-bottom: solid 1px #e8e8e8;
}
.poster_name span strong {
  color:#e8e8e8 !important;
}
.avatar_poster {
    width: 210px;
    height: 410px;
    overflow: hidden;
    border: 5px solid #bfbfbf;
    background-image: url(https://i.imgur.com/ofzNont.png);
    background-size: 100%;
}
.avatar_poster img {
    width: 200px;
    height: 400px;
}
.info_profil_poster {
    text-align: justify;
    color: #2d2d2d;
    font: 10px calibri;
    text-transform: uppercase;
    width: 200px;
    margin: 0 auto;
}
.info_profil_poster img {
  width:30px;
}
.info_profil_poster .label {
    border-bottom: 2px solid #cdb65c;
}
.posttruc {
    display: flex;
    flex-wrap: wrap;
    border-bottom: solid 1px #bfbfbf;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.info_new_post {
    color: #1d1d1d !important;
    font: 9px calibri !important;
    text-transform: uppercase;
    width: 35%;
}
.info_new_post a {
   color: #080709;
  font-style:italic;
}
.boutons_post {
    text-align: right;
    width: 64%;
    margin-top: -10px;
}
.boutons_post span {
    font-size: 20px;
    margin: 5px;
    color: #cdb65c;
  transition:all 800ms;
}
.boutons_post span:hover {
  color:#1c1c1c;
  transition:all 800ms;
}
.rang_membre {
    background: #cdb65c;
    margin: 0px 0px 5px 0px;
    outline: 1px solid #9e8b3e;
    outline-offset: -3px;
    padding: 4px;
    width: 210px;
    box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
    color: #1e1e1e;
    font: 11px calibri;
    text-transform: uppercase;
}
.separation_truc {
    height: 46px;
    width: 100%;
    text-align: center;
    margin-bottom: -22px;
}
.signa {
    width: 100%;
    margin: 23px auto;
    max-height: 308px;
    overflow: auto;
    padding: 0px 10px 0px 10px;
}
.signa img {
    max-width: 100%;
}

Pour afficher l'icône à gauche du nom du membre, ajouter dans votre template overall_header après la balise CSS cette ligne :

Code:

<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"/>

• Attention ! L'affichage du nom du membre ne fonctionne que si vous rajoutez une image de rang. Il est donc conseillé de rajouter un rang de base à toute personne qui s'inscrit sur votre plateforme. Vous pouvez mettre cette image de base, customisable bien sûr par vos soins :

Code:

https://i.imgur.com/sH0YNMM.png