[PHPBB2] Modifier l'apparence du profil dans les messages

Bonjour,

Je ne parviens pas à modifier l'apparence des labels dans le profil des messages.

J'obtiens ceci :



Alors que je souhaiterais avoir ceci :



Comment puis-je procéder ?

Voici le template :

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>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr width="100%"><div class="bloctitreimg"><div class="bloctitre"><div 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}
  </div>
  <div class="titre"> {TOPIC_TITLE}</div></div></div></tr>
</table>       
<table class="bloc-boutons">
  <td align="left" valign="middle" nowrap="nowrap">
            <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>
  </td>
  <!-- BEGIN topicpagination -->
  <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall current_page_only">Page <span>{PAGE_NUMBER}</span></span><span class="gensmall paginer"><span class="remove_colon">{PAGINATION}</span></span></td>
  <!-- END topicpagination -->
</table>
<table>
    <!-- BEGIN postrow -->
    <!-- BEGIN displayed -->
            <table class="message" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                <tr><td valign="top" nowrap="nowrap" align="center" width="100%"><span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                                  <span class="rang">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}</span></td></tr>
                    <tr><td valign="top" nowrap="nowrap" class="post-options">
                        {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}
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="hr">
                        <hr style="border:none; border-bottom: 1px solid #B89827;" />
                    </td>     
                </tr>
                          <tr>
                              <td><div class="bloc-avatar">{postrow.displayed.POSTER_AVATAR}<div class="avatarcadre"><img src="https://i.imgur.com/BCr9Apw.png" width="210px" height="330px" /></div>
                                    <div class="profil">
                                      <!-- BEGIN profile_field -->
                                      {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                                      <!-- END profile_field --></div></div>
                              </td>
                            </tr>
                          <tr>
                            <td align="center"><div class="details-sujet"><span class="sujetdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></div></td>
                          </tr>
                <tr>
                    <td colspan="2">
                        <!-- BEGIN switch_vote_active -->
                        <div class="vote gensmall">
                            <!-- BEGIN switch_vote -->
                            <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                            <!-- END switch_vote -->

                            <!-- BEGIN switch_bar -->
                            <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                                <!-- BEGIN switch_vote_plus -->
                                <div class="vote-bar-plus" style="height:{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="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                                <!-- END switch_vote_minus -->
                            </div>
                            <!-- END switch_bar -->

                            <!-- BEGIN switch_no_bar -->
                            <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                            <!-- END switch_no_bar -->

                            <!-- BEGIN switch_vote -->
                            <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                            <!-- END switch_vote -->
                        </div>
                        <!-- END switch_vote_active -->
                        <div class="postbody">
                            <div>{postrow.displayed.MESSAGE}</div>

                            <!-- BEGIN switch_attachments -->
                            <dl class="attachbox">
                                <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                                <dd>
                                    <!-- BEGIN switch_post_attachments -->
                                    <dl class="file">
                                        <dt>
                                            <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                            <!-- BEGIN switch_dl_att -->
                                            <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}
                                            <!-- END switch_dl_att -->

                                            <!-- BEGIN switch_no_dl_att -->
                                            {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}
                                            <!-- END switch_no_dl_att -->
                                        </dt>

                                        <!-- BEGIN switch_no_comment -->
                                        <dd>
                                            <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                        </dd>
                                        <!-- END switch_no_comment -->

                                        <!-- BEGIN switch_no_dl_att -->
                                        <dd>
                                            <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                        </dd>
                                        <!-- END switch_no_dl_att -->

                                        <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                                    </dl>
                                    <!-- END switch_post_attachments -->
                                </dd>
                            </dl>
                            <!-- END switch_attachments -->

                            <div class="clear"></div>
                            <!-- BEGIN switch_signature -->
                            <div class="signature_div">
                                {postrow.displayed.SIGNATURE}
                            </div>
                            <!-- END switch_signature -->

                        </div>
                        <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
                    </td>
                </tr>
            </table>
    <!-- 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="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="9%" class="noprint"> </td>
                    <td align="center" class="t-title"><a name="bottomtitle"></a><div class="cattitle">{TOPIC_TITLE}</div></td>
                    <td align="right" nowrap="nowrap" width="9%" class="browse-arrows">
                        <!-- BEGIN switch_isconnect -->
                        <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> 
                        <!-- END switch_isconnect -->
                        <a href="#top">{L_BACK_TO_TOP}</a> 
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
    <tr>
          <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall current_page_only">Page <span>{PAGE_NUMBER}</span></span></td>
        <!-- BEGIN topicpagination -->
          <td class="row1" align="right" valign="top" ><span class="gensmall paginer"><span class="remove_colon">{PAGINATION}</span></span></td>
        <!-- END topicpagination -->
              <script type="text/javascript">
    var elements = document.getElementsByClassName("remove_colon");
    for (var i = 0; i < elements.length; ++i) {
        elements[i].innerHTML = elements[i].innerHTML.replace(/ : /g,' |');
    }
               
    </script>
    </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">
    <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">
    <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">
    <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">
    <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 -->


