Image de rang sous avatar

[Argimpasa]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 02/04/2023
Lien du forum : https://royalemasquerade.forumactif.com

Description du problème

Bonjour,

Je voudrais mettre sous mon avatar une image de rang. Malheureusement, cela ne s'affiche pas comme je le voudrais. L'image apparaît dans la fiche personnage mais c'est tout.
Je voudrais, si possible, que l'image soit placée sous l'avatar dans les messages de cette façon : https://zupimages.net/up/23/13/nkx2.jpg

Je vous remercie

[Lixyr]

Bonjour,

Pouvez-vous fournir, entre balises code, le contenu de votre template viewtopic_body ?

[Argimpasa]

Bonjour,

Vous le trouverez ci-dessous

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>
   
<script type="text/javascript">
    //<![CDATA[
    $(window).ready(function(){
        $('.header-message span').each(function() {
        var color = $(this).css("color");
        $(this).closest('.header-message').css('background-color', color);
        });
    });
    //]]>
</script>
   
<div id="wrap-topic">
     
    <div id="header-topic">
        <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
        <a href="{U_INDEX}"><span>{L_INDEX}</span></a>
        {NAV_CAT_DESC}
        <script type="text/javascript">
            //<![CDATA[
            $('#header-topic').html($('#header-topic').html().replace(/\:\:/g,'|'));
            //]]>
        </script>
    </div>
     
    <div class="new-reply-topic">
        <!-- 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 -->
        &nbsp;
    </div>
     
    <div class="topic-pagination">
        <!-- BEGIN topicpagination -->
        {PAGINATION}
        <!-- END topicpagination -->
    </div>
   
    {POLL_DISPLAY}
   
    <!-- BEGIN postrow -->
        <!-- BEGIN displayed -->
        <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
   
        <div class="header-message">
            {postrow.displayed.POSTER_NAME}
            {postrow.displayed.POSTER_RANK_NEW}
           
            <div>
            {postrow.displayed.QUOTE_IMG}
            {postrow.displayed.EDIT_IMG}
            {postrow.displayed.DELETE_IMG}
            {postrow.displayed.IP_IMG}
            </div>
        </div>
     
        <!-- 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="wrap-topic-content">
            <div class="topic-content">
                <a href="{postrow.displayed.POST_URL}"># {postrow.displayed.POST_SUBJECT}</a>
                {postrow.displayed.POST_DATE_NEW}
               
                <div>{postrow.displayed.MESSAGE}</div>
            </div>
     
            <div class="topic-avatar">
                {postrow.displayed.POSTER_AVATAR}
                <div>
                    <span class="title-profil">en bref</span>
                    <!-- BEGIN contact_field -->
                        {postrow.displayed.contact_field.CONTENT}
                    <!-- END contact_field --><br />
                    <!-- BEGIN profile_field -->
                        {postrow.displayed.profile_field.LABEL}
                        {postrow.displayed.profile_field.CONTENT}
                        {postrow.displayed.profile_field.SEPARATOR}
                    <!-- END profile_field -->
                   
                    <br />
                    <span class="feuille-de-perso" id="feuilleperso">{postrow.displayed.POSTER_RPG}</span>
                    <script type="text/javascript">
                    //<![CDATA[
                        var profilrpg = document.getElementById("feuilleperso");
                        profilrpg.innerHTML = profilrpg.innerHTML
                        .replace(/(NomDeTon1erChamp)/g, '<span class="label">$1</span>')
                        .replace(/(NomDeTon2emeChamp)/g, '<span class="label">$1</span>')
                        .replace(/(NomDeTon3emeChamp)/g, '<span class="label">$1</span>');
                        profilrpg.removeAttribute("id");
                    //]]>
                    </script>
               
                    <div class="contact_link_p">
                    {postrow.displayed.PROFILE_IMG}
                    {postrow.displayed.PM_IMG}
                    </div>
                </div>
            </div>
     
        <!-- BEGIN switch_signature -->
        <div class="separation"></div>
        <div class="signature-topic" 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 -->
     
      <div class="new-reply-topic" style="height: 77px;">
        <!-- 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 -->
      </div>
     
      <div class="topic-pagination" style="text-align: right; display: block;">
        <div>
        <!-- BEGIN switch_user_logged_in -->
        <!-- BEGIN watchtopic -->
        {S_WATCH_TOPIC}
        <!-- END watchtopic -->
        <!-- END switch_user_logged_in -->
        </div>
       
        <!-- BEGIN topicpagination -->
        {PAGINATION}
        <!-- END topicpagination -->
      </div>
     
      <!-- BEGIN switch_user_logged_in -->
      <a name="quickreply"></a>
      {QUICK_REPLY_FORM}
      <!-- END switch_user_logged_in -->
     
      <!-- BEGIN viewtopic_bottom -->
      <form method="get" action="{S_FORM_MOD_ACTION}" id="topic-form">
        <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>
     
      <form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}" style="margin-left: auto;" id="topic-form">
        <fieldset class="jumpbox">
          <label>{L_JUMP_TO}:</label>
          {S_JUMPBOX_SELECT}
          <input class="button2" type="submit" value="{L_GO}" />
        </fieldset>
      </form>
   
      <!-- END viewtopic_bottom -->
      <!-- BEGIN show_permissions -->
     
      <div class="permissions">
        <div class="h3">{L_TABS_PERMISSIONS}</div>
        {S_AUTH_LIST}
      </div>
      <!-- END show_permissions -->
    </div>
    <!-- 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>

