Profil & Message DarkPurple - ModernBB - Lyxiae

Salutatousc'estLyxiaeonseretrouveaujourd'huipourunnouveauLS

Ok trêve de plaisanteries, voici un code d'affichage des messages assez simple avec le profil sur la gauche !

Il y a quatre variantes de tailles d'avatars possibles, d'où les quatre CSS, prenez simplement celui qui vous conviendra. Les options sont 200*320; 200*400, 250*350 et 250*400. Les couleurs sont évidemment modifiables selon votre goût, elles sont toutes accessibles via le CSS. (Exception faite de la couleur du rang qui prendra celle du groupe du compte).

Les boutons des champs de contact sont échangés pour des icônes Honeybee, il vous faudra procéder à une petite manip via javascript mais tout sera expliqué, ne vous en faites pas !

Voici tout d'abord l'aperçu de la bête (avec un avatar 200*320) :

Spoiler:

La largeur s'adaptera automatiquement à celle du corps de votre forum.

Tout d'abord: le lien pour les icônes Honeybee et des polices à insérer entre les balises head du template overall_header :

Code:

<link href="https://fonts.googleapis.com/css?family=Muli:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i|Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

HTML à placer dans le template viewtopic_body (remplacer la totalité) :

Code:

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

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

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

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

 return false;
};

//]]>
</script>

<div class="sub-header">
 <div class="sub-header-info">
 <h1 class="page-title">
 <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
 </h1>
 <div class="sub-header-path">
 <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
 {NAV_CAT_DESC}
 </div>
 </div>

 <div class="sub-header-buttons">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="ion-edit button1">{L_POST_NEW_TOPIC}</a>
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}" class="ion-reply button1">{L_POST_REPLY_TOPIC}</a>
 <!-- END switch_user_authreply -->
 </div>
</div>

<div class="topic-actions">
 <!-- BEGIN topicpagination -->
 <div class="pagination">
 {PAGINATION}
 </div>
 <!-- END topicpagination -->

 <div class="topic-actions-buttons">
 <!-- BEGIN switch_twitter_btn -->
 <span>
 <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
 </span>
 <!-- END switch_twitter_btn -->

 <!-- BEGIN switch_fb_likebtn -->
 <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
 <!-- END switch_fb_likebtn -->

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

<div class="quick-nav-topics">
    <!-- BEGIN switch_isconnect -->
 <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
    <!-- END switch_isconnect -->
    <a href="#bottom">{L_GOTO_DOWN}</a>
    <!-- BEGIN switch_isconnect -->
 <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
    <!-- END switch_isconnect -->
</div>

{POLL_DISPLAY}

<!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <div class="post {postrow.hidden.ROW_COUNT}">
 <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
 </div>
 <!-- END hidden -->
 <!-- BEGIN displayed -->
<div class="mesPost" id="{postrow.displayed.U_POST_ID}">
  <div class="mesTop">
    <div class="mesCont">
     {postrow.displayed.PROFILE_IMG}
      {postrow.displayed.PM_IMG}
      <!-- BEGIN contact_field -->
 {postrow.displayed.contact_field.CONTENT}
 <!-- END contact_field -->
    </div>
    <div class="mesTopR">
      <div class="mesRang"><div class="mesPseudo">{postrow.displayed.POSTER_NAME}</div>{postrow.displayed.POSTER_RANK_NEW}</div> <script>$( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color");
      $(this).closest('.mesRang').css("color", color);});});</script>
      <div class="mesPseudo">{postrow.displayed.POSTER_NAME}</div>
      <div class="mesActions">