et voici le CSS correspondant :

Code:

/****************************************************
        PROFIL & MESSAGES
*****************************************************/
.bloctitreimg
{
  background: url('https://i.imgur.com/YGG8ybs.png');
  background-repeat: repeat;
  height: 91px;
  width: 800px;
  margin-bottom: 10px;
  margin-left: 6.7%;
}
.bloctitre
{
  position: relative;
  right: 1%;
  bottom: 7%;
  background: url('https://i.imgur.com/qLN57j1.png');
  height: 103px;
  width: 813px;
  z-index: 999;
  margin-bottom: 10px;
}
.nav
{
  position: relative;
  top: 20%;
  text-align: center;
  font-family: 'Roboto Condensed', sans serif;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: normal;
  font-style: italic;
}
.titre
{
  text-align: center;
  font-family: 'Playfair Display', sans serif;
  font-size: 28px;
  margin-top: 30px;
}
.bloc-boutons
{
  width: 815px;
  margin-left: 6%;
}
.paginer img {
  display: none;
}
.paginer a {
  font-family: 'Playfair Display', sans serif;
  font-size: 16px;
  color: #B89827;
  text-transform: uppercase;
}
.paginer a[href^="javascript"]
{
  display:none;
}
/** N'AFFICHER QUE "PAGE X" DANS VIEWTOPIC_BODY **/
.current_page_only
{
  font-family: 'Playfair Display', sans serif;
  font-size: 10px;
  color: #B89827;
  text-transform: uppercase;
}
.current_page_only span
{
  font-size: 0;
}
.current_page_only strong
{
  font-family: 'Playfair Display', sans serif;
  font-size: 16px;
  color: #B89827;
  font-weight: normal;
}
.current_page_only span strong:nth-child(2)
{
    display: none !important;
}
.remove_colon
{
  font-family: 'Playfair Display', sans serif;
  font-size: 16px;
  color: #B89827;
  font-weight: normal !important;
}
 
/** FIN - N'AFFICHER QUE "PAGE X" DANS VIEWTOPIC_BODY **/
.message
{
  width: 800px;
  margin-top: 20px;
  background: url('https://i.imgur.com/YGG8ybs.png') repeat;
  padding: 30px;
}
.details-sujet
{
  margin-bottom: 10px;
  margin-top: -310px;
}
.sujetdetails
{
  font-family: 'Playfair Display', sans serif;
  font-size: 14px;
  font-style: italic;
  color: #9c9c9c;
}
.name
{
  font-family: 'Playfair Display', sans serif;
  font-size: 24px;
}
.rang
{
  display: block;
  font-family: 'Roboto Condensed', sans serif;
  font-size: 15px;
  font-style: italic;
  margin-bottom: -15px;
}
.postbody
{
  position: relative;
  left: 11%;
  text-align: justify;
  width: 630px;
  text-align: justify;
  min-height: 300px;
  margin-top: -270px;
}
.bloc-avatar
{
  position: relative;
  right: 20%;
  margin-top: 3%;
}
.avatarcadre
{
  position: relative;
  margin-top: -325px;
  right: 0.6%;
}
.profil
{
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  margin-top: -310px;
  left: 2%;
  width: 170px;
  height: 290px;
  color: #000000;
  font-family: 'Playfair Display', sans serif;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transition: all ease-in-out 0.3s;
}
.profil span
{
  color: #000000;
}
.profil:hover
{
  opacity: 1;
}