[Lixyr]

Est-ce que ceci règle le problème ?

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>
 
<script type="text/javascript">
    //<![CDATA[
    $(window).ready(function(){
        $('.header-message span').each(function() {
        var color = $(this).css("color");
        $(this).closest('.header-message').css('background-color', color);
        });
    });
    //]]>
</script>
 
<div id="wrap-topic">
   
    <div id="header-topic">
        <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
        <a href="{U_INDEX}"><span>{L_INDEX}</span></a>
        {NAV_CAT_DESC}
        <script type="text/javascript">
            //<![CDATA[
            $('#header-topic').html($('#header-topic').html().replace(/\:\:/g,'|'));
            //]]>
        </script>
    </div>
   
    <div class="new-reply-topic">
        <!-- 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 -->
        &nbsp;
    </div>
   
    <div class="topic-pagination">
        <!-- BEGIN topicpagination -->
        {PAGINATION}
        <!-- END topicpagination -->
    </div>
 
    {POLL_DISPLAY}
 
    <!-- BEGIN postrow -->
        <!-- BEGIN displayed -->
        <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
 
        <div class="header-message">
            {postrow.displayed.POSTER_NAME}
            {postrow.displayed.POSTER_RANK_NEW}
         
            <div>
            {postrow.displayed.QUOTE_IMG}
            {postrow.displayed.EDIT_IMG}
            {postrow.displayed.DELETE_IMG}
            {postrow.displayed.IP_IMG}
            </div>
        </div>
   
        <!-- 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="wrap-topic-content">
            <div class="topic-content">
                <a href="{postrow.displayed.POST_URL}"># {postrow.displayed.POST_SUBJECT}</a>
                {postrow.displayed.POST_DATE_NEW}
             
                <div>{postrow.displayed.MESSAGE}</div>
            </div>
   
            <div class="topic-avatar">
              {postrow.displayed.POSTER_AVATAR}<br />
              {postrow.displayed.RANK_IMAGE}
                <div>
                    <span class="title-profil">en bref</span>
                    <!-- BEGIN contact_field -->
                        {postrow.displayed.contact_field.CONTENT}
                    <!-- END contact_field --><br />
                    <!-- BEGIN profile_field -->
                        {postrow.displayed.profile_field.LABEL}
                        {postrow.displayed.profile_field.CONTENT}
                        {postrow.displayed.profile_field.SEPARATOR}
                    <!-- END profile_field -->
                 
                    <br />
                    <span class="feuille-de-perso" id="feuilleperso">{postrow.displayed.POSTER_RPG}</span>
                    <script type="text/javascript">
                    //<![CDATA[
                        var profilrpg = document.getElementById("feuilleperso");
                        profilrpg.innerHTML = profilrpg.innerHTML
                        .replace(/(NomDeTon1erChamp)/g, '<span class="label">$1</span>')
                        .replace(/(NomDeTon2emeChamp)/g, '<span class="label">$1</span>')
                        .replace(/(NomDeTon3emeChamp)/g, '<span class="label">$1</span>');
                        profilrpg.removeAttribute("id");
                    //]]>
                    </script>
             
                    <div class="contact_link_p">
                    {postrow.displayed.PROFILE_IMG}
                    {postrow.displayed.PM_IMG}
                    </div>
                </div>
            </div>
   
        <!-- BEGIN switch_signature -->
        <div class="separation"></div>
        <div class="signature-topic" 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 -->
   
      <div class="new-reply-topic" style="height: 77px;">
        <!-- 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 -->
      </div>
   
      <div class="topic-pagination" style="text-align: right; display: block;">
        <div>
        <!-- BEGIN switch_user_logged_in -->
        <!-- BEGIN watchtopic -->
        {S_WATCH_TOPIC}
        <!-- END watchtopic -->
        <!-- END switch_user_logged_in -->
        </div>
     
        <!-- BEGIN topicpagination -->
        {PAGINATION}
        <!-- END topicpagination -->
      </div>
   
      <!-- BEGIN switch_user_logged_in -->
      <a name="quickreply"></a>
      {QUICK_REPLY_FORM}
      <!-- END switch_user_logged_in -->
   
      <!-- BEGIN viewtopic_bottom -->
      <form method="get" action="{S_FORM_MOD_ACTION}" id="topic-form">
        <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>
   
      <form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}" style="margin-left: auto;" id="topic-form">
        <fieldset class="jumpbox">
          <label>{L_JUMP_TO}:</label>
          {S_JUMPBOX_SELECT}
          <input class="button2" type="submit" value="{L_GO}" />
        </fieldset>
      </form>
 
      <!-- END viewtopic_bottom -->
      <!-- BEGIN show_permissions -->
   
      <div class="permissions">
        <div class="h3">{L_TABS_PERMISSIONS}</div>
        {S_AUTH_LIST}
      </div>
      <!-- END show_permissions -->
    </div>
    <!-- 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>

