Tout d'abord, rendez-vous dans votre template overall_header et rajoutez après la balise CSS au début du template :

Code:

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

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="sub-header">
 <div class="sub-header-info">
 <h1 class="pagetitle">
 <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
 </h1>
          <div class="nacseconde"><a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
 {NAV_CAT_DESC}</div>
 </div>

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

<div class="topic-actions">
 <!-- BEGIN topicpagination -->
 <div class="pagination">
 {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="postername">{postrow.displayed.POSTER_NAME}</div>
<div class="totalinterne">
  
  <div class="blokvava">
<div class="btnpost">
<a href="{postrow.displayed.QUOTE_URL}" title="citer le message"><span class="th th-quote-up"></span></a>
<a href="{postrow.displayed.EDIT_URL}" title="éditer le message"><span class="th th-edit"></span></a>
<a href="{postrow.displayed.DELETE_URL}" title="supprimer le message"><span class="th th-trash"></span></a>
<a href="{postrow.displayed.IP_URL}" title="ip de l'utilisateur"><span class="th th-location-4"></span></a></div>
    
    <div class="rankhere">{postrow.displayed.POSTER_RANK_NEW}</div>
    
    <div class="vavainterne">{postrow.displayed.POSTER_AVATAR}</div>
    <div class="crownpost"><img src="https://imgur.com/kf5kyag.png"/></div>
       <div class="proficontent"><!-- BEGIN profile_field -->
<div class="colum-1">{postrow.displayed.profile_field.LABEL}</div>
<div class="colum-2">{postrow.displayed.profile_field.CONTENT}</div>
<!-- END profile_field -->
    </div>
    
  </div>
  
  
  <div class="blokmessage">
  <!-- BEGIN switch_vote_active -->
 <div class="vote">
 <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-thumbsup"></a>
 <!-- END switch_vote -->

 <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-thumbsdown"></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 class="infopost"><a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> <span class="th th-chevron-right"></span> {postrow.displayed.POST_DATE_NEW}</div>
    
    
    <div class="postbodyy">
 <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>
  <!-- BEGIN switch_signature -->
  <div class="separationbl"></div>
<div class="signaturepost" 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="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 -->

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

.pagetitle {
    width: 930px;
    text-align: center;
    font: 55px Libre Caslon Display;
    text-transform: uppercase;
}
.nacseconde .underline {
  display:none;
}
.nacseconde {
    width: 100%;
    text-align: center;
    font: 11px calibri;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-flex;
    justify-content: center;
}
.nacseconde br {
  display:none;
}
.lesboutons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.btnrepnew {
    width: 49%;
    background: black;
    margin-right: 5px;
    padding: 5px;
    text-align: center;
}
.btnrepnew a {
    color: #ebebeb;
    font: 11px calibri;
    text-transform: uppercase;
    display: block;
}
.postername {
    font: 46px Libre Caslon Display;
    text-transform: uppercase;
    text-align: right;
    padding: 10px;
    letter-spacing: 1px;
    width: 950px;
}
.totalinterne {
    padding: 10px;
    background: #d5d5d5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 950px;
}
.blokvava {
    width: 260px;
}
.btnpost {
    height: 66px;
    width: 250px;
    text-align: center;
    padding-top: 10px;
}
.btnpost a {
    padding: 0px 5px 0px 5px;
}
.btnpost span {
    font-size: 25px;
    padding: 10px;
    background: black;
    color: #d5d5d5;
}
.vavainterne img {
    width: 250px;
    height: 450px;
    border: solid 5px black;
}
.rankhere {
    background-image: url(https://imgur.com/0hIXRS5.png);
    background-position: 50% 50%;
    width: 250px;
    margin-bottom: 10px;
    text-align: center;
    color: #ebebeb;
    padding: 5px;
    font: 12px Libre Caslon Display;
    text-transform: uppercase;
}
.blokmessage {
    width: 650px;
}
.separationbl {
    width: 700px;
    margin: 20px auto 0px auto;
    height: 1px;
    background: #9a3535;
}
.signaturepost {
    width: 100%;
    margin: -15px auto 10px auto;
}
.infopost {
    padding: 20px 0px 10px 18px;
    font: 11px calibri;
    text-transform: uppercase;
    color: #a7a7a7;
    text-align: right;
    border-bottom: solid 1px darkgrey;
    margin-left: 48px;
}
.infopost a {
    color: #b38c8c;
}
.infopost span {
    font-size: 8px;
    color: black;
}
.postbodyy {
    padding: 10px 10px 10px 20px;
    text-align: justify;
    font: 12px calibri;
}
.proficontent {
    width: 250px;
}
.proficontent img {
    width: 250px;
    border: solid 5px #a5a5a5;
    margin-top: 10px;
}
.crownpost {
    width: 250px;
    text-align: center;
}
.crownpost img {
    width: 100px;
}

• Ce code ne prévoit pas d'afficher les éléments clasiques de profil, il vous faudra donc tout désactiver pour les messages dans votre panneau de configuration.
• Vous pouvez ne laisser qu'une icône (visible sur le schéma) que vos membres pourront donc modifier quand ils le souhaient par leur propre profil.
• La largeur forum doit faire 950px minimum.