En vous remerciant par avance,

Pizi

Coucou Pizi,

d'après ce que je comprends, je crois que tu désires avoir un retour à la ligne ?

Dans ton template recherches cette variable:

Code:

{postrow.displayed.profile_field.LABEL}

Il suffit de mettre la balise concernée juste après:

Code:

<br />

Penses a enregistrer puis à valider en cliquant respectivement sur   puis


Est-ce bien cela ?

Si tu désires retirer les disgracieux deux points ( : ) et un retour à la ligne:

Recherches ma même variable:

Code:

{postrow.displayed.profile_field.LABEL}

Supprimes et remplaces par:

Code:

 <span id="M14_label">{postrow.displayed.profile_field.LABEL}</span>
                                           <script type="text/javascript">
        jQuery('#M14_label').html(jQuery('#M14_label').html().replace(/: /g,' ')).removeAttr('id');
        </script><br />


Penses a enregistrer puis à valider en cliquant respectivement sur   puis

Merci beaucoup Phil,

Je cherche aussi à rendre les intitulés en gras et de couleur noire :/

Hello Pizi,

pour la couleur, tu es passée devant....
Tu as un bouton pour la choisir:


Utilisateurs et Groupes/Utilisateurs/Profils/Champs du profil:

Cliques sur le petit
Et appliques la couleur désirée:




Pour avoir les caractères gras, on va utiliser ce style.


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


.profil span.label span[style]{font-weight:bold;}


Penses a cliquer sur le bouton

Et voilou .

Oh ça marche tout bien !! Merci beaucoup
Par contre, j'aimerai un espace en haut et entre chaque label mais je n'arrive pas à faire que le margin soit pris en compte.

Comment je dois procéder ?

Bonjour Pizi,
effectivement, cette partie est difficile a modifier car on ne peut pas mettre une position absolute.On va contourner par un line-height et ajuster ensuite..
Alors il faut modifier de nouveau le template:

Remplaces tout le contenu par:

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>

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr width="100%"><div class="bloctitreimg"><div class="bloctitre"><div 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}
      </div>
      <div class="titre"> {TOPIC_TITLE}</div></div></div></tr>
    </table>     
    <table class="bloc-boutons">
      <td align="left" valign="middle" nowrap="nowrap">
                <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>
      </td>
      <!-- BEGIN topicpagination -->
      <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall current_page_only">Page <span>{PAGE_NUMBER}</span></span><span class="gensmall paginer"><span class="remove_colon">{PAGINATION}</span></span></td>
      <!-- END topicpagination -->
    </table>
    <table>
        <!-- BEGIN postrow -->
        <!-- BEGIN displayed -->
                <table class="message" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                    <tr><td valign="top" nowrap="nowrap" align="center" width="100%"><span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                                      <span class="rang">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}</span></td></tr>
                        <tr><td valign="top" nowrap="nowrap" class="post-options">
                            {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}
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="hr">
                            <hr style="border:none; border-bottom: 1px solid #B89827;" />
                        </td>   
                    </tr>
                              <tr>
                                  <td><div class="bloc-avatar">{postrow.displayed.POSTER_AVATAR}<div class="avatarcadre"><img src="https://i.imgur.com/BCr9Apw.png" width="210px" height="330px" /></div>
                                        <div class="profil">
                                          <!-- BEGIN profile_field -->
                                          <span id="M14_label" class="M14_label">{postrow.displayed.profile_field.LABEL}</span><br />
                                         
                                          <script type="text/javascript">
        jQuery('#M14_label').html(jQuery('#M14_label').html().replace(/: /g,' ')).removeAttr('id');
        </script><br />
                                          <span class="M14_content">{postrow.displayed.profile_field.CONTENT}</span><br />
                                          <!-- END profile_field --></div></div>
                                  </td>
                                </tr>
                              <tr>
                                <td align="center"><div class="details-sujet"><span class="sujetdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></div></td>
                              </tr>
                    <tr>
                        <td colspan="2">
                            <!-- BEGIN switch_vote_active -->
                            <div class="vote gensmall">
                                <!-- BEGIN switch_vote -->
                                <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                                <!-- END switch_vote -->

                                <!-- BEGIN switch_bar -->
                                <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                                    <!-- BEGIN switch_vote_plus -->
                                    <div class="vote-bar-plus" style="height:{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="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                                    <!-- END switch_vote_minus -->
                                </div>
                                <!-- END switch_bar -->

                                <!-- BEGIN switch_no_bar -->
                                <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                                <!-- END switch_no_bar -->

                                <!-- BEGIN switch_vote -->
                                <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                                <!-- END switch_vote -->
                            </div>
                            <!-- END switch_vote_active -->
                            <div class="postbody">
                                <div>{postrow.displayed.MESSAGE}</div>

                                <!-- BEGIN switch_attachments -->
                                <dl class="attachbox">
                                    <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                                    <dd>
                                        <!-- BEGIN switch_post_attachments -->
                                        <dl class="file">
                                            <dt>
                                                <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                                <!-- BEGIN switch_dl_att -->
                                                <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}
                                                <!-- END switch_dl_att -->

                                                <!-- BEGIN switch_no_dl_att -->
                                                {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}
                                                <!-- END switch_no_dl_att -->
                                            </dt>

                                            <!-- BEGIN switch_no_comment -->
                                            <dd>
                                                <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                            </dd>
                                            <!-- END switch_no_comment -->

                                            <!-- BEGIN switch_no_dl_att -->
                                            <dd>
                                                <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                            </dd>
                                            <!-- END switch_no_dl_att -->

                                            <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                                        </dl>
                                        <!-- END switch_post_attachments -->
                                    </dd>
                                </dl>
                                <!-- END switch_attachments -->

                                <div class="clear"></div>
                                <!-- BEGIN switch_signature -->
                                <div class="signature_div">
                                    {postrow.displayed.SIGNATURE}
                                </div>
                                <!-- END switch_signature -->

                            </div>
                            <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
                        </td>
                    </tr>
                </table>
        <!-- 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="catBottom" colspan="2" height="28">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="9%" class="noprint"> </td>
                        <td align="center" class="t-title"><a name="bottomtitle"></a><div class="cattitle">{TOPIC_TITLE}</div></td>
                        <td align="right" nowrap="nowrap" width="9%" class="browse-arrows">
                            <!-- BEGIN switch_isconnect -->
                            <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
                            <!-- END switch_isconnect -->
                            <a href="#top">{L_BACK_TO_TOP}</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
        <tr>
              <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall current_page_only">Page <span>{PAGE_NUMBER}</span></span></td>
            <!-- BEGIN topicpagination -->
              <td class="row1" align="right" valign="top" ><span class="gensmall paginer"><span class="remove_colon">{PAGINATION}</span></span></td>
            <!-- END topicpagination -->
                  <script type="text/javascript">
        var elements = document.getElementsByClassName("remove_colon");
        for (var i = 0; i < elements.length; ++i) {
            elements[i].innerHTML = elements[i].innerHTML.replace(/ : /g,' |');
        }
                 
        </script>
        </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">
        <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">
        <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">
        <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">
        <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 -->


Penser a enregistrer puis à valider en cliquant respectivement sur puis


Puis ajoutes ceci dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Code:


.profil .M14_label
  {
 
  line-height: 20px;
  }
.profil .M14_content
  {
line-height: 20px;
top: -10px;
position: relative;
  }



Penser a cliquer sur le bouton

Chaque label aura comme class:

Code:

.M14_label

et les renseignements de ces derniers auront la class:

Code:

.M14_content

Bonjour Phil,

J'ai installé les codes mais, autant ça a vachement aéré entre le contenu et les titres, autant ça n'a pas décollé le "messages" du haut :/

Coucou Pizi,

Il suffit d'ajuster les valeurs "20" de chaque "line-height" sur ces deux class et éventuellement adpater la valeur négative du margin-top de la class .profil .M14_content

Code:

.profil .M14_label
  {
 
  line-height: 20px;
  }
.profil .M14_content
  {
line-height: 20px;
top: -10px;
position: relative;
  }

Bonjour,

Merci beaucoup pour cette solution mais le souci c'est que du coup, ça me fait un grand espace entre 2 labels :/

Bonsoir Lizi,
hum, vi mais tu as fais quoi?

