Masquer le profil sous l'avatar

[petitefeuille]

Bonjour,

j'aimerais si c'est possible de masquer le profil sous l'avatar, car il devient important avec les trophées divers :



je vous remercie d'avance,

mes amitiés

Lydie

[Oka.mi]

Bonjour,

Vous pouvez décocher l'affichage des champs en question dans les messages : Champs du profil

[petitefeuille]

bonsoir Oka.mi, je ne veux pas décocher, je veux cacher les infos du profil sous l'avatar, en hover tout en gardant le visu du rang et pseudo .... j'ai dû mal m'expliquer ....

[Oka.mi]

Sur quel élément souhaitez-vous poser le hover ?

[gigi68]

Coucou , bonjour @petitefeuille et bonne année à toutes et à tous d'abord

En Php BB2 je l'ai fait il y à quelques années ,
Je peux te laisser le code Css et le template à voir si cela fonctionne chez toi

[petitefeuille]

coucou gigi et oui bonne année

je veux bien, je les essaierai demain sur mon forum test… merci d'avance et bonne soirée

[gigi68]

Ok pas de soucis ,
Donc voila le CSS qu'il faut utiliser dans un premier temps

Code:

.avatar_mess
{
 display: block;
 width: 200px;
 height: 460px;
 margin-left: px;
 margin-right: px;
 overflow: hidden;
 background:url(https://i.servimg.com/u/f68/19/04/82/50/voir_l11.png) no-repeat;
 border: 0px solid #3e1d19;
 transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -htm-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 box-shadow: 0px 0px 0px #000000;
 -moz-box-shadow: 0px 0px 0px #000000;
 -o-box-shadow: 0px 0px 0px #000000;
 -htm-box-shadow: 0px 0px 0px #000000;
 -webkit-box-shadow: 0px 0px 0px #000000;
     transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.avatar_mess:hover
{
 margin-left: 0px;
 transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -htm-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
     transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess
{
 position: absolute;
 display: block;
 width: 190px;
 height: 460px;
 margin: auto;
 padding: 5px;
 background: #F2F2F5;
 color: #273259;
 font-size: 12px;
 opacity: 0;
 -moz-opacity: 0;
 -khtml-opacity: 0;
 filter: alpha(opacity=0);
     transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess:hover
{
 opacity: 1;
 -moz-opacity: 1;
 -khtml-opacity: 1;
 filter: alpha(opacity=100);
     transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.pseudo_mess
{
 display: block;
 position: relative;
 z-index: 2;
 width: 200px;
 margin-top: px;
 margin-left: px;
 text-align: center;
 font-size: 18px;
 font-family: Arial Black;
 font-weight: bold;
 text-shadow: 0px 0px 3px #c5bea0;
 background: #D6D6D6;
 padding-top: 5px;
 border-left: 1px solid #371e1a;
 border-right: 1px solid #371e1a;
 border-top: 1px solid #371e1a;
 border-bottom: 1px solid #371e1a;
 box-shadow: 0px 0px 0px #000000;
 -moz-box-shadow: 0px 0px 0px #000000;
 -o-box-shadow: 0px 0px 0px #000000;
 -htm-box-shadow: 0px 0px 0px #000000;
 -webkit-box-shadow: 0px 0px 0px #000000;}

Et le template:  viewtopic_body  (Affichage d'un sujet)

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 = { };
    }
    
    _atc.cwait = 0;
    $('.addthis_button').mouseup(function(){
        if ($('#at15s').css('display') == 'block') {
            addthis_close();
        }
    });
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
        
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
 {
 if( $(this).is(":visible") )
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 }
 else
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    }
    catch(e) { }
    
 return false;
};

//]]>
</script>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<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>&nbsp;&nbsp;&nbsp;
<!-- 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>
<td align="left" valign="middle" nowrap="nowrap">
<!-- BEGIN switch_twitter_btn -->
<span id="twitter_btn" style="margin-left: 6px; ">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</span>
<!-- END switch_twitter_btn -->
<!-- BEGIN switch_fb_likebtn -->
<span id="fb_likebtn" style="margin-left: 6px; ">
<iframe src="https://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</span>
<!-- END switch_fb_likebtn -->
</td>
<td class="nav" 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="bottom" nowrap="nowrap" width="100%">
<span class="gensmall bold">
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=forumotion">{L_SHARE}</a>
<!-- BEGIN switch_plus_menu -->
&nbsp;|&nbsp;.
<script type="text/javascript">//<![CDATA[
 var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
 var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
 var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
 var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
 var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
 var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
 insert_plus_menu('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
 //]]>
</script>
<!-- END switch_plus_menu -->
</span>
</td>
</tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
<tr align="right">
<td class="catHead" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint">&nbsp;</td>
<td align="center" class="t-title">
<h1 class="cattitle">&nbsp;{TOPIC_TITLE}</h1>
</td>
<td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>&nbsp;</td>
</tr>
</table>
</td>
</tr>
<!-- BEGIN topicpagination -->
<tr>
<td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END topicpagination -->
{POLL_DISPLAY}
<tr>
<th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
<th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
</tr>
<!-- BEGIN postrow -->
<!-- BEGIN hidden -->
<tr>
<td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
</tr>
<!-- END hidden -->
<!-- BEGIN displayed -->
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">

<br />
                    <span class="pseudo_mess">{postrow.displayed.POSTER_NAME}</span>
                 <span class="rang_mess">{postrow.displayed.RANK_IMAGE}</span>
                 <span class="rang_mess">{postrow.displayed.POSTER_RANK}</span>
<br />
 
                 <span class="avatar_mess"><span class="profil_mess"><!-- BEGIN profile_field -->
           {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
           <!-- END profile_field -->
                   {postrow.displayed.POSTER_RPG}</span>
                   {postrow.displayed.ONLINE_IMG}
                   {postrow.displayed.POSTER_AVATAR} </span>
                                 
             
     </td>
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}&nbsp; &nbsp;<img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
<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 />
</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>
</td>
</tr>
<tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
<a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>
</td>
<td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</td>
</tr>
</table>
</td>
</tr>
<!-- BEGIN first_post_br -->
</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
<th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
</tr>
<!-- END first_post_br -->
<!-- END displayed -->
<!-- END postrow -->
<!-- BEGIN no_post -->
<tr align="center">
<td class="row1" colspan="3" height="28">
<span class="genmed">{no_post.L_NO_POST}</span>
</td>
</tr>
<!-- END no_post -->
<tr align="right">
<td class="catBottom" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint">&nbsp;</td>
<td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
<td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</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">{PAGE_NUMBER}</span></td>
<!-- BEGIN topicpagination -->
<td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
<!-- END topicpagination -->
</tr>
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<tr>
<td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
</tr>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</table>

<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
<tr>
<td class="catBottom" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><h1 class="cattitle">&nbsp;{PROMOT_TRAFIC_TITLE}</h1></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"><h1 class="cattitle">&nbsp;{PROMOT_TRAFIC_TITLE}</h1></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 -->
»&nbsp;<a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{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">
<h1 class="cattitle">&nbsp;{L_FORUM_RULES}</h1>
</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>&nbsp;&nbsp;&nbsp;
<!-- 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>

<!-- BEGIN viewtopic_bottom -->
<td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}:&nbsp;{S_JUMPBOX_SELECT}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span></td>
<!-- END viewtopic_bottom -->

<!-- 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">&nbsp;</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 />
                 
</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 -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

J'espère que cela ira ,

[Oka.mi]

À défaut d'avoir eu une réponse, j'ai mis le hover sur tout le bloc laissé visible (avatar, rang, pseudo).

Dans votre template viewtopic_body, ligne 145 environ, vous avez cette ligne :

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">

Ajouter une class "hover_infos" pour avoir ceci

Code:

<td class="{postrow.displayed.ROW_CLASS} hover_infos"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">

Un peu plus loin, vous avez

Code:

<div {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">{postrow.displayed.AWARDS}</div>

Juste avant ce passage, mettez

Code:

<div class="infos_display">

Ensuite, on va fermer le div ouvert juste après le passage suivant

Code:

<img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" />

en ajoutant juste après ledit passage, cette balise fermante :

Code:

</div>

Enfin, dans votre css, mettez ceci :

Code:

.infos_display {display:none;}
.row1.hover_infos:hover .infos_display {display:block;}

[Walt]

Bonsoir,

Le principe de ce forum étant l'entraide, l'aide apportée sous balise hide n'a pas vocation à exister ici... l'objectif est que ce sujet puisse un jour répondre aux questions d'autres, si besoin.

Cordialement,
Walt

[gigi68]

Bonjour Walt

Oui oui c'est vrai vous avez tout à fais raison , j'ai donc éditer mon msg pour modifie le hide en code
Je m'excuse , mais j'ai fais complètement par habitude .

Passez une très bonne journée
Cordialement Gigi

[petitefeuille]

gigi, Oka.mi,Walt bonjour et merci de vos retours…

je vais m'y mettre tout de suite sur mon forum test…

[petitefeuille]

par contre, je ne peux pas modifier comme vous me le proposez car avec Milouze on a fait pas mal de modifications et je ne voudrais pas détruire à zéro son travail, aussi je vous poste mon template viewtopic_body

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(){
                      _atc.cwait = 0;
                      $('.addthis_button').mouseup(function(){
                          if ($('#at15s').css('display') == 'block') {
                            addthis_close();
                          }
                      });
                    });

                    var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
                    showHiddenMessage = function(id)
                    {
                        try
                        {
                            var regId = parseInt(id, 10);
                            if( isNaN(regId) ) { regId = 0; }
                     
                            if( regId > 0)
                            {
                                $('.post--' + id).toggle(0, function()
                            {
                                if( $(this).is(":visible") )
                                {
                                  $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                                }
                                else
                                {
                                  $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                                }
                            });
                            }
                        }
                        catch(e) { }
                 
                      return false;
                    };

                    //]]>
                    </script>

                    <table width="100%" border="0" cellspacing="2" cellpadding="0">
                      <tr>
                          <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>
                          <td align="left" valign="middle" nowrap="nowrap">
                            <!-- BEGIN switch_twitter_btn -->
                            <span id="twitter_btn" style="margin-left: 6px; ">
                            <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
                            <script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
                            </span>
                            <!-- END switch_twitter_btn -->
                            <!-- BEGIN switch_fb_likebtn -->
                            <span id="fb_likebtn" style="margin-left: 6px; ">
                                <iframe src="https://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
                            </span>
                            <!-- END switch_fb_likebtn -->
                          </td>
                          <td class="nav" 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="bottom" nowrap="nowrap" width="100%">
                            <span class="gensmall bold">
                                <a class="addthis_button" href="https://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
                                <!-- BEGIN switch_plus_menu -->
                                | .
                                <script type="text/javascript">//<![CDATA[
                                  var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
                                  var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
                                  var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
                                  var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
                                  var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
                               
                                  insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
                                //]]>
                                </script>
                                <!-- END switch_plus_menu -->
                            </span>
                          </td>
                      </tr>
                    </table>

                    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;">
                      <tr align="right">
                          <td class="catHead" colspan="3" height="28">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td width="9%" class="noprint"> </td>
                                  <td align="center" class="t-title">
                                      <h1 class="cattitle"> {TOPIC_TITLE}</h1>
                                  </td>
                                  <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
                                </tr>
                            </table>
                          </td>
                      </tr>
                      <tr>
 <td class="row1" colspan="2"><span class="gensmall">{POSTERS_LIST}</span></td>
 </tr>
                      <!-- BEGIN topicpagination -->
                      <tr>
                          <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
                      </tr>
                      <!-- END topicpagination -->
                      {POLL_DISPLAY}
                      <tr>
                          <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
                          <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
                      </tr>
                      <!-- BEGIN postrow -->
                      <!-- BEGIN hidden -->
                      <tr>
                          <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
                      </tr>
                      <!-- END hidden -->
                      <!-- BEGIN displayed -->
                                    <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
                          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                              <center>   
                                <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -50px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                               
                         
                              <strong class="M14_strong">{postrow.displayed.POSTER_NAME}</strong></span></center><br />
                                <span class="postdetails poster-profile">
                                  <center>
{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}                         
<div class="M14_avatar">{postrow.displayed.POSTER_AVATAR}</div></center><br /><br />
                                  <br />
 <div {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">{postrow.displayed.AWARDS}</div>
 <div class="award_more"></div>
 <br>                               
                                  <div align="center"class="M14_ThanksImg"style="display:none;">
                                    <img src="https://i.servimg.com/u/f62/15/86/06/11/coup_d10.png"/></div>   
                                 
                            <!-- BEGIN profile_field -->
        <div class="M14_profil">{postrow.displayed.profile_field.LABEL}
          <span class="M14_content">{postrow.displayed.profile_field.CONTENT}
          {postrow.displayed.profile_field.SEPARATOR}</span>
                                          </div>
        <!-- END profile_field -->
                                {postrow.displayed.POSTER_RPG}
                            </span><br />
                            <div class="test"></div>                           
                            <img src="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
                          </td>
                          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td colspan="2">
<span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: <a class="M14_postdetails"href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a>  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                                  <tr><td colspan="2"valign="top" nowrap="nowrap" class="post-options"><span></span>
{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>
                                                                  <tr>
                                                                                                      <td colspan="2" class="hr">
                                      <hr />
                                  </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}"title="Donner un avis positif" alt="Avis positif"></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" style="display: none;">----</div>
                                            <!-- END switch_no_bar -->
             
                                            <!-- BEGIN switch_vote -->
                                            <div class="vote-button" style="display: none;"><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}" />

                                                    <!-- 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 -->
      <!-- BEGIN switch_likes_active -->
    <div class="fa_like_div">
    <!-- BEGIN switch_like_list -->
    {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
    <!-- END switch_like_list -->
    <!-- BEGIN switch_dislike_list -->
    {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
    <!-- END switch_dislike_list -->
    </div>
    <!-- END switch_likes_active -->                                     

    <div class="M14_Thank_Cont">
    <div><span class="M14_Texte_liste">Le membre suivant remercie</span>
    <span class="M14_ThankUser"></span> pour ce message : <a target="_blank" href="" class="M14_Thank_link"></a><br />
    </div>
    <div class="M14_Thank_list"><div></div></div>
    </div>

                                      </div>
                                      <span class="gensmall M14_edit">{postrow.displayed.EDITED_MESSAGE}</span>
                                  </td>
                                </tr>
                            </table>
 <!-- BEGIN switch_likes_active -->
 <div class="fa_like_div">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"></path></svg>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"></path></svg>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 </div>
 <!-- END switch_likes_active -->                         
                          </td>
                      </tr>
                      <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
                          <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
                            <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
                          </td>
                          <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td valign="middle">
                                      {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
                                  </td>
                                </tr>
                            </table>
                          </td>
                      </tr>
                                        <!-- BEGIN first_post_br -->
                    </table>
                    <br />
                    <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="3" height="28">
                            <span class="genmed">{no_post.L_NO_POST}</span>
                          </td>
                      </tr>
                      <!-- END no_post -->
                      <tr align="right">
                          <td class="catBottom" colspan="3" 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"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <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">{PAGE_NUMBER}</span></td>
                          <!-- BEGIN topicpagination -->
                          <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
                          <!-- END topicpagination -->
                      </tr>
                      <!-- BEGIN switch_user_logged_in -->
                      <!-- BEGIN watchtopic -->
                      <tr>
                          <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
                      </tr>
                      <!-- END watchtopic -->
                      <!-- END switch_user_logged_in -->
                    </table>

                    <!-- BEGIN promot_trafic -->
                    <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
                      <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}">{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}" />
                                      </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>

                          <!-- BEGIN viewtopic_bottom -->
                          <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
                          <!-- END viewtopic_bottom -->

                          <!-- 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} <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 -->
                    <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

[Toryudo]

Bonjour !
J'ai suivi les directives de Oka.mi un peu plus haut, c'est facile, ça n'efface rien des travaux précédemment effectués, et ça fonctionne parfaitement chez moi ! Maintenant que nous avons votre template, je peux vous indiquer les lignes concernées avec plus de précisions :

Vous trouverez :

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">

à la ligne 126 chez vous

Ensuite, la ligne :

Code:

<div {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">{postrow.displayed.AWARDS}</div>

se trouve en position 137 chez vous

Enfin, la ligne :

Code:

<img src="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />

se trouve en position 152.


Vous n'avez qu'à ajouter les éléments indiqués et tout fonctionnera, comme chez moi !
PS : n'hésitez pas à remercier Oka.mi plutôt que moi

[petitefeuille]

bonjour Toryudo, merci et je vais m'en occuper dans la journée ...

[petitefeuille]

alors c'est bien masqué, mais j'aurais voulu si c'était possible de mettre un bouton ou un message style "AFFICHER LE PROFIL" et "MASQUER LE PROFIL" s'il vous plait ...

les images:

[Toryudo]

Un bouton ? Vous ne vouliez pas un hover ?

[petitefeuille]

bé en fait je vais parler français donc masquer les messages avec un "bouton" qui affiche et masque le contenu ...

[Oka.mi]

Bonjour,

Je vous saurais gré de vérifier que les termes techniques que vous employez (ici "hover") correspondent bien à ce que vous souhaitez. Le hover c'est un effet au survol de la souris, donc je réitère ma question plus haut et la question de Toryudo : souhaitez-vous l'effet au survol sur le bouton ou souhaitez vous que l'affichage se fasse par le biais d'un clic ?
C'est important d'être précise dans ce que vous demandez, car en fonction, le code à écrire n'est pas du tout le même et on doit recommencer. C'est embêtant autant pour nous que pour vous.

[petitefeuille]

je suis désolée et confuse ...

souhaitez vous que l'affichage se fasse par le biais d'un clic ?

si c'est possible oui j'aimerais bien .....

[Oka.mi]

On va commencer par enlever la class "hover_infos" qui ne servira pas (ligne 126).
Plus loin, juste avant ce passage ajouté précédemment

Code:

<div class="infos_display">

mettez ceci

Code:

<button class="showpanel">Afficher le profil</button>

Si vous avez suivi les instructions de mon message plus haut, il n'y a pas d'autres modifications à faire, si non, je vous invite à commencer par les modifications en question.

Dans le css, remplacez le code donné par

Code:

button.showpanel {display: flex; margin: auto;}
.infos_display {display:none;}

Enfin, créez un JavaScript, cochez "sur les sujets", et mettez

Code:

$(function(){
    $('button.showpanel').click(function(){
        var $bouton = $(this);
        $(this).next('.infos_display').slideToggle('slow', function() {
            if ($(this).is(':visible')) {
                $bouton.text('Cacher le profil');
            } else {
                $bouton.text('Afficher le profil');
            }
        });
    });
});

Validez et vous devriez obtenir le rendu souhaité.

[petitefeuille]

merci pour le temps et le travail , je vais m'en occuper cette après midi ...

[petitefeuille]

je viens de le faire, mais j'ai un souci, on voit bien le bouton, mais les inscriptions dessous reste aussi il ne sont pas masqués:


mon template modifié :

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(){
                      _atc.cwait = 0;
                      $('.addthis_button').mouseup(function(){
                          if ($('#at15s').css('display') == 'block') {
                            addthis_close();
                          }
                      });
                    });

                    var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
                    showHiddenMessage = function(id)
                    {
                        try
                        {
                            var regId = parseInt(id, 10);
                            if( isNaN(regId) ) { regId = 0; }
                     
                            if( regId > 0)
                            {
                                $('.post--' + id).toggle(0, function()
                            {
                                if( $(this).is(":visible") )
                                {
                                  $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                                }
                                else
                                {
                                  $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                                }
                            });
                            }
                        }
                        catch(e) { }
                 
                      return false;
                    };

                    //]]>
                    </script>

                    <table width="100%" border="0" cellspacing="2" cellpadding="0">
                      <tr>
                          <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>
                          <td align="left" valign="middle" nowrap="nowrap">
                            <!-- BEGIN switch_twitter_btn -->
                            <span id="twitter_btn" style="margin-left: 6px; ">
                            <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
                            <script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
                            </span>
                            <!-- END switch_twitter_btn -->
                            <!-- BEGIN switch_fb_likebtn -->
                            <span id="fb_likebtn" style="margin-left: 6px; ">
                                <iframe src="https://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
                            </span>
                            <!-- END switch_fb_likebtn -->
                          </td>
                          <td class="nav" 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="bottom" nowrap="nowrap" width="100%">
                            <span class="gensmall bold">
                                <a class="addthis_button" href="https://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
                                <!-- BEGIN switch_plus_menu -->
                                | .
                                <script type="text/javascript">//<![CDATA[
                                  var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
                                  var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
                                  var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
                                  var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
                                  var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
                               
                                  insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
                                //]]>
                                </script>
                                <!-- END switch_plus_menu -->
                            </span>
                          </td>
                      </tr>
                    </table>

                    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;">
                      <tr align="right">
                          <td class="catHead" colspan="3" height="28">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td width="9%" class="noprint"> </td>
                                  <td align="center" class="t-title">
                                      <h1 class="cattitle"> {TOPIC_TITLE}</h1>
                                  </td>
                                  <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
                                </tr>
                            </table>
                          </td>
                      </tr>
                      <tr>
 <td class="row1" colspan="2"><span class="gensmall">{POSTERS_LIST}</span></td>
 </tr>
                      <!-- BEGIN topicpagination -->
                      <tr>
                          <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
                      </tr>
                      <!-- END topicpagination -->
                      {POLL_DISPLAY}
                      <tr>
                          <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
                          <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
                      </tr>
                      <!-- BEGIN postrow -->
                      <!-- BEGIN hidden -->
                      <tr>
                          <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
                      </tr>
                      <!-- END hidden -->
                      <!-- BEGIN displayed -->
                                    <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
                          <td class="{postrow.displayed.ROW_CLASS} hover_infos"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                              <center>   
                                <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -50px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                               
                         
                              <strong class="M14_strong">{postrow.displayed.POSTER_NAME}</strong></span></center><br />
                                <span class="postdetails poster-profile">
                                  <center>
{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}                         
<div class="M14_avatar">{postrow.displayed.POSTER_AVATAR}</div></center><br /><br />
                                  <br />
                                  <button class="showpanel">Afficher le profil</button>
 <div {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">{postrow.displayed.AWARDS}</div>
 <div class="award_more"></div>
 <br>                               
                                  <div align="center"class="M14_ThanksImg"style="display:none;">
                                    <img src="https://i.servimg.com/u/f62/15/86/06/11/coup_d10.png"/></div>   
                                 
                            <!-- BEGIN profile_field -->
        <div class="M14_profil">{postrow.displayed.profile_field.LABEL}
          <span class="M14_content">{postrow.displayed.profile_field.CONTENT}
          {postrow.displayed.profile_field.SEPARATOR}</span>
                                          </div>
        <!-- END profile_field -->
                                {postrow.displayed.POSTER_RPG}
                            </span><br />
                            <div class="test"></div>                           
                            <img src="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
                                    </div>
                          </td>
                          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td colspan="2">
<span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: <a class="M14_postdetails"href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a>  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                                  <tr><td colspan="2"valign="top" nowrap="nowrap" class="post-options"><span></span>
{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>
                                                                  <tr>
                                                                                                      <td colspan="2" class="hr">
                                      <hr />
                                  </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}"title="Donner un avis positif" alt="Avis positif"></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" style="display: none;">----</div>
                                            <!-- END switch_no_bar -->
             
                                            <!-- BEGIN switch_vote -->
                                            <div class="vote-button" style="display: none;"><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}" />

                                                    <!-- 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 -->
      <!-- BEGIN switch_likes_active -->
    <div class="fa_like_div">
    <!-- BEGIN switch_like_list -->
    {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
    <!-- END switch_like_list -->
    <!-- BEGIN switch_dislike_list -->
    {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
    <!-- END switch_dislike_list -->
    </div>
    <!-- END switch_likes_active -->                                     

    <div class="M14_Thank_Cont">
    <div><span class="M14_Texte_liste">Le membre suivant remercie</span>
    <span class="M14_ThankUser"></span> pour ce message : <a target="_blank" href="" class="M14_Thank_link"></a><br />
    </div>
    <div class="M14_Thank_list"><div></div></div>
    </div>

                                      </div>
                                      <span class="gensmall M14_edit">{postrow.displayed.EDITED_MESSAGE}</span>
                                  </td>
                                </tr>
                            </table>
 <!-- BEGIN switch_likes_active -->
 <div class="fa_like_div">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"></path></svg>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"></path></svg>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 </div>
 <!-- END switch_likes_active -->                         
                          </td>
                      </tr>
                      <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
                          <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
                            <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
                          </td>
                          <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td valign="middle">
                                      {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
                                  </td>
                                </tr>
                            </table>
                          </td>
                      </tr>
                                        <!-- BEGIN first_post_br -->
                    </table>
                    <br />
                    <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="3" height="28">
                            <span class="genmed">{no_post.L_NO_POST}</span>
                          </td>
                      </tr>
                      <!-- END no_post -->
                      <tr align="right">
                          <td class="catBottom" colspan="3" 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"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <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">{PAGE_NUMBER}</span></td>
                          <!-- BEGIN topicpagination -->
                          <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
                          <!-- END topicpagination -->
                      </tr>
                      <!-- BEGIN switch_user_logged_in -->
                      <!-- BEGIN watchtopic -->
                      <tr>
                          <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
                      </tr>
                      <!-- END watchtopic -->
                      <!-- END switch_user_logged_in -->
                    </table>

                    <!-- BEGIN promot_trafic -->
                    <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
                      <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}">{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}" />
                                      </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>

                          <!-- BEGIN viewtopic_bottom -->
                          <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
                          <!-- END viewtopic_bottom -->

                          <!-- 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} <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 -->
                    <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

[Oka.mi]

Vous avez oublié de

1. retirer le hover_infos
   
2. mettre le

   Code:

   <div class="infos_display">

   juste après le

   Code:

   <button class="showpanel">Afficher le profil</button>

3. ajouter le css donné.
   
4. ajouter le JavaScript donné.

En me relisant, je pense qu'on s'est mal compris sur ce passage :

Si vous avez suivi les instructions de mon message plus haut, il n'y a pas d'autres modifications à faire, si non, je vous invite à commencer par les modifications en question.

Je parlais des modifications dans le template. Les modifications mentionnées dans la suite du message doivent bien sûr être effectuées.

[petitefeuille]

Oka.mi, ça fonctionne merci beaucoup !

serait-il possible de faire les coins arrondis, un peu plus grand le rectangle, et mettre une couleur de fond [#FAFAFA] , la bordure [#0474CC] et choisir la couleur de l'écriture qui serait noir ou autre ?

[Oka.mi]

Dans le css donné, il y a une ligne button.showpanel, c'est ce qui détermine l'apparence de votre bouton. Vous pouvez donc mettre ceci pour avoir le rendu souhaité :

Code:

button.showpanel {
    display: flex;
    margin: auto;
    background: #FAFAFA;
    border: 1px solid #0474CC;
    color: #000;
    border-radius: 10px;
    padding: 5px 10px;
}

Documentations :
https://developer.mozilla.org/fr/docs/Web/CSS/border
https://developer.mozilla.org/fr/docs/Web/CSS/border-radius
https://developer.mozilla.org/fr/docs/Web/CSS/padding

[petitefeuille]

c'est un super travail et quelle patience ... merciiiiiiiiii vraiment

puis avec vos liens j'ai modifié le CSS à mon goût

voilà le résultat :

[petitefeuille]

bonne soirée à vous tous

[Oka.mi]

De rien, bonne soirée à vous également.