J'ai rajouté {postrow.displayed.RANK_IMAGE} sous {postrow.displayed.POSTER_AVATAR}, comme ceci :

<div class="topic-avatar">
{postrow.displayed.POSTER_AVATAR}<br />
{postrow.displayed.RANK_IMAGE}
<div>
<span class="title-profil">en bref</span>

[Argimpasa]

Non, l'image n'apparaît toujours pas.

[MlleAlys]

Bonjour,

Pour information, le template proposé par Lixir fonctionne bien sur mon forum de test: l'image du rang s'affiche sous l'avatar.
Mais il me semble que dans votre css, la hauteur du bloc du profil est limitée à celle de l'avatar, et celle du rang étant plus bas, elle est peut être juste non visible.
Et pour que les infos du profil coulissent seulement par dessus l'avatar et pas par dessus l'image du rang également, je pense que le plus simple sera d'ajouter une div.

Pourriez-vous fournir le code css de l'affichage des sujets s'il vous plait ?

[Argimpasa]

D'accord, je suis vraiment désolée de vous ennuyer.

Voilà le CSS

Code:

* --------- AFFICHAGES MESSAGES (C) SUNHAE --------- */

#wrap-topic {
    width: 800px;
    margin: auto;
    display: flex;
    flex-flow: wrap;
}

#header-topic {
    background-color: #f1f0f4;
    width: 100%;
    color: #c07c59;
    font-size: 11px;
    font-style: italic;
    line-height: 27px;
    height: 80px;
    display: flex;
    align-content: center;
    flex-flow: wrap;
    justify-content: center;
}

#header-topic .sousligne {
    font: 11px 'Roboto', sans-serif;
    font-style: italic;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    display: inline-block;
}

#header-topic a:not(:first-of-type) {
    color: #c07c59;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: -0.5px;
}

#header-topic a:first-of-type {
    color: #262929;
    font-family: 'DM Serif Display', serif;
    font-size: 23px;
    text-transform: uppercase;
    font-style: normal;
    line-height: 30px;
    width: 100%;
    text-align: center;
}

.new-reply-topic,
.topic-pagination {
    display: flex;
    align-content: center;
    flex-flow: wrap;
}

