Annonce test.
Le deal à ne pas rater :
Réassort du coffret Pokémon 151 Électhor-ex : où l’acheter ?
Voir le deal

Partagez

Epicode - messages & profils

Croquelune
Croqueuse de pommes
Croquelune
Messages : 106
Date d'inscription : 02/12/2011
Epicode - messages & profils Mer 14 Oct - 19:01



Version du forum : ModernBB


Remplacez la totalité de votre template viewtopic_body par :
Code:Sélectionner
<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="titleto"><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></div>
 <div class="sub-header-info">

 <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">Nouveau</a>
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}" class="ion-reply button1">Répondre</a>
 <!-- END switch_user_authreply -->
 </div>
</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 -->
<a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
 
                  <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}"></div>
                  
                  <div class="hauttopic">
                      <div class="imghere"></div>
                      
                      <div class="insidetete">
                      <div class="namepost">{postrow.displayed.POSTER_NAME}</div>
                        <div class="rangperso">{postrow.displayed.POSTER_RANK_NEW}</div>
                      </div>
                      
                    </div>
                  
                  <div class="totaltopic">
                    
                    <div class="iconepost"><span class="th th-observatory"></span></div>
                  
                    <div class="blokwrite">
                      
                      <div class="barreduhaut">
                      <div class="datepost">{postrow.displayed.POST_DATE_NEW}</div>
                      
                        <div class="boutons">
                          <div class="btn-edit"><a href="{postrow.displayed.EDIT_URL}">éditer</a></div>
                          <div class="btn-citer"><a href="{postrow.displayed.QUOTE_URL}">citer</a></div>
                          <div class="btn-supp"><a href="{postrow.displayed.DELETE_URL}">supprimer</a></div>
                          <div class="btn-ip"><a href="{postrow.displayed.IP_URL}">Ip</a></div>
                        </div>
                      </div>
                      
                     <!-- BEGIN switch_vote_active -->
 <div class="vote">
 <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-thumbsup"></a>
 <!-- END switch_vote -->

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

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

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

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

 <!-- BEGIN switch_no_bar -->
 <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
 <!-- END switch_no_bar -->
 </div>
 <!-- END switch_vote_active -->
                      
                      <div class="postbodyy">
 <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>
                    </div>
                    
                    <div class="blokvava">
                      <div class="bloktete">{postrow.displayed.POSTER_AVATAR}</div>
                      <div class="infopost">
                      <!-- BEGIN profile_field -->
                        <div class="labelu">{postrow.displayed.profile_field.LABEL}</div>
                        <div class="contete">{postrow.displayed.profile_field.CONTENT}</div>
                        {postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
                      </div>
                    </div>
                  
                  
                  
                  </div>          
                  
 <!-- BEGIN first_post_br -->
 <hr id="first-post-br" />
 <!-- END first_post_br -->
 <!-- END displayed -->
<!-- END postrow -->

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

<div class="topic-actions bottom">
 <!-- BEGIN topicpagination -->
 <div class="paginationy">
 {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">Nouveau</a>
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}" class="ion-reply button1">Répondre</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="http://s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="http://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>

Puis le CSS :
Code:Sélectionner
.titleto {
    text-align: center;
    font: 22px Pirata One;
    letter-spacing: 2px;
    background: black;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #777777;
    padding: 10px;
    margin: 0px 0px 10px 0px;
}
.titleto a {
    text-transform: lowercase;
    background: -webkit-linear-gradient(#dfc793, #7f6342);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sub-header-info a {
    font: 10px calibri;
    text-transform: uppercase;
    color: #777777;
}
.hauttopic {
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    margin-bottom: 50px;
    border: solid 1px #383838;
}
.imghere {
    width: 80px;
    height: 80px;
    margin-right: 40px;
}
.insidetete {
    width: 600px;
    text-align: justify;
}
.namepost {
    font: 25px Pirata One;
    text-transform: lowercase;
    letter-spacing: 1px;
}
.rangperso {
    font: 10px calibri;
    text-transform: uppercase;
    color: #777777;
    letter-spacing: 4px;
}
.postbodyy {
    text-align: justify;
    padding: 10px;
    font: 12px roboto;
    margin: 64px 30px 30px 30px;
}
.totaltopic {
    border: 1px solid #2f2f2f;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 898px;
    background: #e0e0e0;
    color: #111111;
}
.iconepost {
    position: absolute;
    margin: -34px 0px 0px 300px;
    transform: rotate(20deg);
}
.iconepost span {
    font-size: 250px;
    color: #d0d0d0;
}
.barreduhaut {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 20px;
}
.datepost {
    color: #080808;
    font: 9px calibri;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 260px;
    border-bottom: 1px solid #ccc5bb;
}
.boutons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 308px;
    text-transform: uppercase;
}
.boutons a {
  font: 10px calibri;
  color:black;
}
.blokwrite {
    width: 616px;
}
.blokvava {
    width: 260px;
    margin: 0 auto;
    position: relative;
}
.bloktete {
    margin-top: 130px;
  transition:all 800ms;
}
.bloktete img {
    outline: 1px solid #7b6f5a;
    outline-offset: 7px;
  transition:all 800ms;
}
.bloktete img:hover {
  transition:all 800ms;
  filter: grayscale(1) contrast(1.6);
}
.infopost {
    width: 250px;
    text-align: justify;
    font: 9px calibri;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 20px;
}
.infopost img {
    position: absolute;
    margin: -752px 0px 0px -686px;
    width: 80px;
    outline: 1px solid #7b6f5a;
    outline-offset: 7px;
}
.infopost .label {
    padding: 3px 3px 3px 0px;
    margin-right: 10px;
}
.labelu {
    display: inline-block;
    vertical-align: top;
    width: 90px;
}
.contete {
    display: inline-block;
    vertical-align: top;
    width: 160px;
}
.paginationy {
    padding: 10px;
    font: 11px calibri;
    text-transform: uppercase;
}
.paginationy a {
    color: #777777;
    letter-spacing: 2px;
}

Ne pas oublier de mettre en première partie dans la partie profil du panneau d'administration une icône.
Croquelune
Croqueuse de pommes
Croquelune
Messages : 106
Date d'inscription : 02/12/2011
Re: Epicode - messages & profils Mer 14 Oct - 19:07



Avant toute chose on va installer les polices sur votre forum, donc allez dans Affichage > Templates > Général > overall_header et coller juste en dessous de
Code:Sélectionner
<head>
qui doit être dans les 5 premières lignes de votre template, le code qui suit :
Code:
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Roboto&display=swap" rel="stylesheet">


Dernière édition par Croquelune le Mer 14 Oct - 19:28, édité 1 fois
Croquelune
Croqueuse de pommes
Croquelune
Messages : 106
Date d'inscription : 02/12/2011
Re: Epicode - messages & profils Mer 14 Oct - 19:09

Affichage > Templates > Général > 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(){
    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="bottom" width="50%">
           <!-- 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>
          </td>
          
 <td align="right" valign="bottom" nowrap="nowrap" width="50%">
 <!-- 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 class="header" width="100%"><tr>
 
 <td align="left" valign="middle" height="40" width="25%">
 <!-- 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 -->
           </td>
          
           <td align="right" valign="middle" width="75%"><h1 class="cattitle"> {TOPIC_TITLE}</h1>
                                          
                <div class="navig_suj">
                <a href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}</div>      
                                          
                </td>
 
</tr></table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >

 <!-- BEGIN topicpagination -->
 <div class="pagination"><span class="gensmall">{PAGINATION}</span></div>
 <!-- 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="100%" height="28">
                  <table width="700px" border="0" cellspacing="0" cellpadding="0">
 
 <tr>
 <div class="pseudo_contact">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
                                          <!-- BEGIN contact_field -->
                                          {postrow.displayed.contact_field.CONTENT}
                                          <!-- END contact_field -->
                                          
                                          <span class="name pseudo"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span></div>
                                          <div class="rang">{postrow.displayed.POSTER_RANK}</div>
                                          <br/>
                                          
                                          <div class="profil">
                                          <!-- BEGIN profile_field -->
                                          <div class="infos">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>
                                          <!-- END profile_field --></div>
                          </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 class="message">
                                                          <div class="titre_suj">
                                                            <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}
                                                          </div>
                                                          {postrow.displayed.MESSAGE}<br/>
                                                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span></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>
 
 </td>
 </tr>
 </table>
 </td>
          <td {postrow.displayed.THANK_BGCOLOR} valign="top" width="152">
            <span class="postdetails poster-profile">{postrow.displayed.POSTER_AVATAR}<br />

                                  <div class="date"><span class="postdetails">   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></div>
                                  {postrow.displayed.ONLINE_IMG}
                                  <div class="options"><span 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}</span></div> <br/>
                                  <br />
 {postrow.displayed.POSTER_RPG}
 </span><br />
 <img src="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
            
 </td>
          
  </tr><tr><td colspan="2">  <!-- BEGIN switch_signature -->
 <div class="signature">
 {postrow.displayed.SIGNATURE}
 </div>
  <!-- END switch_signature --></td></tr>
 <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 </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 colspan="2" height="28">
 <span class="genmed">{no_post.L_NO_POST}</span>
 </td>
 </tr>
 <!-- END no_post -->
 