<div class="profile-icons">
        <a href="{postrow.displayed.QUOTE_URL}">Citer</a>
       <a href="{postrow.displayed.EDIT_URL}">Editer</a>
       <a href="{postrow.displayed.IP_URL}">IP</a>
        <a href="{postrow.displayed.DELETE_URL}">X</a>
          </div>
     </div>
    </div>
  </div>
  <div class="mesBody">
    <div class="mesLeft">
      <div class="mesAvatar">
       {postrow.displayed.POSTER_AVATAR}
      </div>
      <div class="mesPro">
        <div class="mesChpList">
          <!-- BEGIN profile_field -->
          <div class="mesLabel">{postrow.displayed.profile_field.LABEL}</div>
          <div class="mesInfo">{postrow.displayed.profile_field.CONTENT}</div>
          
           <!-- END profile_field -->
          <div class="mesInfo mesRpg">  {postrow.displayed.POSTER_RPG}</div>
        </div>
      </div>
    </div>
    <div class="mesRight">
      <div class="mesRcont">
        <div id="p{postrow.displayed.U_POST_ID}" class="mesDate">{postrow.displayed.POST_DATE_NEW}  <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></div>
        <div class="mesPostbody">
 <div class="content">
 <div>{postrow.displayed.MESSAGE}</div>
 <!-- BEGIN switch_attachments -->
 <dl class="attachbox">
 <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
 <dd class="attachments">
 <!-- BEGIN switch_post_attachments -->
 <dl class="file">
 <dt>
 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
 </dt>
 <dd>
 <!-- BEGIN switch_dl_att -->
 <span><a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}</span>
 <!-- END switch_dl_att -->

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

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

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

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


 <div class="post-head" style="display:none;">
 <!-- BEGIN switch_vote_active -->
 <div class="vote">
 <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-thumbsup"></a>
 <!-- END switch_vote -->

 <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-thumbsdown"></a>
 <!-- END switch_vote -->

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

 <div class="vote-bars">
 <!-- BEGIN switch_vote_plus -->
 <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
 <!-- END switch_vote_plus -->

 <!-- BEGIN switch_vote_minus -->
 <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
 <!-- END switch_vote_minus -->
 </div>
 </div>
 <!-- END switch_bar -->

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

 
 <!-- BEGIN first_post_br -->
 <hr id="first-post-br" />
 <!-- END first_post_br -->
 <!-- END displayed -->
<!-- END postrow -->

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

<div class="quick-nav-topics bottom">
    <!-- BEGIN switch_isconnect -->
 <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
    <!-- END switch_isconnect -->
    <a href="#top">{L_BACK_TO_TOP}</a>
    <!-- BEGIN switch_isconnect -->
 <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
    <!-- END switch_isconnect -->
</div>

<div class="topic-actions bottom">
 <!-- BEGIN topicpagination -->
 <div class="pagination">
 {PAGINATION}
 </div>
 <!-- END topicpagination -->

 <div class="topic-actions-buttons">
 <!-- BEGIN switch_user_logged_in -->
 <!-- BEGIN watchtopic -->
 {S_WATCH_TOPIC}
 <!-- END watchtopic -->
 <!-- END switch_user_logged_in -->

 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="ion-edit button1">{L_POST_NEW_TOPIC}</a>
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}" class="ion-reply button1">{L_POST_REPLY_TOPIC}</a>
 <!-- END switch_user_authreply -->
 </div>
</div>

<!-- BEGIN promot_trafic -->
 <div class="block" id="ptrafic_close" style="display: none;">
 <div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-plus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
 </div>
 <div class="block" id="ptrafic_open" style="display:'';">
 <div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-minus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
 <ul class="ptrafic">
 <!-- BEGIN link -->
 <li>
 <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">
 <i class="ion-ios-chatbubble-outline"></i>{promot_trafic.link.TITLE}
 </a>
 </li>
 <!-- END link -->
 </ul>
 </div>
<!-- END promot_trafic -->

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

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

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

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

 <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
 <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
 <label>{L_MOD_TOOLS}:</label>
 {S_SELECT_MOD}
 <input class="button2" type="submit" value="{L_GO}" />
 </fieldset>
</form>

<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

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

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

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
$(document).ready(function() {
 $('pre, code').each(function(i, block) {
 hljs.highlightBlock(block);
 });

 $('.post').each(function() {
 if (!$(this).find('.postprofile-avatar').html().length) {
 $(this).find('.postprofile-rank').css('border-bottom', 'none');
 $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
 }
 });
});
</script>

CSS pour des avatars en 200*320px :

Code:

/*LS Affichage des sujets DarkPurple*/

.mesPost {
  width:100%;
  background-color:#e8e8e8; overflow:hidden;
}

