Silence

Au survol de l'avatar, les informations du profil s'affichent



N'oubliez pas de me créditer si vous utilisez le code sur votre forum !
Le code de base est conçu pour un avatar en 200x400 pixels, mais c'est tout à fait modifiable.

Codes et explications

phpBB2

Dans votre panneau d'administration, Affichage > Templates > Général > Overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :

Code:

<link href='http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto' rel='stylesheet' type='text/css' />

Dans votre panneau d'administration, Affichage > Templates > Général > viewtopic_body, remplacez l'intégralité du template par le suivant :

Code:

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

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

//]]>
</script>

<table width="100%" border="0" cellspacing="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 class="nav" valign="middle" width="100%">
 <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}
            </span>
 </td>
 <td align="right" valign="bottom" nowrap="nowrap" width="100%">
 <!-- BEGIN switch_twitter_btn -->
 <span id="twitter_btn" style="margin-left: 6px; ">
                <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
 </span>
 <!-- END switch_twitter_btn -->
 
 <!-- BEGIN switch_fb_likebtn -->
 <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <div class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
 <!-- END switch_fb_likebtn -->
 
 <span class="gensmall bold">
 <a class="addthis_button" href="#">{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 width="100%" border="0" cellspacing="0" cellpadding="0" >
  <tr><td>
 <h1 class="post-title">{TOPIC_TITLE}</h1>
    </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}
 <!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <tr>
 <td class="postdetails" colspan="2" 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 {postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
   <div class="silence">
                  <div class="post-top">
                    <div class="post-name"><a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a>{postrow.displayed.POSTER_NAME}</div>
                    <div class="rank">{postrow.displayed.POSTER_RANK}</div>
                    <div class="post-btn">
                    <div class="btn-quote">{postrow.displayed.QUOTE_IMG} </div>
                      <div class="btn-edit">{postrow.displayed.EDIT_IMG} </div>
                        <div class="btn-delete">{postrow.displayed.DELETE_IMG} </div>
                          <div class="btn-ip">{postrow.displayed.IP_IMG}</div>
                            <div class="btn-report">{postrow.displayed.REPORT_IMG}</div>
                    </div>
   </div>
                  <div class="post-left">
                    <div class="post-profil">
                    <div class="profil-avatar">
                      {postrow.displayed.POSTER_AVATAR}
                    </div>
                    <div class="profil-hover">
                      <div class="profil-hover-content">
 <!-- BEGIN profile_field -->
                      <div>
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                      </div>
 <!-- END profile_field -->
                      </div>
                    </div>
                    </div>
 {postrow.displayed.POSTER_RPG}

                  </div>
                  <div class="post-right">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
                                  <td><span class="postdetails"><i class="ion-compose"></i> {postrow.displayed.POST_SUBJECT}   <i class="ion-clock"></i> {postrow.displayed.POST_DATE}</span></td>
 <td valign="top" nowrap="nowrap" class="post-options">
 </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>
                  </div>
                  
 
                  <div class="post-bottom">
                    <div class="btn-profile"><span></span>{postrow.displayed.PROFILE_IMG}</div>
                      <div class="btn-pm"><span></span>{postrow.displayed.PM_IMG}</div>
                        <div class="btn-mail"><span></span>{postrow.displayed.EMAIL_IMG}</div>
                          <div class="btn-link"><!-- BEGIN contact_field --><span></span>{postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> </div>
                            <div class="online">{postrow.displayed.ONLINE_IMG}</div>
                  
                  </div>
   </div>
 
 </td>
 </tr>
 <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 
 <td valign="middle">
 </td>
 
 </tr>
 <!-- BEGIN first_post_br -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- END first_post_br -->
 <!-- END displayed -->
 <!-- END postrow -->
 <!-- BEGIN no_post -->
 <tr align="center">
 <td class="row1" colspan="2" height="28">
 <span class="genmed">{no_post.L_NO_POST}</span>
 </td>
 </tr>
 <!-- END no_post -->
 <tr align="right">
 <td class="catBottom" colspan="2" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="9%" class="noprint"> </td>
 <td align="center" class="t-title"><a name="bottomtitle"></a><div class="cattitle">{TOPIC_TITLE}</div></td>
 <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><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}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
 <!-- END link -->
 </td>
 </tr>
</table>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
 <tbody>
 <tr>
 <td class="catBottom">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
 <tr>
 <td valign="top">
 <div class="cattitle"> {L_FORUM_RULES}</div>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 <tr>
 <td class="row1 clearfix">
 <table>
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" alt="" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules postbody">
 {RULE_MSG}
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
</table>
<!-- END switch_forum_rules -->

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td class="row2" colspan="2" align="center" style="padding:0px">
 <!-- BEGIN switch_user_logged_in -->
 <a name="quickreply"></a>
 {QUICK_REPLY_FORM}<br />
 <!-- END switch_user_logged_in -->
 </td>
 </tr>
 <tr>
 <td style="margin:0; padding: 0;" colspan="2">
 <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
 <tbody>
 <!-- BEGIN show_permissions -->
 <tr>
 <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
 <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
 </tr>
 <!-- END show_permissions -->
 <tr>
 <td class="catBottom" colspan="2" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
 <!-- BEGIN show_permissions -->
 <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
 <!-- END show_permissions -->
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 <tr>
 <td style="margin:0; padding: 0;" colspan="2">
 <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
 <tbody>
 <tr>
 <td class="catBottom" colspan="2" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
 <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
 <tr>
 <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
 <span class="nav">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>  
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
 <!-- END switch_user_authreply -->
 </span>
 </td>

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

 <!-- BEGIN moderation_panel -->
 <td align="center">
 <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
 </td>
 <td align="center" width="250">
 <span class="gensmall"> </span>
 </td>
 <!-- END moderation_panel -->
 </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
 <tr>
 <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
 <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
 <input type="hidden" name="t" value="{TOPIC_ID}" />

 <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
 <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

 <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <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="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>


Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:

/*PERSONNALISATION AFFICHAGE DES MESSAGES PAR AWFUL*/
.silence {
    display: flex;
    flex-wrap: wrap;
}
/*Titre du sujet*/
 .post-title {
     text-align: center;
     font-family: "Montserrat", sans-serif;
     font-size: 35px;
     color: #efefef;
     margin: 0;
     padding: 10px 0 30px;
     letter-spacing: -1px;
     text-shadow: -1px 1px 0 #ccc;
}
/*Corps du message*/
 .post {
     background: #efefef;
}
 .post-left {
     width: 250px;
}
 .post-right {
     flex: 1;
}
/*Boutons en bas de post */
 .post-bottom {
     flex: 100%;
     position: relative;
}
 .post-bottom div {
     display: inline-block;
     margin: 10px 15px 10px 0;
}
 .post-bottom div:first-child {
     display: inline-block;
     margin-left: 15px;
}
 .post-bottom div a {
     position: relative;
     text-decoration: none !important;
}
 .post-bottom div a:after {
     content: "Profil";
     text-transform: uppercase;
     font-family: "Roboto", sans-serif;
     font-size: 8px;
     letter-spacing: 1px;
     border: 1px solid #ccc;
     padding: 0px 8px;
     color: #9f9f9f;
     height: 16px;
     line-height: 16px;
     display: inline-block;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
 .post-bottom div a:hover:after {
     border: 1px solid #8d8d8d;
     color: #595959;
}
 .post-bottom .btn-pm a:after {
     content: "Mp";
}
 .post-bottom .btn-mail a:after {
     content: "Mail";
}
 .post-bottom .btn-link a:after {
     content: "click";
}
/*Apparence du "en ligne" */
.post-bottom .online:empty {
    display: none;
}
 .online img {
     display: none;
}
 .online:before {
     content: "\f2a9";
     position: absolute;
     right: 10px;
     bottom: 10px;
     font-family: Ionicons;
     font-size: 40px;
     color: #d2d2d2;
}
/*Haut du post*/
 .post-top {
flex: 100%;
     height: 80px;
     background: #ccc;
     border-bottom: 3px solid #9f9f9f;
     position: relative;
}
/*Rang*/
 .rank {
     position: relative;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-family: "Roboto", sans-serif;
     font-size: 9px;
     left: 30px;
     top: 45px;
}
/*Pseudo*/
 .post-name {
     font-family: "Montserrat", sans-serif;
     font-size: 30px;
     position: absolute;
     left: 30px;
     top: 10px;
}
/*Boutons éditer, citer, etc.*/
 .post-btn {
     text-align: right;
     position: absolute;
     right: 5px;
     bottom: 15px;
}
 .post-btn img, .post-bottom img {
     display: none;
}
 .post-btn div {
     display: inline-block;
     margin: 0 5px;
}
 .post-btn div a:before {
     content: "\f11d";
     display: inline-block;
     height: 35px;
     width: 35px;
     border: 1px solid #adadad;
     border-radius: 50%;
     font-family: Ionicons;
     text-align: center;
     line-height: 35px;
     font-size: 20px;
     color: #818181;
     background: #d7d7d7;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
 .post-btn div a:hover:before {
     background: #f5f5f5;
}
 .post-btn .btn-edit a:before {
     content: "\f2bf";
}
 .post-btn .btn-delete a:before {
     content: "\f252";
}
 .post-btn .btn-ip a:before {
     content: "\f149";
}
 .post-btn .btn-report a:before {
     content: "\f100";
}
/*Avatar*/
 .post-profil {
     width: 200px;
     margin: 25px auto;
     position: relative;
     overflow: hidden;
}
/*Infos du profil au survol*/
 .profil-hover {
     height: 400px;
     width: 200px;
     position: absolute;
     background: #d7d7d7;
     top: 100%;
     text-align: center;
     box-sizing: border-box;
     padding: 5px;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
 .post-profil:hover .profil-hover {
     top: 0;
}
 .profil-hover-content {
     height: 100%;
     background: #fff;
     overflow: auto;
     font-family: "Roboto", sans-serif;
     font-size: 11px;
}
 .profil-hover-content div {
     margin: 5px 0;
}
 .profil-hover-content div .label {
     display: block;
     text-transform: uppercase;
     font-size: 8px;
     letter-spacing: 1px;
}
 .profil-hover-content div .label span {
     color: #9F9F9F!important;
}
 .postdetails {
     font-family: "Montserrat", sans-serif;
     text-transform: uppercase;
     font-size: 7px;
     letter-spacing: 1px;
     color: #999;
     margin-top: 5px;
     display: inline-block;
}
 .postdetails i {
     font-size: 14px;
     color: #424242;
     vertical-align: text-bottom;
}


En dessous du CSS, à "Optimiser votre CSS", cochez "non".

phpBB3

Dans votre panneau d'administration, Affichage > Templates > Général > Overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :

Code:

<link href='http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto' rel='stylesheet' type='text/css' />

Dans votre panneau d'administration, Affichage > Templates > Général > viewtopic_body, remplacez l'intégralité du template par le suivant :

Code:

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

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

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }

        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
 {
 if( $(this).is(":visible") )
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 }
 else
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    }
    catch(e) { }

 return false;
};

//]]>
</script>

<h1 class="post-title">
 <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</h1>
<div class="topic-actions">
 <div class="buttons">

 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   
 <!-- END switch_user_authpost -->

 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
 <!-- END switch_user_authreply -->
 </div>

 <div class="pathname-box">
 <p>
            <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
            <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
            {NAV_CAT_DESC}
        </p>
 </div>

 <p class="right">
        <!-- BEGIN switch_twitter_btn -->
        <span>
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </span>
        <!-- END switch_twitter_btn -->
 <!-- BEGIN switch_fb_likebtn -->
 <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
 <!-- END switch_fb_likebtn -->
 </p>

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

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->
<p class="left-box">
    <!-- BEGIN switch_isconnect -->
    <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> 
    <!-- END switch_isconnect -->
    <a href="#bottom">{L_GOTO_DOWN}</a>
</p>
<div class="clear"></div>
{POLL_DISPLAY}

<!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <div class="post {postrow.hidden.ROW_COUNT}">
 <div class="inner">
 <span class="corners-top"><span></span></span>
 <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
 <div class="clear"></div>
 <span class="corners-bottom"><span></span></span>
 </div>
 </div>
 <!-- END hidden -->
 <!-- BEGIN displayed -->
 <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
 
                  <div class="inner">
                     <div class="post-top">
                    <div class="post-name"><a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a>{postrow.displayed.POSTER_NAME}</div>
                    <div class="rank">{postrow.displayed.POSTER_RANK}</div>
                    <div class="post-btn">
                    <div class="btn-quote">{postrow.displayed.QUOTE_IMG} </div>
                      <div class="btn-edit">{postrow.displayed.EDIT_IMG} </div>
                        <div class="btn-delete">{postrow.displayed.DELETE_IMG} </div>
                          <div class="btn-ip">{postrow.displayed.IP_IMG}</div>
                            <div class="btn-report">{postrow.displayed.REPORT_IMG}</div>
                    </div>
   </div>
                    <div class="post-left">
                    <div class="post-profil">
                    <div class="profil-avatar">
                      {postrow.displayed.POSTER_AVATAR}
                    </div>
                    <div class="profil-hover">
                      <div class="profil-hover-content">
 <!-- BEGIN profile_field -->
                      <div>
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                      </div>
 <!-- END profile_field -->
                      </div>
                    </div>
                    </div>
 {postrow.displayed.POSTER_RPG}

                  </div>
                    <div class="post-right">
 <div class="postbody">

 <div class="postdetails"><i class="ion-compose"></i> {postrow.displayed.POST_SUBJECT}   <i class="ion-clock"></i> {postrow.displayed.POST_DATE}</div>

 

 <!-- 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 style="display:none"></div>
 <div class="content clearfix">
 <div>{postrow.displayed.MESSAGE}</div>
 <!-- BEGIN switch_attachments -->
 <dl class="attachbox">
 <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
 <dd class="attachments">
 <!-- BEGIN switch_post_attachments -->
 <dl class="file clearfix">
 <dt>
 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
 </dt>
 <dd>
 <!-- BEGIN switch_dl_att -->
 <span><a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}</span>
 <!-- END switch_dl_att -->

 <!-- BEGIN switch_no_dl_att -->
 <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}</span>
 <!-- END switch_no_dl_att -->

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

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

 <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
 </dd>
 </dl>
 <!-- END switch_post_attachments -->
 </dd>
 </dl>
 <!-- END switch_attachments -->
 </div>
 {postrow.displayed.EDITED_MESSAGE}
 <!-- BEGIN switch_signature -->
 <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->
 </div>
                    </div>

 

 

 
                  <div class="post-bottom">
                    <div class="btn-profile"><span></span>{postrow.displayed.PROFILE_IMG}</div>
                      <div class="btn-pm"><span></span>{postrow.displayed.PM_IMG}</div>
                        <div class="btn-mail"><span></span>{postrow.displayed.EMAIL_IMG}</div>
                          <div class="btn-link"><!-- BEGIN contact_field --><span></span>{postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> </div>
                            <div class="online">{postrow.displayed.ONLINE_IMG}</div>
                  
                  </div>
 </div>
 </div>
 <!-- BEGIN first_post_br -->
 <hr id="first-post-br" />
 <!-- END first_post_br -->
 <!-- END displayed -->
<!-- END postrow -->

<a name="bottomtitle"></a>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->

<p class="left-box">
    <!-- BEGIN switch_isconnect -->
    <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> 
    <!-- END switch_isconnect -->
    <a href="#top">{L_BACK_TO_TOP}</a>
</p>

<div class="clear"></div>

<div class="noprint">
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<p class="right">{S_WATCH_TOPIC}</p>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</div>

<!-- BEGIN promot_trafic -->
<div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em">
 <span class="corners-top"><span></span></span>
 <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></span>
 <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
 <span class="corners-bottom"><span></span></span>
</div>
<div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em">
 <span class="corners-top"><span></span></span>
 <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></span>
 <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
 <div class="clear"></div>
 <div>
 <!-- BEGIN link -->
 » <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
 <!-- END link -->
 </div>
 <span class="corners-bottom"><span></span></span>
</div>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
 <span class="corners-top"><span></span></span>
 <div class="h3"> {L_FORUM_RULES}</div>
 <div class="clear"></div>
 <table class="postbody">
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" alt="" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules content">
 {RULE_MSG}
 </td>
 </tr>
 </table>
 <span class="corners-bottom"><span></span></span>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<hr />

<div class="topic-actions">
 <div class="buttons">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   
 <!-- END switch_user_authpost -->

 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
 <!-- END switch_user_authreply -->
 </div>

 <div class="pathname-box">
 <p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
 </div>

 <div class="pagination">
 {PAGE_NUMBER}
 </div>
</div>
<div class="clear"></div>

<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<fieldset class="jumpbox">
 <label>{L_JUMP_TO}: </label>
 {S_JUMPBOX_SELECT} 
 <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
<fieldset class="quickmod">
 <input type="hidden" name="t" value="{TOPIC_ID}" />

 <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
 <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
 <label>{L_MOD_TOOLS}: </label>
 {S_SELECT_MOD}&nbsp;
 <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<div class="clear"></div>
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN show_permissions -->
 <div class="h3">{L_TABS_PERMISSIONS}</div>
 {S_AUTH_LIST}
<!-- END show_permissions -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:

/*PERSONNALISATION AFFICHAGE DES MESSAGES PAR AWFUL*/
/*Titre du sujet*/
 .post-title {
     text-align: center;
     font-family: "Montserrat", sans-serif;
     font-size: 35px;
     color: #efefef;
     margin: 0;
     padding: 10px 0 30px;
     letter-spacing: -1px;
     text-shadow: -1px 1px 0 #ccc;
}
/*Corps du message*/
 .post {
     background: #efefef;
  padding: 0;
}
.post .inner {
    display: flex;
    flex-wrap: wrap;
}
 .post-left {
     width: 250px;
}
.post-right {
    flex: 1;
}
/*Boutons en bas de post */
 .post-bottom {
     flex: 100%;
     position: relative;
}
 .post-bottom div {
     display: inline-block;
     margin: 10px 15px 10px 0;
}
 .post-bottom div:first-child {
     display: inline-block;
     margin-left: 15px;
}
 .post-bottom div a {
     position: relative;
     text-decoration: none !important;
}
 .post-bottom div a:after {
     content: "Profil";
     text-transform: uppercase;
     font-family: "Roboto", sans-serif;
     font-size: 8px;
     letter-spacing: 1px;
     border: 1px solid #ccc;
     padding: 0px 8px;
     color: #9f9f9f;
     height: 16px;
     line-height: 16px;
     display: inline-block;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
 .post-bottom div a:hover:after {
     border: 1px solid #8d8d8d;
     color: #595959;
}
 .post-bottom .btn-pm a:after {
     content: "Mp";
}
 .post-bottom .btn-mail a:after {
     content: "Mail";
}
 .post-bottom .btn-link a:after {
     content: "click";
}
/*Apparence du "en ligne" */

 .online:before {
     content: "\f2a9";
     position: absolute;
     right: 10px;
     bottom: 10px;
     font-family: Ionicons;
     font-size: 40px;
     color: #d2d2d2;
}
/*Haut du post*/
 .post-top {
     height: 80px;
     background: #ccc;
     border-bottom: 3px solid #9f9f9f;
     position: relative;
  flex: 100%;
}
/*Rang*/
 .rank {
     position: relative;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-family: "Roboto", sans-serif;
     font-size: 9px;
     left: 30px;
     top: 45px;
}
/*Pseudo*/
 .post-name {
     font-family: "Montserrat", sans-serif;
     font-size: 30px;
     position: absolute;
     left: 30px;
     top: 10px;
}
/*Boutons éditer, citer, etc.*/
 .post-btn {
     text-align: right;
     position: absolute;
     right: 5px;
     bottom: 15px;
}
 .post-btn img, .post-bottom img {
     display: none;
}
 .post-btn div {
     display: inline-block;
     margin: 0 5px;
}
 .post-btn div a:before {
     content: "\f11d";
     display: inline-block;
     height: 35px;
     width: 35px;
     border: 1px solid #adadad;
     border-radius: 50%;
     font-family: Ionicons;
     text-align: center;
     line-height: 35px;
     font-size: 20px;
     color: #818181;
     background: #d7d7d7;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
 .post-btn div a:hover:before {
     background: #f5f5f5;
}
 .post-btn .btn-edit a:before {
     content: "\f2bf";
}
 .post-btn .btn-delete a:before {
     content: "\f252";
}
 .post-btn .btn-ip a:before {
     content: "\f149";
}
 .post-btn .btn-report a:before {
     content: "\f100";
}
/*Avatar*/
 .post-profil {
     width: 200px;
     margin: 25px auto;
     position: relative;
     overflow: hidden;
}
/*Infos du profil au survol*/
 .profil-hover {
     height: 400px;
     width: 200px;
     position: absolute;
     background: #d7d7d7;
     top: 100%;
     text-align: center;
     box-sizing: border-box;
     padding: 5px;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
 .post-profil:hover .profil-hover {
     top: 0;
}
 .profil-hover-content {
     height: 100%;
     background: #fff;
     overflow: auto;
     font-family: "Roboto", sans-serif;
     font-size: 11px;
}
 .profil-hover-content div {
     margin: 5px 0;
}
 .profil-hover-content div .label {
     display: block;
     text-transform: uppercase;
     font-size: 8px;
     letter-spacing: 1px;
}
 .profil-hover-content div .label span {
     color: #9F9F9F!important;
}
 .postdetails {
     font-family: "Montserrat", sans-serif;
     text-transform: uppercase;
     font-size: 7px;
     letter-spacing: 1px;
     color: #999;
     margin-top: 5px;
}
 .postdetails i {
     font-size: 14px;
     color: #424242;
     vertical-align: text-bottom;
}

Bonsoir !

Je cherche à utiliser ce code avec des avatars 250*350 px. Problème, ça n'a pas l'air de marcher. Est-ce parce que mon forum est trop petit (850 px) ? Pour information, j'ai utilisé le codage complet de votre LS index (et je n'ai rien d'autre en terme de codage sur le forum).

Merci d'avance pour votre éclairage ! :)

Bonjour !

Tout d'abord, je tenais à vous dire que j'aime beaucoup ce que vous faites !
Ensuite, je me demandais si par hasard, vous aviez la version de ce code pour modernbb ? :)

Bonjour Anju,

Je n'ai pas codé de version ModernBB, mais je note ça, la conversion ne devrait pas me prendre trop de temps c:

Bonjour

Je ne sais pas si je ne vois pas clair ou quoi, j'ai voulu prendre ce codage mais les boutons éditer, citer etc...Ne s'affichent pas...Pouvez-vous m'aider ? merci !

Bonjour,
Tous d'abord, merci pour vos codes, ils sont super beau !

j'ai un petit soucis avec le code. Le pseudo ne s'affiche pas, et je n'ai aucune idée de pourquoi.

Bonjour Awful, déjà un grand merci pour tes LS magnifiques qui sont extrêmement utiles

J'ai un très très très TRÈS léger soucis avec ce LS (que j'aime beaucoup au passage) et que je pense savoir comment régler, mais je ne trouve pas exactement le moyen de le faire. Comme tu peux le voir sur le screen ci-dessous, une bande indésirable se pose à droite du corps de texte dans un message. Après manipulation, j'ai constaté que les messages d'édition (Dernière édition par intel, le tel jour à telle heure, tel nombre de fois) se plaçait à cet endroit. J'ai tenté de trouver la partie concernée dans le template mais je ne trouve pas à quoi cela pourrait correspondre... (à moins que ça ne soit absolument pas ça, à mon plus grand désespoir). Si tu as la réponse ou un rectification, je suis preneuse !

Ce forum est en phpbb3.

Screen:

En attendant patiemment ta réponse, à bientôt

Merci pour les codes, ils sont très utiles !
J'ai le même souci que Lu', à savoir une bande indésirable se pose à droite du corps de texte dans un message. Quand on met place le profil à droite, la bande est à droite et le profil reste à gauche. Si on place le profil à gauche, le profil reste effectivement à gauche, et la bande blanche se déplace également à gauche pour faire une marge impossible à enlever.

Spoiler:

Forum également en phpbb3

A très vite !

Salut Lily ! Je suis rassurée de ne pas être la seule à avoir eu ce problème
Et en effet j'étais un peu à côté de la plaque, c'était bien dû à l'option d'affichage du profil droite/gauche qui est propre au phpBB3 (et pas au 2) à ce que j'ai vu, du coup le problème est souvent récalcitrant.

Pour ma part le bug n'est plus d'actualité, on a simplement préféré tout repasser en phpbb2 et le problème a été réglé (en plus d'avoir permis la correction d'autres petits bugs du forum au passage, c'est beau la magie du codage). Puisque c'est un changement de version, deux-trois bricoles changent mais c'est minime. C'est en tout cas l'une des solutions pour enlever ce soucis...

Bon courage !