J'ai simplement modifié comme tu me l'as dit entre les line-weight et le margin négatif :

Code:

.profil .M14_label
{
  line-height: 60px;
}
.profil .M14_content
{
  line-height: 20px;
  top: -45px;
  position: relative;
}

Coucou Pizi,
j'avais zappé ta demande concernant l'espace en haut:
Supprimes ce style Pizi:

Code:

    .profil .M14_label
      {
   
      line-height: 20px;
      }
    .profil .M14_content
      {
    line-height: 20px;
    top: -10px;
    position: relative;
      }

Bon, on va modifier tout cela encore une fois.

Remplaces tout le contenu de ton template par celui-ci:

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>

        <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr width="100%"><div class="bloctitreimg"><div class="bloctitre"><div 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}
          </div>
          <div class="titre"> {TOPIC_TITLE}</div></div></div></tr>
        </table>   
        <table class="bloc-boutons">
          <td align="left" valign="middle" nowrap="nowrap">
                    <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>
          </td>
          <!-- BEGIN topicpagination -->
          <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall current_page_only">Page <span>{PAGE_NUMBER}</span></span><span class="gensmall paginer"><span class="remove_colon">{PAGINATION}</span></span></td>
          <!-- END topicpagination -->
        </table>
        <table>
            <!-- BEGIN postrow -->
            <!-- BEGIN displayed -->
                    <table class="message" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                        <tr><td valign="top" nowrap="nowrap" align="center" width="100%"><span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                                          <span class="rang">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}</span></td></tr>
                            <tr><td valign="top" nowrap="nowrap" class="post-options">
                                {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}
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" class="hr">
                                <hr style="border:none; border-bottom: 1px solid #B89827;" />
                            </td> 
                        </tr>
                                  <tr>
                                      <td><div class="bloc-avatar">{postrow.displayed.POSTER_AVATAR}<div class="avatarcadre"><img src="https://i.imgur.com/BCr9Apw.png" width="210px" height="330px" /></div>
                                            <div class="profil">
                                              <!-- BEGIN profile_field -->
                    <div class="M14_profil_membre">                       
                                              <span id="M14_label" class="M14_label">
                                                {postrow.displayed.profile_field.LABEL}</span>
                                           
                                              <script type="text/javascript">
            jQuery('#M14_label').html(jQuery('#M14_label').html().replace(/: /g,' ')).removeAttr('id');
            </script><br />
                                              <span class="M14_content">{postrow.displayed.profile_field.CONTENT}</span>
                                              </div>
                                              <!-- END profile_field --></div></div>
                                      </td>
                                    </tr>
                                  <tr>
                                    <td align="center"><div class="details-sujet"><span class="sujetdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></div></td>
                                  </tr>
                        <tr>
                            <td colspan="2">
                                <!-- BEGIN switch_vote_active -->
                                <div class="vote gensmall">
                                    <!-- BEGIN switch_vote -->
                                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                                    <!-- END switch_vote -->

                                    <!-- BEGIN switch_bar -->
                                    <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                                        <!-- BEGIN switch_vote_plus -->
                                        <div class="vote-bar-plus" style="height:{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="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                                        <!-- END switch_vote_minus -->
                                    </div>
                                    <!-- END switch_bar -->

                                    <!-- BEGIN switch_no_bar -->
                                    <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                                    <!-- END switch_no_bar -->

                                    <!-- BEGIN switch_vote -->
                                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                                    <!-- END switch_vote -->
                                </div>
                                <!-- END switch_vote_active -->
                                <div class="postbody">
                                    <div>{postrow.displayed.MESSAGE}</div>

                                    <!-- BEGIN switch_attachments -->
                                    <dl class="attachbox">
                                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                                        <dd>
                                            <!-- BEGIN switch_post_attachments -->
                                            <dl class="file">
                                                <dt>
                                                    <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                                    <!-- BEGIN switch_dl_att -->
                                                    <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}
                                                    <!-- END switch_dl_att -->

                                                    <!-- BEGIN switch_no_dl_att -->
                                                    {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}
                                                    <!-- END switch_no_dl_att -->
                                                </dt>

                                                <!-- BEGIN switch_no_comment -->
                                                <dd>
                                                    <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                                </dd>
                                                <!-- END switch_no_comment -->

                                                <!-- BEGIN switch_no_dl_att -->
                                                <dd>
                                                    <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                                </dd>
                                                <!-- END switch_no_dl_att -->

                                                <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                                            </dl>
                                            <!-- END switch_post_attachments -->
                                        </dd>
                                    </dl>
                                    <!-- END switch_attachments -->

                                    <div class="clear"></div>
                                    <!-- BEGIN switch_signature -->
                                    <div class="signature_div">
                                        {postrow.displayed.SIGNATURE}
                                    </div>
                                    <!-- END switch_signature -->

                                </div>
                                <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
                            </td>
                        </tr>
                    </table>
            <!-- 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="catBottom" colspan="2" height="28">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="9%" class="noprint"> </td>
                            <td align="center" class="t-title"><a name="bottomtitle"></a><div class="cattitle">{TOPIC_TITLE}</div></td>
                            <td align="right" nowrap="nowrap" width="9%" class="browse-arrows">
                                <!-- BEGIN switch_isconnect -->
                                <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
                                <!-- END switch_isconnect -->
                                <a href="#top">{L_BACK_TO_TOP}</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
            <tr>
                  <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall current_page_only">Page <span>{PAGE_NUMBER}</span></span></td>
                <!-- BEGIN topicpagination -->
                  <td class="row1" align="right" valign="top" ><span class="gensmall paginer"><span class="remove_colon">{PAGINATION}</span></span></td>
                <!-- END topicpagination -->
                      <script type="text/javascript">
            var elements = document.getElementsByClassName("remove_colon");
            for (var i = 0; i < elements.length; ++i) {
                elements[i].innerHTML = elements[i].innerHTML.replace(/ : /g,' |');
            }
                   
            </script>
            </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">
            <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">
            <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">
            <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">
            <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 -->