.topic-pagination,
#pagination_memberlist {
    margin-left: auto;
    text-transform: uppercase;
    font-family: initial;
    font: 11px 'Roboto', sans-serif;
    letter-spacing: -1px;
    color: transparent;
}

.topic-pagination>div,
#pagination_memberlist>div {
    margin: 20px 0 5px;
}

.topic-pagination>div a,
#pagination_memberlist>div a {
    color: #c07c59;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    text-transform: lowercase;
    font-style: italic;
    letter-spacing: -0.5px;
}

.new-reply-topic a {
    padding: 28px 17px 28px 25px;
}

.topic-pagination span strong,
#pagination_memberlist strong {
    padding: 0 0 0 5px;
}

.topic-pagination span,
#pagination_memberlist span {
    color: #262929;
}

.topic-pagination strong,
#pagination_memberlist strong {
    color: #c07c59;
    padding: 0 2px;
}

.topic-pagination .pag-img,
#pagination_memberlist .pag-img {
    display: none;
}

.header-message {
    width: 100%;
    height: 86px;
    display: flex;
    flex-flow: wrap;
    justify-content: flex-end;
    align-content: center;
    position: relative;
    padding: 0 50px 0 0;
    color: #f6f5f8;
    font: 10px 'Roboto', sans-serif;
    font-weight: lighter;
    font-style: italic;
    background-color: #262929;
}

.header-message div {
    position: absolute;
    left: 35px;
    bottom: 22px;
}

.header-message span,
.header-message a[href*="/u"] {
    width: 100%;
    text-align: right;
}

.header-message span {
    font: 20px 'DM Serif Display', serif;
    font-style: normal;
    margin-right: -20px;
}

.header-message span,
.header-message>a {
    width: 100%;
}

.header-message strong {
    color: #f6f5f8;
    font-weight: 100;
}

.header-message>div img {
    padding: 0 2px;
}

.wrap-topic-content {
    background-color: #F1F0F4;
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
    width: 100%;
    padding: 19px 0;
}

.topic-content {
    width: 538px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-content: flex-start;
    padding-top: 6px;
}

.topic-content,
.topic-content>a {
    color: #C3C3C3;
    font: 10px 'Roboto', sans-serif;
    font-weight: lighter;
    font-style: italic;
}

.topic-content>div a {
    font-weight: bold !important;
}

.topic-content>div {
    color: #262929;
    font-style: normal;
    text-align: justify;
    font-weight: normal;
    font-size: 12px;
    border-top: 1px solid #C3C3C3;
    padding: 18px 0;
    margin-top: 8px;
    width: 100%;
}

.topic-content>div img {
    max-width: 100%;
}

.topic-avatar {
    border: 2px solid #F6F5F8;
    overflow: hidden;
    width: 200px;
    height: 320px;
    position: relative;
}

.topic-avatar>div img {
    max-width: 100%;
}

.topic-avatar>a img {
    width: 200px;
}

.topic-avatar>div {
    position: absolute;
    top: 396px;
    background-color: #ffffffe0;
    width: 200px;
    height: 320px;
    transition: all 1s;
    padding: 5px 20px 10px;
    font: 11px 'Roboto', sans-serif;
    letter-spacing: -0.5px;
    overflow-y: auto;
    overflow-x: hidden;
}

.topic-avatar:hover>div {
    top: 0;
}

.feuille-de-perso a[href*="/u"],
.title-profil {
    font: 30px 'Hamilton', cursive;
    color: #c07c59;
    text-align: right;
    display: block;
    height: 32px;
    text-transform: lowercase;
  white-space: nowrap;
}

.topic-avatar .label {
    text-transform: uppercase;
    font-weight: bold;
    line-height: 15px;
    color: #262929
}

.topic-avatar>div .label span,
.feuille-de-perso {
    color: #262929 !important;
}

.feuille-de-perso textarea {
    min-width: 100%;
    max-width: 100%;
    display: block;
    height: 50px;
    background-color: #F6F5F8;
    padding: 6px;
    overflow: auto;
    margin-bottom: 10px;
    font-size: 10px;
    text-align: justify;
    line-height: 12px;
}

/*.feuille-de-perso br { display: none; }*/

