Appliquer la couleur du groupe aux intitulés des champs du profil

[Practless]

Bonjour
je me permets de poster une petite requête ici parce que je ne trouve pas (malgré mes recherches) comment m'y prendre pour appliquer la couleur du groupe d'un membre aux intitulés de son profil.

Spoiler:

Je sais qu'on a besoin d'un javascript et d'ailleurs j'en ai trouvé un sur un sujet de forumactif (https://forum.forumactif.com/t398982-mettre-les-champs-du-profil-de-la-meme-couleur-que-les-groupes), seulement je ne sais pas s'il est toujours d'actualité et je n'ai aucune idée de ce qu'il faut modifier pour que ce dernier fonctionne avec mon template...
Petites précisions : il faut savoir qu'il y a une partie en hover (screen de droite) à laquelle je ne souhaite rien appliquer et une partie qui s'ouvre au clique du bouton " more about myself " et qui est ce que je souhaite cibler. Ce que je souhaite cibler commence à partir de  

Code:

<div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="bouton-profil">more about myself</div>

dans le template ci-dessous (pour que vous puissiez vous repérer plus aisément)

Code:

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

    if(typeof(_atc) == "undefined") {
        _atc = { };
    }
  
    _atc.cwait = 0;
    $('.addthis_button').mouseup(function(){
        if ($('#at15s').css('display') == 'block') {
            addthis_close();
        }
    });
});

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

//]]>
</script>

<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0" style="max-width:750px !important;">
<tr><td align="left" valign="bottom"><span class="nav"><!-- BEGIN switch_user_authpost --><a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> <!-- END switch_user_authpost --><!-- BEGIN switch_user_authreply --><a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a><!-- END switch_user_authreply --></span></td>
<td align="right" valign="middle"><!-- BEGIN switch_user_logged_in --><!-- BEGIN watchtopic --><span class="gensmall">{S_WATCH_TOPIC}</span><!-- END watchtopic --><!-- END switch_user_logged_in --> <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a></td>
</tr>
<tr><td colspan="2"><div id="tlePOST"><h1 class="cattitle">{TOPIC_TITLE}</h1><span class="navPOST" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a><!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->{NAV_CAT_DESC_SECOND}</span></div>
</td></tr>
</table>

<table class="forumline" width="100%" align="center" border="0" cellspacing="0" cellpadding="0" style="max-width:750px !important;">
 <!-- BEGIN topicpagination -->
 <tr><td class="pagination" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td></tr>
 <!-- END topicpagination -->
 {POLL_DISPLAY}
 <!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <tr><td class="postdetails" 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="100%" border="0" cellspacing="0" cellpadding="0">
 <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 style="height:5px;"></div>
</td></tr>
<tr><td valign="top">
 <div class="postbody"><a name="{postrow.displayed.U_POST_ID}" style="position:relative; top:30px; width:1px;" id="{postrow.displayed.U_POST_ID}"></a>