Puis dans ta feuille de style, on va ajouter un padding 20px 0px à cette class afin d'avoir un espace en haut du profil.

Code:

.profil

Ajoutes donc:

Code:

 padding 20px 0px;

Puis:

Code:

text-align:center;

Chaque section du profil aura désormais cette div ayant comme class:

Code:

.M14_profil_membre

A toi de modifier en partant de ce style:

Code:

 .profil .M14_profil_membre
    {
    height:40px;
 
    }
        .profil .M14_label
      {
   
      line-height: 20px;
      }
    .profil .M14_content
      {
    line-height: 20px;
 
   
      }

Il ne se décolle toujours pas du haut :/

Tu as le lien du forum stp.

Oui,

http://pizitest.forumactif.fr

Hello Pizi,

hum, ton profil annonce un niveau de connaissance à 50% sur la C.S.S,
est-ce réellement le cas ?

tu peux tester ceci dans ta feuille de style.

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


.M14_profil_membre:first-child
{
padding:20px 0px; 
}




Penser a cliquer sur le bouton

Bonjour,

Pour quelle raison me poses-tu cette question ?

Alors ça ne marchait pas car l'espace entre le "Messages" et "date d'inscription" était trop grand du coup. Toutefois, du coup, j'ai eu l'idée de modifier ton code ainsi :

Code:

.M14_profil_membre:first-child
{
  display: block;
  position: relative;
  top: 7px;
  padding: 12px;
}

et là ça me donne le rendu de la maquette du coup.

Merci beaucoup pour ton aide.
En allant vérifier les résultats des codes, je me suis rendue compte d'une chose en revanche, c'est que si, lorsque l'on est connecté, mon code apparaît bien, quand je suis en invité, les codes semblent se décaler sans que ce ne soit voulu :

Ici au niveau de l'espace entre le rang et la barre de séparation :



et ici au niveau du contenu sponsorisé :