.topic-avatar .contact_link_p {
    position: sticky;
    bottom: 5px;
    margin: 10px -10px 0 0;
    font-size: 0;
    text-align: right;
}

.topic-avatar .contact_link_p a:first-child {
    padding-right: 7px;
}

.separation {
    width: 555px;
    margin: auto;
    height: 1px;
    background-color: #C3C3C3;
    margin: 15px 0 2px;
}

.signature-topic {
    width: 100%;
    max-height: 280px;
    padding: 5px;
    overflow: auto;
}

.signature-topic img {
    max-width: 100%;
}

#wrap-topic a[name="quickreply"]+.h3 {
    display: none;
}

#wrap-topic form#quick_reply {
    width: 100%;
}

#wrap-topic .sceditor-container,
#wrap-topic .sceditor-container iframe,
#wrap-topic .sceditor-container textarea,
#wrap-topic .sceditor-toolbar {
    background-color: #F1F0F4 !important;
    width: 100% !important;
    font-family: 'Roboto', sans-serif;
}

#wrap-topic #quick_reply #textarea_content {
    box-shadow: none;
}

#wrap-topic #quick_reply #textarea_content+div input {
    background-color: #ECEBF0;
    box-shadow: none;
    border-radius: 0;
    font: 15px 'DM Serif Display', serif;
    color: #c07c59;
    text-transform: uppercase;
    margin: 0px 10px 10px 10px;
    height: 35px;
    padding: 0 15px;
}

#topic-form label {
    font-size: 0;
}

#topic-form select {
    background-color: #F1F0F4;
    border: none;
    font-size: 10px;
    padding: 3px 5px;
}

#topic-form fieldset {
    margin: 55px 0 28px;
}

#topic-form input {
    background-color: #ECEBF0;
    box-shadow: none;
    border-radius: 0;
    font: 12px 'DM Serif Display', serif;
    color: #c07c59;
    text-transform: uppercase;
    margin: 0 5px;
    height: 21px;
    padding: 0 5px;
}

/* Affichage du bloc des permissions */
.permissions {
    width: 100%;
    background-color: #F1F0F4;
    padding: 20px 25px;
    font: 11px 'Roboto', sans-serif;
}

.permissions a {
    color: #c07c59;
}