<div class="datePOST"><a href="{postrow.displayed.POST_URL}"># link</a> — <span style="vertical-align:middle; width:60%;"><img src="{postrow.displayed.MINI_TIME_IMG}" border="0" />{postrow.displayed.POST_DATE} </span><span style="vertical-align:left; width:50%; text-align:right; line-height:0;">{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>
<!-- BEGIN switch_likes_active -->
        <div class="fa_like_div">
              <div class="fa_like_div">
                  <!-- BEGIN switch_like_list -->
                  {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
                  <!-- END switch_like_list -->
                  <!-- BEGIN switch_dislike_list -->
                  {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
                  <!-- END switch_dislike_list -->
              </div>
              <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
<img class="hrtl" src="https://i.imgur.com/ZZvwJkX.png"><span>love it</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
              </button>
              <!-- BEGIN switch_dislike_button -->
              <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
<img class="hrtl" src="https://i.imgur.com/SuJUq7k.png">
                  <span>bruh</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
              </button>
              <!-- END switch_dislike_button -->
            </div>
            <!-- END switch_likes_active -->
        <!-- BEGIN switch_likes_active -->
 
        <!-- END switch_likes_active -->
  
  
   </div><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="signPOST">{postrow.displayed.SIGNATURE}</div>
 <!-- END switch_signature -->
 </div>
 </td></tr>
 <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle">
 <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
 </td>
 </tr></table></td>
 
 <td valign="top">
   <div id="boxPOST">
    
     <div class="namePOST">
       <strong>{postrow.displayed.POSTER_NAME}</strong>
       <div class="rankPOST">{postrow.displayed.POSTER_RANK}</div>
     </div>
    
  <div class="BOX">

<div class="MESS_AVATAR">
 {postrow.displayed.POSTER_AVATAR}
 
 <div class="AVA_INFOS">
        <table width="100%">
 <tr><td colspan="2">
 <div class="avapseudo">
 <!-- BEGIN profile_field -->
 <div id="field_id{profile_field.ID}" class="avaBB_pseudo">{postrow.displayed.profile_field.CONTENT} </div>
 <!-- END profile_field --> </div>
 <div class="avafeat">
 <!-- BEGIN profile_field -->
 <div id="field_id{profile_field.ID}" class="avaBB_feat">ft. {postrow.displayed.profile_field.CONTENT} </div>
 <!-- END profile_field --> </div>
 </td></tr>
 <tr><td colspan="2"><div class="onlineM">{postrow.displayed.ONLINE_IMG}</div></td></tr>
 <tr><td colspan="2">
 <!-- BEGIN profile_field -->
 <div id="field_id{profile_field.ID}" class="avaBB_icone"> {postrow.displayed.profile_field.CONTENT} </div>
 <!-- END profile_field --> </td></tr>
 <tr>
 <td class="bluebox">
 <!-- BEGIN profile_field -->
                                  <div id="field_id{profile_field.ID}" class="avaBB_mess"> <cp1>{postrow.displayed.profile_field.CONTENT}</cp1><br>messages </div>
 <!-- END profile_field --> </td>
 <td class="bluebox">
 <!-- BEGIN profile_field -->
                                  <div id="field_id{profile_field.ID}" class="avaBB_points"><cp>{postrow.displayed.profile_field.CONTENT}</cp><br>points </div>
 <!-- END profile_field --> </td>
 </tr>
 <tr><td colspan="2" class="bluebox">
 <!-- BEGIN profile_field -->
 <div id="field_id{profile_field.ID}" class="avaBB_inscrip"> {postrow.displayed.profile_field.CONTENT} </div>
 <!-- END profile_field --></td></tr>
 <tr><td colspan="2" class="bluebox">
 <!-- BEGIN profile_field -->
 <div id="field_id{profile_field.ID}" class="avaBB_credits"> {postrow.displayed.profile_field.CONTENT} </div>
 <!-- END profile_field --> </td>
          </tr>
</table>
</div>
          
            {postrow.displayed.POSTER_RPG}
       </div>
  
   <div class="ktactPOST"><div style="display:none;">{postrow.displayed.POSTER_NAME}</div>{postrow.displayed.PROFILE_IMG}{postrow.displayed.PM_IMG}{postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field -->{postrow.displayed.contact_field.CONTENT}<!-- END contact_field --></div>

   <div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="bouton-profil">more about myself</div>
     <div class="profil-cache" style="display: none">
       <div class="postdetails poster-profile">
         <!-- BEGIN profile_field -->
        
           <div id="field_id{profile_field.ID}" class="profil-cache_infos">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>
         <!-- END profile_field -->
        </div>
     </div>
     <div style="display:none;"> {postrow.displayed.POSTER_NAME}<script type="text/javascript">$( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color"); $(this).closest('.grpPOST, .label').css("background-color", color);});});</script>
     </div>
     </div>
 </td></tr>
 <!-- BEGIN first_post_br -->
</table>
      

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
 <!-- END first_post_br -->
  <!-- END displayed -->
 <!-- END postrow -->
 <!-- BEGIN no_post -->
 <tr align="center"><td colspan="3" height="28"><span class="genmed">{no_post.L_NO_POST}</span></td></tr>
 <!-- END no_post -->
</table>

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin:auto; max-width:750px !important;">
<tr>
<td valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
<!-- BEGIN topicpagination --><td align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td><!-- END topicpagination -->
</tr>
</table>

    <!-- BEGIN switch_forum_rules -->
    <table id="forum_rules" width="100%" style="max-width:750px !important;" border="0" cellspacing="0" cellpadding="0">
    <tr><td valign="top" colspan="2"><div class="cattitle">{L_FORUM_RULES}</div></td></tr>
    <tr>
    <td class="clearfix">
    <table>
    <tr>
    <!-- BEGIN switch_forum_rule_image -->
    <td class="logo"><img src="{RULE_IMG_URL}" /></td>
    <!-- END switch_forum_rule_image -->
    <td class="rules postbody">{RULE_MSG}</td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- END switch_forum_rules -->

    <form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
    <table width="100%" style="margin-top:5px; max-width:750px !important;" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr><td align="left" valign="middle" {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%" style="max-width:750px !important;" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr><td colspan="2" align="right" valign="top" nowrap="nowrap"><span style="display:inline-block; vertical-align:middle;">{S_TOPIC_ADMIN}</span>
    <form name="action" method="get" action="{S_FORM_MOD_ACTION}" style="display:inline-block; vertical-align:middle;">
    <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">{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
    </form>
    </td></tr>
    </table>
    <!-- END viewtopic_bottom -->
 
    <table class="forumline noprint" style="max-width:750px !important;" align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr><td colspan="2" align="center" style="padding:0px;">
    <!-- BEGIN switch_user_logged_in --><a name="quickreply"></a>{QUICK_REPLY_FORM}<!-- END switch_user_logged_in -->
    </td></tr>
    </table>
 
    <!-- BEGIN switch_image_resize -->
    <script type="text/javascript">
    //<![CDATA[
    $(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
    //]]>
    </script>
    <!-- END switch_image_resize -->
    <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

Merci beaucoup pour votre aide

[Invité]

Hello Practless,
la c.s.s n'aurait pas été de trop .

Tu peux tester ce script:

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

Mettre un titre explicite.
Cocher Sur les sujets

Déposes ceci:

Code:


$(function(){
$('div.namePOST a[href^="/u"] span').each(function(){
var M14_color=$(this).css('color');
$(this).closest('#boxPOST').find('.BOX .AVA_INFOS div').css('color',M14_color);
});});



Penses à cliquer sur le bouton VALIDER

a++

[Practless]

Hello !
Oui en effet, pardon !
Le voici (sait-on jamais)

Code:

/* ----- PRESENTATION DU SUJET ----- */
#tlePOST {width: 883px;margin:5px auto;padding:10px 0;background: linear-gradient(45deg,#2dacb9,#915cec);}
#tlePOST h1 {display:block;font-size: 13px;text-align: center;font-family: 'Yeseva One', cursive!important;color: #eaf7f7;background: #2f2f2f;margin:0 5px 0 5px;padding:5px;letter-spacing:2px;font-weight:lighter;}
.navPOST {text-align:center;display:block;margin: 5px 5px 0 5px;padding: 2px 0;font-size: 10px!important;background: #2f2f2f;color: #eaf7f7!important;}
.navPOST a {color: #eaf7f7;font-family:"Montserrat",sans-serif;text-transform:uppercase;font-size:10px;text-align:center;}
.datePOST {margin-bottom:10px;padding: 10px;height: 32px;font-size: 10px;font-family:"Montserrat", sans-serif;background: #1d1d1d;color: #737373;margin-top: -10px;text-align: center;margin-left: -10px!important;width: 100%;text-transform:uppercase;}
div.postbody {font-size:10px;width: 632px;min-height: 655px;padding: 10px;margin: auto;color: #737373;font-family: "Montserrat", sans-serif;text-align:justify;}
div.postbody img {max-width:100%;}
.signPOST {height:auto;padding:5px;margin-top:15px;}
#boxPOST {margin-top:5px;height: 443px;background: #1d1d1d;margin-right: 6px;width: 210px;}
.namePOST {z-index:3;width: auto;background: #1d1d1d;text-align: center;text-transform:uppercase;font-family: 'Yeseva One', cursive!important;padding: 6px 0px 6px 0;margin-bottom: 6px;line-height: 20px;letter-spacing: 2px;}
.namePOST a {display:inline-block; vertical-align:middle;}
.rankPOST {vertical-align:middle;text-transform:uppercase;text-align:center;font-size: 8px;color: #eaf7f7;background: linear-gradient(45deg,#2dacb9,#915cec);border-left: 6px solid #1d1d1d;border-right: 6px solid #1d1d1d;font-weight: bolder;font-family: "Montserrat",sans-serif;}
.boxPOST {padding:5px 0;font-size:10px;display: inline-block;font-family:Arial;background: #191919;width: 210px;color:black;}
.ktactPOST {margin:5px auto;width:200px;padding:5px 0;text-align:center;background: #272727;}
.ktactPOST img {margin:0 2px;max-height: 18px;}
.fa_like_div{margin-left:255px;margin-top:-7px!important;}
.fa_like {color: #915dec!important;}
.fa_liked {color: #59c17b!important;}
.fa_dislike {color: #35a5bd!important;}
.fa_disliked {color: #e03e4c!important;}
.rep-button, .rep-button:active, .rep-button:focus {background: #272727; border: 1px solid #272727;border-radius: 0px; box-shadow: 0 0px 0 #1d1d1d inset;font-family: "Montserrat", sans-serif;font-size: 10px;font-weight: 700; /height: 17px;text-transform: initial;}
.hrtl{width:10px;padding-right:5px;}

.M14_Post_separat{
background:#212121;border:1px solid #1d1d1d;
margin-top:10px;}
.M14_Post_separat td{background: #212121;}

/* ----- VIEWTOPIC_BODY : HOVER & boutons DES PROFILS ----- */
.BOX {margin:auto;} /*box avec tout le profil : avatar, icones de message, onglet a cliquer*/
.MESS_AVATAR {width:200px;height: 320px;margin-auto;} /*box avec l'avatar, on peut rajouter un contour, un filtre, etc...*/
.MESS_AVATAR img {margin-left:5px;position:absolute;z-index:1;object-fit:cover;} /* permet de mettre l'avatar en background lors du hover */

/* ----- box du hover : avant et apres + style inside ----- */

.AVA_INFOS /*stylise tout le bloc infos*/ {
width:180px;height:300px;overflow:auto;visibility:hidden;margin-left:5px; /*presets*/
position:relative;z-index:2;/* pour placer la div par dessus l'avatar*/
background-color:rgb(17 17 17 / 80%);    color: #737373;font-family: 'Yeseva One', cursive;font-size:10px;padding:10px; /*style*/
transform:scale(0);-moz-transition:0.5s all ease-in-out 0.5s;-webkit-transition:0.5s all ease-in-out 0.5s; /* transition quand le hover se finit*/}
.onlineM {position:absolute; z-index: 99;
width:15px; height:15px;
margin:20px 0px 0px 120px;}
.onlineM img {visibility:visible;
width:15px; height:15px;border:4px solid #272727;border-radius:100%;}/* l'icone en ligne */

.MESS_AVATAR:hover .AVA_INFOS /* configure le hover */ {padding-left:5px;width:185px;visibility:visible;transform:scale(1);transition:0.5s all ease-in-out;-moz-transition:0.5s all ease-in-out;-webkit-transition:0.5s all ease-in-out; }

/* bouton : more about myself */
.bouton-profil {width: 196px;cursor: pointer;padding: 2px;margin-bottom: 10px;text-align: center;margin-top: 5px;font-family: "Montserrat", sans-serif;background: linear-gradient(75deg,#2f2f2f,#2f2f2f,#2f2f2f);color: #eaf7f7;font-size: 8px;text-transform: uppercase;letter-spacing: 2px;font-weight: bolder;padding-top: 10px;padding-bottom: 10px;margin-left: 5px;}
.profil-cache{overflow:auto;position:relative;z-index: 1;background: #1d1d1d;width: 182px;height: 187px;transition: opacity 1s;padding:10px;font-size: 10px;border: 4px solid #1d1d1d;color: #f2f2f6!important;margin-top: -8px;text-align:justify;}
.profil-cache div {padding: 1px;font-size:10px;font-family:"Montserrat", sans-serif;color: #737373;}
.profil-cache span.label {font-size: 10px;text-transform: lowercase;font-family: "Montserrat", sans-serif;font-style:italic;font-weight:bolder;color: #737373;}
.profil-cache img{width: 180px;max-height: 190px;margin-bottom:5px;object-fit: cover;margin-left: -3px;}

/* configurer les infos visibles */
.AVA_INFOS #field_id img {width:120px;height:120px;border-radius:100px;border:4px solid #272727;margin-left:-63px;margin-top:8px;}
.avapseudo {font-style:italic;font-family: 'Yeseva One', cursive;font-size:20px;margin-top:5px;margin-bottom:6px;color:#e4e4e3}
.avafeat {padding:2px 0px 2px 0px;background: linear-gradient(45deg,#2cacb8,#9657ee);font-size:8px;font-family:"Montserrat",sans-serif!important;font-weight:bolder; letter-spacing:2px; text-transform:uppercase;color:#fff;}
.bluebox {background-color:#272727!important;padding:3px;color: #737373;font-family: 'Montserrat', sans-serif!important;font-size: 10px;letter-spacing: 2px;}
cp {text-align:center;font-weight:bolder;font-family:'Montserrat', sans-serif!important;text-transform:uppercase;}
cp1 {text-align:center;font-weight:bolder;font-family:'Montserrat', sans-serif!important;text-transform:uppercase;}

.avaBB_icone {height:145px;}
.AVA_INFOS {text-align:center;}
.avaBB_mess{width:86px;}
.avaBB_points{width:86px;}

/*SUPPRIMER LES ENTETES*/
.AVA_INFOS .label {display:none}

/*AFFICHER DANS LE BOUTON*/
.profil-cache #field_id:nth-child(-n+9) {display:none}

/*AFFICHER QUE PSEUDO*/
.AVA_INFOS #field_id.avaBB_pseudo:nth-child(-n+1) {display:none}
.AVA_INFOS #field_id.avaBB_pseudo:nth-child(n+3) {display:none}
/*AFFICHER QUE FEAT*/
.AVA_INFOS #field_id.avaBB_feat:nth-child(-n+4) {display:none}
.AVA_INFOS #field_id.avaBB_feat:nth-child(n+6) {display:none}
/*AFFICHER QUE ICONE*/
.AVA_INFOS #field_id.avaBB_icone:nth-child(n+2) {display:none}
/*AFFICHER QUE LE NOMBRE DE MESSAGES*/
.AVA_INFOS #field_id.avaBB_mess:nth-child(-n+8) {display:none}
.AVA_INFOS #field_id.avaBB_mess:nth-child(n+10) {display:none}
/*AFFICHER QUE LE NOMBRE DE POINTS*/
.AVA_INFOS #field_id.avaBB_points:nth-child(-n+7) {display:none}
.AVA_INFOS #field_id.avaBB_points:nth-child(n+9) {display:none}
/*AFFICHER QUE DATE D'INSCRIPTION*/
.AVA_INFOS #field_id.avaBB_inscrip:nth-child(-n+2) {display:none}
.AVA_INFOS #field_id.avaBB_inscrip:nth-child(n+4) {display:none}
/*AFFICHER QUE LES CREDITS*/
.AVA_INFOS #field_id.avaBB_credits:nth-child(-n+5) {display:none}
.AVA_INFOS #field_id.avaBB_credits:nth-child(n+7) {display:none}

/* ----- HOVER DES AVATARS ----- */
.bouton-profil {width: 196.5px;cursor: pointer;padding: 2px;margin-bottom: 10px;text-align: center;margin-top: 5px;font-family: "Montserrat", sans-serif;background: linear-gradient(45deg,#2dacb9,#915cec);color: #e4e4e4;font-size: 8px;text-transform: uppercase;letter-spacing: 2px;margin-left: 5px;}
.profil-cache{overflow:auto;position:relative;z-index: 1;background: #1d1d1d;width: 182px;height:200px;transition: opacity 1s;padding:10px;font-size: 10px;color: #e4e4e4!important;margin: auto;margin-left: 0px;text-align:justify;}
.profil-cache div {padding: 1px;font-size: 10px;font-family: "Montserrat", sans-serif;color: #f2f2f6;}
.profil-cache span.label {font-size: 8px;text-transform: uppercase;font-family: "Arial";letter-spacing: 1px;font-color: #925782!important;}
.profil-cache img{width: 180px;max-height: 190px;margin-bottom:5px;object-fit: cover;margin-left: -3px;}


Le javascript fonctionne, en revanche il ne cible pas ce que j'aurai souhaité C'était l'inverse que je souhaitais... peut-être que je me suis mal exprimée ><

Spoiler:

Comme tu peux le voir, il cible ce qui est dans l'hover et non la zone du dessous

[Invité]

Re,
ok , je vois cela demain matin .

a++

[Invité]

Hello Practless,
tu peux supprimer mon script car on va se servir du script existant dans le template.
Je l'avais zappé    .


Sur mon forum de tests avec ton template,
l'importation de la couleur de groupe s'effectue bien
mais en display:none.
Il faut se servir de la console du navigateur pour l'observer.
Est-ce le cas sur le tien ?


Edit:
Tu as ceci dans ta feuille de style qui empêche le visu directe.

Le voici (sait-on jamais)

Tu vois que c'est utile d'avoir la feuille de style   .

Code:


/*AFFICHER DANS LE BOUTON*/
.profil-cache #field_id:nth-child(-n+9) {display:none}


La partie concernée a déjà un display none dans ton template:

Code:

<div class="profil-cache" style="display: none">

Tu as ce script dans le dit template:

Code:

<div style="display:none;"> {postrow.displayed.POSTER_NAME}<script type="text/javascript">$( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color"); $(this).closest('.grpPOST, .label').css("background-color", color);});});</script>
     </div>

Il suffit de le remplacer pour avoir ce que tu souhaites par ceci:

Code:

<div class="Color_profil"style="display:none;"> {postrow.displayed.POSTER_NAME}
       <script type="text/javascript">
         $( document ).ready(function() {
         $('.Color_profil').find(' a[href^="/u"] span').each(function(){
         var color = $(this).css('color');          
         $(this).closest('div').prev().find('.postdetails.poster-profile div,.postdetails.poster-profile span').css('color',color);
         });
         });
       </script>
     </div>


a++

[Practless]

Hello !
Le script a été supprimé c'est bon.

Pour ce que tu m'expliques ensuite :

Code:

/*AFFICHER DANS LE BOUTON*/
.profil-cache #field_id:nth-child(-n+9) {display:none}

Me sert en faite à cacher les champs du profil que je ne veux pas dans le bloc du bas ^^ (puisque ces champs se retrouvent du coup dans l'hover et qu'il n'est pas nécessaire de les avoir deux fois) donc je ne peux pas le retirer... malgré qu'il y ait le display none déjà dans le template.

Sinon, j'ai remplacé comme tu l'as demandé et la couleur du groupe apparaît bien que dans le bloc du bas mais elle cible l'intégralité de ce qu'il y a dans le bloc :/ alors qu'il faudrait uniquement l'intitulé du champ.

Spoiler:

Merci

[Invité]

Re ,

je ne vois pas l’intérêt de cacher deux fois un élément !!
Surtout qu'ils ne sont pas au même endroit même au survol .

Bref:

alors qu'il faudrait uniquement l'intitulé du champ.

Si je n'ai pas l'information, je ne peux le mettre en place .

Remplaces cette partie dans le template:

Code:

   <div class="Color_profil"style="display:none;"> {postrow.displayed.POSTER_NAME}
           <script type="text/javascript">
             $( document ).ready(function() {
             $('.Color_profil').find(' a[href^="/u"] span').each(function(){
             var color = $(this).css('color');          
             $(this).closest('div').prev().find('.postdetails.poster-profile div,.postdetails.poster-profile span').css('color',color);
             });
             });
           </script>
         </div>

Par ceci:

Code:


<div class="Color_profil"style="display:none;"> {postrow.displayed.POSTER_NAME}
       <script type="text/javascript">
         $( document ).ready(function() {
         $('.Color_profil').find(' a[href^="/u"] span').each(function(){
         var color = $(this).css('color');          
        
         $(this).closest('div').prev().find('.postdetails.poster-profile .label,.postdetails.poster-profile .label span').css('color',color);
         });
         });
       </script>
     </div>




Si dans les champs du profil du P.A, tu as attribué une couleur et d'autres non le code html fournit est opérationnel.
Si aucune couleur n'est définie sur tous les champs:

Exemple avec ce champs:



ce sera celui-ci:

Code:

<div class="Color_profil"style="display:none;"> {postrow.displayed.POSTER_NAME}
       <script type="text/javascript">
         $( document ).ready(function() {
         $('.Color_profil').find(' a[href^="/u"] span').each(function(){
         var color = $(this).css('color');          
        
         $(this).closest('div').prev().find('.postdetails.poster-profile .label').css('color',color);
         });
         });
       </script>
     </div>


Et voilou .

a++

[Practless]

C'était mentionné dans le titre et le premier message
Cela fonctionne, merci beaucoup !

[Invité]

Re,

C'était mentionné dans le titre et le premier message

Ah vi , désolé.
De rien cher(e) ami(e).
a++