Pourquoi le rendu ici n'est pas propre comme quand je me connecte ?
(si je dois faire cette demande dans un autre sujet, il n'y a pas de souci).

Encore merci

Hello,

Pour quelle raison me poses-tu cette question ?

Parce que moi même, j'ai renseigné la même valeur , et avec ce pourcentage, tu aurais du trouver cela toute seule.
Voilà pourquoi  


Tu peux me donner ta feuille de style dans sa totalité stp car actuellement, c'est un visu vraiment horrible que j'ai sur mon fofo de tests.

Bonjour,

Pourtant jusqu'à maintenant, ça ne donnait pas le résultat escompté :/
Merci beaucoup encore.

Je vais ouvrir un autre sujet pour cela alors.

J'ai édité mon message Pizi:
https://www.milouze14.com/t32529-phpbb2-modifier-l-apparence-du-profil-dans-les-messages#619681

Bonjour Phil,

Oui je viens de le voir.

Voici tout le CSS :

Code:

/***********************************************************
            HEADER
***********************************************************/
body
{
 background-color: #191317;
}
.bodylinewidth
{
  width: 950px;
  margin-left: 100px !important;
}
#i_logo {
  width: 100%;
  margin-top: -30px;
  margin-bottom: -52px;
}
a:link, a:hover
{
  text-decoration: none !important;
}
    .row3Right
    {
    border: none !important;
    }
    .thHead
    {
    border: none !important;
    }
    .thCornerL, .thCornerR, .thTop
    {
    border: none !important;
    }
    .thLeft, .thRight
    {
    border-left: none !important;
    border-right: none !important;
    }
    .catLeft, .catRight
    {
    border: none! important;
    }
    .catHead
    {
    border: none !important;
    }
    .catBottom
    {
    border: none !important;
    }
    #page-body
    {
     width: 920px;
     margin: auto;
    }
.forumline
{
  margin: auto;
}
/****************************************************
        PROFIL & MESSAGES
*****************************************************/
.bloctitreimg
{
  background: url('https://i.imgur.com/YGG8ybs.png');
  background-repeat: repeat;
  height: 91px;
  width: 800px;
  margin-bottom: 10px;
  margin-left: 6.7%;
}
.bloctitre
{
  position: relative;
  right: 1%;
  bottom: 7%;
  background: url('https://i.imgur.com/qLN57j1.png');
  height: 103px;
  width: 813px;
  z-index: 999;
  margin-bottom: 10px;
}
.nav
{
  position: relative;
  top: 20%;
  text-align: center;
  font-family: 'Roboto Condensed', sans serif;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: normal;
  font-style: italic;
}
.titre
{
  text-align: center;
  font-family: 'Playfair Display', sans serif;
  font-size: 28px;
  margin-top: 30px;
}
.bloc-boutons
{
  width: 815px;
  margin-left: 6%;
}
.paginer img {
  display: none;
}
.paginer a {
  font-family: 'Playfair Display', sans serif;
  font-size: 16px;
  color: #B89827;
  text-transform: uppercase;
}
.paginer a[href^="javascript"]
{
  display:none;
}
/** N'AFFICHER QUE "PAGE X" DANS VIEWTOPIC_BODY **/
.current_page_only
{
  font-family: 'Playfair Display', sans serif;
  font-size: 10px;
  color: #B89827;
  text-transform: uppercase;
}
.current_page_only span
{
  font-size: 0;
}
.current_page_only strong
{
  font-family: 'Playfair Display', sans serif;
  font-size: 16px;
  color: #B89827;
  font-weight: normal;
}
.current_page_only span strong:nth-child(2)
{
    display: none !important;
}
.remove_colon
{
  font-family: 'Playfair Display', sans serif;
  font-size: 16px;
  color: #B89827;
  font-weight: normal !important;
}
 