.mesTop {
  width:100%;height:100px;
  display:flex; position:relative;
  overflow:hidden; background-color: #dfdfdf;
  box-shadow:0px 0px 10px rgba(0,0,0,0.15);
}
.mesCont {
  width:25%; /*A AGRANDIR SI VOUS RAJOUTEZ DES CHAMPS DE CONTACT*/
 height:100px;
  display:flex; align-items:center; justify-content:space-around;position:absolute;z-index:5;
}
.mesCont a:hover {color: #5b405c;}
.mesCont .th {
  width:50px; height:50px;
  background-color:rgba(255,255,255,0.25); border-radius:50%;
  display:flex; flex-flow:row wrap; align-items:center;justify-content:center; font-size:25px; border:1px solid rgba(255,255,255,0.4);

}

.mesTopR {
  position:relative; width:100%; display:flex; flex-flow:row wrap;
  justify-content:flex-end;
}

.mesRang {
  position:absolute; right:0px;
  font-family:Muli, sans-serif;text-transform:uppercase; font-size:142px; letter-spacing:-16px; font-weight:700; line-height:92px; font-style:italic;
  opacity:0.1;color:#5c415d;z-index:1;
}

.mesRang .mesPseudo {display:none;}

.mesPseudo {
  height:60px; width:60%; line-height:85px;
  text-align:right; padding:0px 30px;
  font-family:Muli, sans-serif; font-size:28px; font-weight:900; position:relative;z-index:5;
}

.mesActions {
  width:60%; height:40px; display:flex;justify-content:flex-end; align-items:center;
  padding:0px 40px 10px 0px; z-index:5;
}

.mesActions a {
  display:block; background-color:#5c415d; height:25px; margin:0px 10px  0px 0px; padding:0px 10px;
  font-family:Source Sans Pro, sans-serif; color:white;
  font-size:13px; text-transform:uppercase; line-height:25px;
  transition:0.25s ease-in-out;
}
.mesActions a:hover {
  filter:brightness(1.2);
}
.mesBody {
  width:100%; display:flex;
}

.mesLeft {
  width:200px;
  background-color:#dadada;
}
.mesAvatar {
  position:relative;z-index:10;width:200px;height:400px;
  overflow:hidden;
}
.mesPro {
  background-color:#5c415d;
  position:relative;z-index:1;
  top:-5px;
  padding:20px 15px 25px 15px;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
  background: linear-gradient(180deg, rgba(92,65,93,1) 0%, rgba(111,81,112,1) 100%);
}
.mesLabel .label span{
  font-family:Muli, sans-serif, sans-serif; text-transform:uppercase;
  font-style:italic;font-weight:700;color:rgba(255,255,255,0.65)!important;
}
.mesLabel:nth-child(1) {
    display: none; /*CACHE LE TITRE DU CHAMP "GIF" OU "ICONE" CHANGER LE NUMERO POUR CORRESPONDRE A SA POSITION DANS LA LISTE*/
}
.mesInfo {
  font-family:Muli, sans-serif; font-size:12.5px; width:100%;
  text-align:right; color:#fff;
  margin-bottom:10px; min-height:20px; line-height:20px; padding:0px 5px;
}

.mesInfo img {width:100%}
.mesRight {
  padding:25px; width:100%;
}

.mesDate {
  height:25px; margin-left:15px;
  background-color:#5c415d; display:inline-block;
  font-family:Source Sans Pro, sans-serif; font-size:12px;
  padding:0px 10px; line-height:25px; border:1px solid #fff;
  border-width:1px 1px 0px 1px;
  color:#d6b4d6; text-transform:uppercase; font-weight:600;
}

.mesDate a {color:white;
}

.mesPostbody {
  min-height:300px; width:100%;
  background-color:#f8f8f8; padding:25px;
  border:1px solid #fff;
  font-family:Source Sans Pro, sans-serif; font-size:13px;
  z-index:2; position:relative;
  box-shadow:0px 0px 5px rgba(0,0,0,0.05);
}
.mesSign {
  width:100%;
}

.mesInfo.mesRpg {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    font-family: Source Sans Pro, sans-serif;
}
.mesInfo.mesRpg a {
    font-weight: 900;
    color: #d6b4d6;
    display: inline-block;
    font-size: 12px;
    text-align: center;
    width: 100%;
    font-style: italic;
    font-family: muli, sans-serif;
}
.mesInfo.mesRpg textarea {
    width: 100%;
}

.quick-nav-topics.bottom {margin:10px 0px;}

CSS pour des avatars en 200*400px :

Code:

/*LS Affichage des sujets DarkPurple*/

.mesPost {
  width:100%;
  background-color:#e8e8e8; overflow:hidden;
}

.mesTop {
  width:100%;height:100px;
  display:flex; position:relative;
  overflow:hidden; background-color: #dfdfdf;
  box-shadow:0px 0px 10px rgba(0,0,0,0.15);
}
.mesCont {
 width:25%; /*A AGRANDIR SI VOUS RAJOUTEZ DES CHAMPS DE CONTACT*/
 height:100px;
  display:flex; align-items:center; justify-content:space-around;position:absolute;z-index:5;
}
.mesCont a:hover {color: #5b405c;}
.mesCont .th {
  width:50px; height:50px;
  background-color:rgba(255,255,255,0.25); border-radius:50%;
  display:flex; flex-flow:row wrap; align-items:center;justify-content:center; font-size:25px; border:1px solid rgba(255,255,255,0.4);

}

.mesTopR {
  position:relative; width:100%; display:flex; flex-flow:row wrap;
  justify-content:flex-end;
}

.mesRang {
  position:absolute; right:0px;
  font-family:Muli, sans-serif;text-transform:uppercase; font-size:142px; letter-spacing:-16px; font-weight:700; line-height:92px; font-style:italic;
  opacity:0.1;color:#5c415d;z-index:1;
}

.mesRang .mesPseudo {display:none;}

.mesPseudo {
  height:60px; width:60%; line-height:85px;
  text-align:right; padding:0px 30px;
  font-family:Muli, sans-serif; font-size:28px; font-weight:900; position:relative;z-index:5;
}

.mesActions {
  width:60%; height:40px; display:flex;justify-content:flex-end; align-items:center;
  padding:0px 40px 10px 0px; z-index:5;
}

.mesActions a {
  display:block; background-color:#5c415d; height:25px; margin:0px 10px  0px 0px; padding:0px 10px;
  font-family:Source Sans Pro, sans-serif; color:white;
  font-size:13px; text-transform:uppercase; line-height:25px;
  transition:0.25s ease-in-out;
}
.mesActions a:hover {
  filter:brightness(1.2);
}
.mesBody {
  width:100%; display:flex;
}

.mesLeft {
  width:200px;
  background-color:#dadada;
}
.mesAvatar {
  position:relative;z-index:10;width:200px;height:320px;
  overflow:hidden;
}
.mesPro {
  background-color:#5c415d;
  position:relative;z-index:1;
  top:-5px;
  padding:20px 15px 25px 15px;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
  background: linear-gradient(180deg, rgba(92,65,93,1) 0%, rgba(111,81,112,1) 100%);
}
.mesLabel .label span{
  font-family:Muli, sans-serif, sans-serif; text-transform:uppercase;
  font-style:italic;font-weight:700;color:rgba(255,255,255,0.65)!important;
}
.mesLabel:nth-child(1) {
    display: none; /*CACHE LE TITRE DU CHAMP "GIF" OU "ICONE" CHANGER LE NUMERO POUR CORRESPONDRE A SA POSITION DANS LA LISTE*/
}
.mesInfo {
  font-family:Muli, sans-serif; font-size:12.5px; width:100%;
  text-align:right; color:#fff;
  margin-bottom:10px; min-height:20px; line-height:20px; padding:0px 5px;
}

.mesInfo img {width:100%}
.mesRight {
  padding:25px; width:100%;
}

.mesDate {
  height:25px; margin-left:15px;
  background-color:#5c415d; display:inline-block;
  font-family:Source Sans Pro, sans-serif; font-size:12px;
  padding:0px 10px; line-height:25px; border:1px solid #fff;
  border-width:1px 1px 0px 1px;
  color:#d6b4d6; text-transform:uppercase; font-weight:600;
}

.mesDate a {color:white;
}

.mesPostbody {
  min-height:300px; width:100%;
  background-color:#f8f8f8; padding:25px;
  border:1px solid #fff;
  font-family:Source Sans Pro, sans-serif; font-size:13px;
  z-index:2; position:relative;
  box-shadow:0px 0px 5px rgba(0,0,0,0.05);
}
.mesSign {
  width:100%;
}

.mesInfo.mesRpg {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    font-family: Source Sans Pro, sans-serif;
}
.mesInfo.mesRpg a {
    font-weight: 900;
    color: #d6b4d6;
    display: inline-block;
    font-size: 12px;
    text-align: center;
    width: 100%;
    font-style: italic;
    font-family: muli, sans-serif;
}
.mesInfo.mesRpg textarea {
    width: 100%;
}

.quick-nav-topics.bottom {margin:10px 0px;}

CSS pour un avatar en 250*350px :

Code:

/*LS Affichage des sujets DarkPurple*/

.mesPost {
  width:100%;
  background-color:#e8e8e8; overflow:hidden;
}

.mesTop {
  width:100%;height:100px;
  display:flex; position:relative;
  overflow:hidden; background-color: #dfdfdf;
  box-shadow:0px 0px 10px rgba(0,0,0,0.15);
}
.mesCont {
 width:25%; /*A AGRANDIR SI VOUS RAJOUTEZ DES CHAMPS DE CONTACT*/
 height:100px;
  display:flex; align-items:center; justify-content:space-around;position:absolute;z-index:5;
}
.mesCont a:hover {color: #5b405c;}
.mesCont .th {
  width:50px; height:50px;
  background-color:rgba(255,255,255,0.25); border-radius:50%;
  display:flex; flex-flow:row wrap; align-items:center;justify-content:center; font-size:25px; border:1px solid rgba(255,255,255,0.4);

}

.mesTopR {
  position:relative; width:100%; display:flex; flex-flow:row wrap;
  justify-content:flex-end;
}

.mesRang {
  position:absolute; right:0px;
  font-family:Muli, sans-serif;text-transform:uppercase; font-size:142px; letter-spacing:-16px; font-weight:700; line-height:92px; font-style:italic;
  opacity:0.1;color:#5c415d;z-index:1;
}

.mesRang .mesPseudo {display:none;}

.mesPseudo {
  height:60px; width:60%; line-height:85px;
  text-align:right; padding:0px 30px;
  font-family:Muli, sans-serif; font-size:28px; font-weight:900; position:relative;z-index:5;
}

.mesActions {
  width:60%; height:40px; display:flex;justify-content:flex-end; align-items:center;
  padding:0px 40px 10px 0px; z-index:5;
}

.mesActions a {
  display:block; background-color:#5c415d; height:25px; margin:0px 10px  0px 0px; padding:0px 10px;
  font-family:Source Sans Pro, sans-serif; color:white;
  font-size:13px; text-transform:uppercase; line-height:25px;
  transition:0.25s ease-in-out;
}
.mesActions a:hover {
  filter:brightness(1.2);
}
.mesBody {
  width:100%; display:flex;
}

.mesLeft {
  width:250px;
  background-color:#dadada;
}
.mesAvatar {
  position:relative;z-index:10;width:250px;height:350px;
  overflow:hidden;
}
.mesPro {
  background-color:#5c415d;
  position:relative;z-index:1;
  top:-5px;
  padding:20px 15px 25px 15px;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
  background: linear-gradient(180deg, rgba(92,65,93,1) 0%, rgba(111,81,112,1) 100%);
}
.mesLabel .label span{
  font-family:Muli, sans-serif, sans-serif; text-transform:uppercase;
  font-style:italic;font-weight:700;color:rgba(255,255,255,0.65)!important;
}
.mesLabel:nth-child(1) {
    display: none; /*CACHE LE TITRE DU CHAMP "GIF" OU "ICONE" CHANGER LE NUMERO POUR CORRESPONDRE A SA POSITION DANS LA LISTE*/
}
.mesInfo {
  font-family:Muli, sans-serif; font-size:12.5px; width:100%;
  text-align:right; color:#fff;
  margin-bottom:10px; min-height:20px; line-height:20px; padding:0px 5px;
}

.mesInfo img {width:100%}
.mesRight {
  padding:25px; width:100%;
}

.mesDate {
  height:25px; margin-left:15px;
  background-color:#5c415d; display:inline-block;
  font-family:Source Sans Pro, sans-serif; font-size:12px;
  padding:0px 10px; line-height:25px; border:1px solid #fff;
  border-width:1px 1px 0px 1px;
  color:#d6b4d6; text-transform:uppercase; font-weight:600;
}

.mesDate a {color:white;
}

.mesPostbody {
  min-height:300px; width:100%;
  background-color:#f8f8f8; padding:25px;
  border:1px solid #fff;
  font-family:Source Sans Pro, sans-serif; font-size:13px;
  z-index:2; position:relative;
  box-shadow:0px 0px 5px rgba(0,0,0,0.05);
}
.mesSign {
  width:100%;
}

.mesInfo.mesRpg {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    font-family: Source Sans Pro, sans-serif;
}
.mesInfo.mesRpg a {
    font-weight: 900;
    color: #d6b4d6;
    display: inline-block;
    font-size: 12px;
    text-align: center;
    width: 100%;
    font-style: italic;
    font-family: muli, sans-serif;
}
.mesInfo.mesRpg textarea {
    width: 100%;
}

.quick-nav-topics.bottom {margin:10px 0px;}

CSS pour un avatar en 250*400px :

Code:

/*LS Affichage des sujets DarkPurple*/

.mesPost {
  width:100%;
  background-color:#e8e8e8; overflow:hidden;
}

.mesTop {
  width:100%;height:100px;
  display:flex; position:relative;
  overflow:hidden; background-color: #dfdfdf;
  box-shadow:0px 0px 10px rgba(0,0,0,0.15);
}
.mesCont {
  width:25%; /*A AGRANDIR SI VOUS RAJOUTEZ DES CHAMPS DE CONTACT*/
 height:100px;
  display:flex; align-items:center; justify-content:space-around;position:absolute;z-index:5;
}
.mesCont a:hover {color: #5b405c;}
.mesCont .th {
  width:50px; height:50px;
  background-color:rgba(255,255,255,0.25); border-radius:50%;
  display:flex; flex-flow:row wrap; align-items:center;justify-content:center; font-size:25px; border:1px solid rgba(255,255,255,0.4);

}

.mesTopR {
  position:relative; width:100%; display:flex; flex-flow:row wrap;
  justify-content:flex-end;
}

.mesRang {
  position:absolute; right:0px;
  font-family:Muli, sans-serif;text-transform:uppercase; font-size:142px; letter-spacing:-16px; font-weight:700; line-height:92px; font-style:italic;
  opacity:0.1;color:#5c415d;z-index:1;
}

.mesRang .mesPseudo {display:none;}

.mesPseudo {
  height:60px; width:60%; line-height:85px;
  text-align:right; padding:0px 30px;
  font-family:Muli, sans-serif; font-size:28px; font-weight:900; position:relative;z-index:5;
}

.mesActions {
  width:60%; height:40px; display:flex;justify-content:flex-end; align-items:center;
  padding:0px 40px 10px 0px; z-index:5;
}

.mesActions a {
  display:block; background-color:#5c415d; height:25px; margin:0px 10px  0px 0px; padding:0px 10px;
  font-family:Source Sans Pro, sans-serif; color:white;
  font-size:13px; text-transform:uppercase; line-height:25px;
  transition:0.25s ease-in-out;
}
.mesActions a:hover {
  filter:brightness(1.2);
}
.mesBody {
  width:100%; display:flex;
}

.mesLeft {
  width:250px;
  background-color:#dadada;
}
.mesAvatar {
  position:relative;z-index:10;width:250px;height:400px;
  overflow:hidden;
}
.mesPro {
  background-color:#5c415d;
  position:relative;z-index:1;
  top:-5px;
  padding:20px 15px 25px 15px;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
  background: linear-gradient(180deg, rgba(92,65,93,1) 0%, rgba(111,81,112,1) 100%);
}
.mesLabel .label span{
  font-family:Muli, sans-serif, sans-serif; text-transform:uppercase;
  font-style:italic;font-weight:700;color:rgba(255,255,255,0.65)!important;
}
.mesLabel:nth-child(1) {
    display: none; /*CACHE LE TITRE DU CHAMP "GIF" OU "ICONE" CHANGER LE NUMERO POUR CORRESPONDRE A SA POSITION DANS LA LISTE*/
}
.mesInfo {
  font-family:Muli, sans-serif; font-size:12.5px; width:100%;
  text-align:right; color:#fff;
  margin-bottom:10px; min-height:20px; line-height:20px; padding:0px 5px;
}

.mesInfo img {width:100%}
.mesRight {
  padding:25px; width:100%;
}

.mesDate {
  height:25px; margin-left:15px;
  background-color:#5c415d; display:inline-block;
  font-family:Source Sans Pro, sans-serif; font-size:12px;
  padding:0px 10px; line-height:25px; border:1px solid #fff;
  border-width:1px 1px 0px 1px;
  color:#d6b4d6; text-transform:uppercase; font-weight:600;
}

.mesDate a {color:white;
}

.mesPostbody {
  min-height:300px; width:100%;
  background-color:#f8f8f8; padding:25px;
  border:1px solid #fff;
  font-family:Source Sans Pro, sans-serif; font-size:13px;
  z-index:2; position:relative;
  box-shadow:0px 0px 5px rgba(0,0,0,0.05);
}
.mesSign {
  width:100%;
}

.mesInfo.mesRpg {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    font-family: Source Sans Pro, sans-serif;
}
.mesInfo.mesRpg a {
    font-weight: 900;
    color: #d6b4d6;
    display: inline-block;
    font-size: 12px;
    text-align: center;
    width: 100%;
    font-style: italic;
    font-family: muli, sans-serif;
}
.mesInfo.mesRpg textarea {
    width: 100%;
}

.quick-nav-topics.bottom {margin:10px 0px;}

Viennent ensuite les boutons changés via javascript. Sur l'aperçu, il y a trois champs de contact, ceux placés d'origine par ForumActif : profil, message privé, et site web: Les icônes n'ont pas été modifiées donc le javascript ne fonctionne tel quel ne fonctionne qu'avec les icônes de base en partant du principe que le champ "site web" sert, par exemple, à renseigner la fiche de présentation. Mais vous pouvez ajouter des champs, les changer, tant qu'ils sont sous le même format.

Voici comment se présente le code :

Code:

$(function(){
   $('div.mesCont a img[src$="https://2img.net/i/fa/modernbb/icon_user_profile.png"]').replaceWith('<span class="th th-id-card-2-o"></span>');
  $('div.mesCont a img[src$="https://2img.net/i/fa/modernbb/icon_contact_pm.png"]').replaceWith('<span class="th th-envelope-o"></span>');
  $('div.mesCont a img[src$="https://illiweb.com/fa/modernbb/icon_contact_www.png"]').replaceWith('<span class="th th-folder-1-o"></span>');

});

Vous devez placer ce code dans le module JavaScript de votre forum, le faire appliquer sur les sujets, et valider.

Pour remplacer une icône image par une icône honeybee, il vous suffit de renseigner le lien de l'image de l'icône dans la première partie du code et l'icône honeybee dans la seconde  (en changeant la seconde class du span pour celle que vous souhaitez dans le catalogue Honeybee). Pour en savoir plus sur comment utiliser les icônes honeybee, vous pouvez vous rendre sur le tuto suivant : Intégrer des icônes dans vos codes.

Si vous avez plus de champs de contact et souhaitez remplacer les images, il suffit de copier une ligne supplémentaire et renseigner le nom de l'image et de l'icône. Attention néanmoins à bien utiliser des images différentes pour chaque champ, vous ne pouvez pas utiliser la même icône plusieurs fois !

Et voilà ! C'est tout pour ce LS. N'hésitez pas si vous avez des soucis avec.

Merci beaucoup pour ce LS.