.permissions .h3 {
    border: none;
    font: 13px 'DM Serif Display', serif;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/** CITATION CODE SPOILER **/
blockquote,
dl.codebox {
    margin: 0 0 20px;
    background: none;
    font: 12px 'Roboto', sans-serif;
    padding: 0;
    border: none;
}

blockquote {
    padding: 10px 30px;
}

dl.codebox code,
.spoiler dd,
.hidecode {
    background-color: #F6F5F8 !important;
    padding: 10px 30px !important;
}

.hidecode dt,
dl.codebox::before,
blockquote::before {
    display: none !important;
}

dl.codebox dt,
cite {
    border: none;
    color: #C38567;
    font: 11px 'Roboto', sans-serif;
    text-transform: uppercase;
    margin: 5px 0 8px 11px;
    font-weight: 500;
}

.spoiler dt {
    margin-bottom: 3px !important;
}

dl.codebox code {
    font-size: 12px;
}
  /* --------- FIN AFFICHAGE MESSAGES --------- */

[MlleAlys]

Essayez ceci :

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>
 
<script type="text/javascript">
    //<![CDATA[
    $(window).ready(function(){
        $('.header-message span').each(function() {
        var color = $(this).css("color");
        $(this).closest('.header-message').css('background-color', color);
        });
    });
    //]]>
</script>
 
<div id="wrap-topic">
 
    <div id="header-topic">
        <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
        <a href="{U_INDEX}"><span>{L_INDEX}</span></a>
        {NAV_CAT_DESC}
        <script type="text/javascript">
            //<![CDATA[
            $('#header-topic').html($('#header-topic').html().replace(/\:\:/g,'|'));
            //]]>
        </script>
    </div>
 
    <div class="new-reply-topic">
        <!-- 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 -->
        &nbsp;
    </div>
 
    <div class="topic-pagination">
        <!-- BEGIN topicpagination -->
        {PAGINATION}
        <!-- END topicpagination -->
    </div>
 
    {POLL_DISPLAY}
 
    <!-- BEGIN postrow -->
        <!-- BEGIN displayed -->
        <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
 
        <div class="header-message">
            {postrow.displayed.POSTER_NAME}
            {postrow.displayed.POSTER_RANK_NEW}
       
            <div>
            {postrow.displayed.QUOTE_IMG}
            {postrow.displayed.EDIT_IMG}
            {postrow.displayed.DELETE_IMG}
            {postrow.displayed.IP_IMG}
            </div>
        </div>
 
        <!-- 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="wrap-topic-content">
            <div class="topic-content">
                <a href="{postrow.displayed.POST_URL}"># {postrow.displayed.POST_SUBJECT}</a>
                {postrow.displayed.POST_DATE_NEW}
           
                <div>{postrow.displayed.MESSAGE}</div>
            </div>
         
          <div class="topic-profil">
 
            <div class="topic-avatar">
              {postrow.displayed.POSTER_AVATAR}
                <div>
                    <span class="title-profil">en bref</span>
                    <!-- BEGIN contact_field -->
                        {postrow.displayed.contact_field.CONTENT}
                    <!-- END contact_field --><br />
                    <!-- BEGIN profile_field -->
                        {postrow.displayed.profile_field.LABEL}
                        {postrow.displayed.profile_field.CONTENT}
                        {postrow.displayed.profile_field.SEPARATOR}
                    <!-- END profile_field -->
               
                    <br />
                    <span class="feuille-de-perso" id="feuilleperso">{postrow.displayed.POSTER_RPG}</span>
                    <script type="text/javascript">
                    //<![CDATA[
                        var profilrpg = document.getElementById("feuilleperso");
                        profilrpg.innerHTML = profilrpg.innerHTML
                        .replace(/(NomDeTon1erChamp)/g, '<span class="label">$1</span>')
                        .replace(/(NomDeTon2emeChamp)/g, '<span class="label">$1</span>')
                        .replace(/(NomDeTon3emeChamp)/g, '<span class="label">$1</span>');
                        profilrpg.removeAttribute("id");
                    //]]>
                    </script>
           
                    <div class="contact_link_p">
                    {postrow.displayed.PROFILE_IMG}
                    {postrow.displayed.PM_IMG}
                    </div>
                </div>
            </div>
           
            <div class="topic-rank">{postrow.displayed.RANK_IMAGE}</div>
           
          </div>
         
          <!-- BEGIN switch_signature -->
        <div class="separation"></div>
        <div class="signature-topic" 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 -->
 
      <div class="new-reply-topic" style="height: 77px;">
        <!-- 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 -->
      </div>
 
      <div class="topic-pagination" style="text-align: right; display: block;">
        <div>
        <!-- BEGIN switch_user_logged_in -->
        <!-- BEGIN watchtopic -->
        {S_WATCH_TOPIC}
        <!-- END watchtopic -->
        <!-- END switch_user_logged_in -->
        </div>
   
        <!-- BEGIN topicpagination -->
        {PAGINATION}
        <!-- END topicpagination -->
      </div>
 
      <!-- BEGIN switch_user_logged_in -->
      <a name="quickreply"></a>
      {QUICK_REPLY_FORM}
      <!-- END switch_user_logged_in -->
 
      <!-- BEGIN viewtopic_bottom -->
      <form method="get" action="{S_FORM_MOD_ACTION}" id="topic-form">
        <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>
 
      <form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}" style="margin-left: auto;" id="topic-form">
        <fieldset class="jumpbox">
          <label>{L_JUMP_TO}:</label>
          {S_JUMPBOX_SELECT}
          <input class="button2" type="submit" value="{L_GO}" />
        </fieldset>
      </form>
 
      <!-- END viewtopic_bottom -->
      <!-- BEGIN show_permissions -->
 
      <div class="permissions">
        <div class="h3">{L_TABS_PERMISSIONS}</div>
        {S_AUTH_LIST}
      </div>
      <!-- END show_permissions -->
    </div>
    <!-- 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>

J'ai ajouté le bloc "topic-profil" pour englober le "topic-avatar" ainsi que le nouveau "topic-rank"

[Argimpasa]

Du coup ça fonctionne. Je vous remercie