/** FIN - N'AFFICHER QUE "PAGE X" DANS VIEWTOPIC_BODY **/
.message
{
  width: 800px;
  margin-top: 20px;
  background: url('https://i.imgur.com/YGG8ybs.png') repeat;
  padding: 30px;
}
.details-sujet
{
  margin-bottom: 10px;
  margin-top: -310px;
}
.sujetdetails
{
  font-family: 'Playfair Display', sans serif;
  font-size: 14px;
  font-style: italic;
  color: #9c9c9c;
}
.name
{
  font-family: 'Playfair Display', sans serif;
  font-size: 24px;
}
.rang
{
  display: block;
  font-family: 'Roboto Condensed', sans serif;
  font-size: 15px;
  font-style: italic;
  margin-bottom: -15px;
}
.postbody
{
  position: relative;
  left: 11%;
  text-align: justify;
  width: 630px;
  text-align: justify;
  min-height: 300px;
  margin-top: -270px;
}
.bloc-avatar
{
  position: relative;
  right: 20%;
  margin-top: 3%;
}
.avatarcadre
{
  position: relative;
  margin-top: -325px;
  right: 0.6%;
}
.profil
{
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  margin-top: -310px;
  left: 2%;
  width: 170px;
  height: 290px;
  color: #000000;
  font-family: 'Playfair Display', sans serif;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transition: all ease-in-out 0.3s;
  padding 20px 0px;
}
.profil span.label span[style]
{
  font-weight:bold;
  margin-top: 5px;
}
.profil:hover
{
  opacity: 1;
}
.profil .M14_profil_membre
{
  height:40px;
}
.profil .M14_label
{
  line-height: 20px;
}
.profil .M14_content
{
  line-height: 10px;
}
.M14_profil_membre:first-child
{
  display: block;
  position: relative;
  top: 7px;
  padding: 12px;
}


Coucou Pizi,
alors même avec l'ajout de cette C.S.S, je n'ai pas le même résultat.

Aurais-tu un compte admin a me passer en MP stp ?

Coucou Pizi,

alors j'ai modifié un peu le style concernant des positions en relative qui
auraient du être en absolute.


En tant qu'invité le visu désormais:



Je t'ai ajouté un script qui va rechercher si le profil est vide:

Il est nommé "Suppression du profil si sponsor [Sur les sujets] " et tu peux le trouver ici:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Code:

$(function(){if (_userdata["user_id"] < (0)){  
$('div.profil').each(function(){var vide=$(this).text();if(vide==0){
$(this).closest('table').attr('id','sponsor');$(this).closest('.bloc-avatar').hide();}});}});


Dans le cas d'une recherche positive il va supprimer le cadre à gauche et ajouter un ID à la table ayant la class message .
Ce qui donne  ceci:

Code:

table#sponsor.message .postbody

J'ai ajouté ceci en début de la feuille de style:

Code:

/*CSS AJOUTEE PAR MILOUZE14*/
/*Minimum de hauteur en tant qu invite*/
.post-options{min-height:20px;}
/*On remonte le postbody si le profil est vide ==sponsor*/
table#sponsor.message .postbody{margin-top:0px!important;}


Et voilou

Oh super, merci !

Par contre on a toujours le décalage au niveau du rang :/ je me demande si ce n’est pas à cause de l’absence des boutons « citer », « éditer » etc sur la droite?

J’avoue que j’évite d’utiliser l’absolute car j’ai remarqué que ça ne me donne pas les mêmes affichages d’une résolution d’écran à une autre mais d’un autre côté, quand je commande des codages, je n’ai pas ce genre de problème. Qu’est-ce que je fais mal dans mes codes du coup?

De rien ,

je me demande si ce n’est pas à cause de l’absence des boutons « citer », « éditer » etc sur la droite?

C'était presque çà   .

Alors pour le rang, cela vient de ce style:

Code:

.rang
{
  display: block;
  font-family: 'Roboto Condensed', sans serif;
  font-size: 15px;
  font-style: italic;
  margin-bottom: -15px;
}

Ceci fonctionnera mieux ainsi Pizi:

Code:

.rang {
    display: block;
    font-family: 'Roboto Condensed', sans serif;
    font-size: 15px;
    font-style: italic;
    top: 5px;
    position: relative;
}

Pour les styles passés en absolute ce sont ceux-ci:

Code:

.avatarcadre
{
margin-top:-325px;
position:absolute;
margin-left:-5px;
}
.profil
{
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  margin-top: -310px;
  left: 2%;
  width: 170px;
  height: 290px;
  color: #000000;
  font-family: 'Playfair Display', sans serif;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transition: all ease-in-out 0.3s;
  padding 20px 0px;
}

Généralement les position "absolue" se trouvent dans des conteneurs positionnés en relative.
Ensuite il faut toujours donner des dimensions afin d'être crédible.
Le mieux sont les pourcentages .
Admettons que le profil fait 20% de large, on décale alors avec un margin-left négatif de la moitié:

Code:

.xxxx
{
margin-left:-10%;
}