</table>
<div class="pagination">
 <div class="row2" valign="left" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></div>
 <!-- BEGIN switch_user_logged_in -->
 <!-- BEGIN watchtopic -->
 <div class="row2" colspan="2" align="right" valign="top"><span class="gensmall" id="surveiller">{S_WATCH_TOPIC}</span></div>
 <!-- END watchtopic -->
 <!-- END switch_user_logged_in -->
  
  <!-- BEGIN topicpagination -->
 <div align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></div>
 <!-- END topicpagination -->
</div>


<!-- 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="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" id="reponse_bloc" 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" class="permissions">
 <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 valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
 </tr>
 <!-- END show_permissions -->
 </tbody>
 </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" class="aller"><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 class="aller" name="action" method="get" action="{S_FORM_MOD_ACTION}">
 <input type="hidden" name="t" value="{TOPIC_ID}" />

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

 <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
 </form>
 </td>
 </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>


CSS

Code:
/*** AFFICHAGE DES SUJETS BY SYGEA EPICODE ****/
.header{ /*titre du sujet*/
  background: #4d3642;
  color: #f2f3f3;
  height: 45px;
  padding: 10px;
  text-align: right;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
  line-height: 20px;
  margin-bottom: 20px;
}
.header td > h1{
  color: #f2f3f3;
  font: 36px 'Fjalla One', sans-serif;
  border: none;
}
.header img{
  display: block;
}

.navig_suj{ /*navigation vers les catégories et forums précédents*/
  font-size: 0px;
  width: 500px;
}
.navig_suj a{
  color: #f2f3f3;
  font: 10px Roboto;
}
.navig_suj a::after{
  content: "  :arrow_forward:  ";
}

.pagination{ /*contient le nombre de pages, les pages, arrêter de surveiller le sujet*/
  background: #4d3642;
  max-height: 20px;
  padding: 5px;
  text-transform: uppercase;
  line-height: 10px;
  overflow: hidden;
  font: 12px Roboto;
  display: flex;
}
.pagination .gensmall, .pagination a{
  color: #f2f3f3!important;
}
.pagination div{
margin: 0px auto;
}

.pseudo_contact{ /*conteneur du pseudo et des contacts*/
  background: #4d3642; /*background par défaut si pas de groupe*/
  height:  20;
  padding: 15px;
  text-align: right;
  text-transform: uppercase;
  line-height: 20px!important;
  font-family: 'Fjalla One', sans-serif;
}
.pseudo strong{ /*couleur du pseudo*/
  color: white!important;
  font: 22px 'Fjalla One', sans-serif;
}
.pseudo_contact img{
  float: left;
}

.rang{
  height: 10px;
  padding: 5px 15px 5px 5px;
  text-align: right;
  background: #f2f3f3;
  color: #4d3642;
  font: 10px Roboto;
  text-transform: uppercase;
  margin: auto;
  line-height: 10px;
}

.profil{
  background: #e6e6e6;
  padding: 10px;
  min-height: 40px;
  width: 700px;
  color: #4d3642;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  line-height: 14px;
  margin-top: -20px;
}

.infos{
  margin: 5px;
  width: 222px!important;
  overflow: hidden;
  font: 10px Roboto;
  border-bottom: 1px solid black;
  padding-bottom: 5px;
}

.infos .label{ /*police des champs de profils : "messages" "âge" etc */
  font: 12px 'Fjalla One', sans-serif;
}

.titre_suj{ /*nom du sujet en haut des messages*/
  border-bottom: 1px solid #4d3642;
  text-transform: uppercase;
  font: 10px 'Fjalla One', sans-serif;
  color: #4d3642;
  margin-bottom: 20px;
  padding-bottom: 5px;
}

.message{
  background: #f2f3f3;
  padding: 20px;
  color: #4d3642;
  text-align: justify;
  min-height: 80px;
  font: 11px Roboto;
  line-height: 14px;
  margin: 10px 5px 25px 0px;
}

.date{ /*date et heure du message*/
  background: #4d3642;
  text-transform: uppercase;
  font: 14px 'Fjalla One', sans-serif;
  text-align: center;
  padding: 5px;
  width: 190px;
}
.date .postdetails{ /*couleur du texte de la date et heure*/
  color: #f2f3f3!important;
}

.options{ /*citer, editer, supprimer, etc*/
  text-align: center;
  background: #e6e6e6;
  margin-top: 0 auto;
  padding: 10px;
  border-bottom: 5px solid #4d3642;
}

.signature{
  background: #e6e6e6;
  padding: 0px 10px 10px 10px;
  max-height: 300px;
  overflow: auto;
  margin: -20px 0px 15px 0px;
  border: 1px solid lightgrey;
  color: black;
  text-align: justify;
  font: 11px Roboto;
}

#reponse_bloc{ /*bloc autour de la réponse rapide*/
  background: #fafafa;
}

.permissions{
  background: #4d3642;
  padding: 15px!important;
  color: #f2f3f3;
}
.permissions .gensmall, .permissions .gen{
  color: #f2f3f3!important;
}

.liteoption, .mainoption{ /*boutons envoyer et prévisualiser ainsi que TOUS LES BOUTONS DU FORUM ENTIER*/
  height: 30px;
  width: 200px;
  color: #f2f3f3;
  padding: 5px;
  text-transform: uppercase;
  line-height: 30px;
  font: 14px 'Fjalla One', sans-serif;
  background: #4d3642!important;
  border-radius: 0px;
}

.aller .liteoption{ /*boutons "aller" des menus déroulants*/
  width: 50px;
  height: 20px;
  line-height: 20px;
  font: 10px Roboto;
  color: #f2f3f3;
  background: #77606C!important;
  border-radius: 10px;
  border: none;
}

/***FIN DE L'AFFICHAGE DES SUJETS SYGEA SUR EPICODE***/

javascript
Ensuite il faut un javascript pour le changement de couleur en fonction des groupes, pour cela allez dans Modules > HTML & Javascript > Gestion des codes javascript et vous en créez un sans oublier d'activer la gestion des javascript et de cocher uniquement "sur les sujets". Enfin, collez ce qui suit dans votre nouvelle page JS :

Code:
//<![CDATA[
 $( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color");
 $(this).closest('.pseudo_contact').css("background-color", color);});});//]]>

Et enfin, des images pour avoir le même rendu :

Nouveau/répondre/verrouillé
https://i.goopics.net/dRN2O.png
https://i.goopics.net/NvPAY.png
https://i.goopics.net/Vv4gZ.png

Options éditer etc
https://i.goopics.net/aO5wg.png
https://i.goopics.net/nvEYd.png
https://i.goopics.net/3vqbW.png
https://i.goopics.net/9qWnR.png

En ligne
https://i.goopics.net/oAYJn.png

Boutons du profil
https://i.goopics.net/LQwgW.png
https://i.goopics.net/rK8vv.png
https://i.goopics.net/0WebD.png
https://i.goopics.net/5qPkX.png

La police utilisée est Bebas Kai en blanc, et les logos pris sur ce site si vous souhaitez faire d'autres boutons : https://material.io/tools/icons/?icon=bookmark&style=baseline
Contenu sponsorisé
Re: Epicode - messages & profils

Epicode - messages & profils
Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
HEAVEN MARCH. :: Bidules trucs :: Codes :: Messages&profils-
Sauter vers: