Problème d'application de la couleur d'un groupe à un bloc

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème d'application de la couleur d'un groupe à un bloc

Message par cyanureeett Mer 6 Avr 2022 - 21:04

Détails techniques


Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : depuis l'installation du code en question
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour/Bonsoir,

Je viens vous voir après moults recherches qui n'ont malheureusement rien donné.
Voilà j'essaye d'installer un script sur mon forum test permettant d'appliquer la couleur d'un pseudo(donc du groupe de l'utilisateur)à un bloc. Je me suis aidé de plusieurs tutoriels dont celui-ci: https://forum.forumactif.com/t399628-appliquer-couleur-groupe-dans-un-bloc
Le bloc en question prend effectivement la couleur du pseudo, néanmoins il prend seulement en compte la couleur du premier posteur du sujet et s'applique à tous les autres blocs même si ceux-ci devraient avoir une autre couleur (par exemple sur le screen, le premier posteur a une couleur bleue et le second une couleur violette, néanmoins sur les deux messages c'est la couleur bleue qu'on retrouve).

Le CSS de la partie concernée:
Code:
 /* EN TETE */
.titleSTB {
    background: url(https://i.imgur.com/gLoSygL.png);
    padding: 15px 0 0 15px;
    text-align: left;
    text-transform: uppercase;
    height: 95px;
    border-radius: 4px 4px 0px 0px;
}

.titleSTT {
    color: #fff;
    display: block;
    font-family: Oswald, sans serif;
    font-size: 30px;
    font-weight: 600;
}

.ssFOR {
  height: 25px;
  line-height: 27px;
  text-transform: uppercase;
  width: 100%;
}
  
.bg_fixed_pg{
  background-color: rgba(232,223,216,1);
  height: 50px;
  padding: 10px;
  border-bottom: 3px solid rgba(187,140,123,1);
  position: sticky;
  top: 0px;
  overflow: hidden;
  z-index: 99;
}
  
.imgblock{
    background-image: url(https://i.imgur.com/bxtSIdQ.png);
    height: 72px;
    width: 1150px;
    position: absolute;
    margin-left: -10px;
    margin-top: -30px;
    filter: grayscale(30%) opacity(50%);
    overflow: hidden;
}

.sub-header-path a {
    color: #bbaeaa;
    display: block;
    float: left;
    font-size: 11px;
    font-family: 'Montserrat';
    font-weight: 700;
    margin-top: -1px;
}
  
.sub-header-buttons{
  float: none!important;
  display: flex;
  justify-content: space-between;
}
  
.answ {
    width: 99px;
    height: 30px;
    line-height: 30px;
    background: rgba(187,140,123,1);
    font-size: 15px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    z-index: 99;
    font-family: 'Playfair Display';
    position: relative;
}

.answ a{
    background: none!important;
    color: #fff!important;
}
  
.bg_buttons{
  height: 39px;
  display: flex;
}
  
  /* PAGINATION */
.topic-actions-buttons {
    float: none!important;
    margin: 0 0 20px!important;
}

.pagination {
    float: right;
}

.pagination span a:active, .pagination span a:link, .pagination span a:visited, .pagination span strong {
    background: rgba(130,115,103,0.5);
    color: #FFF;
    font-family: 'Playfair Display';
    font-size: 15px;
    font-weight: 700;
    line-height: 26px;
    width: 30px;
    height: 30px;
    position: relative;
    margin: 0px 0 5px 6px;
    border-radius: 30px;
}

.pagination img {
    display: none;
}

.pagination a:last-child {
    display: none;
}

.pagination a[onmousedown^='createPagination'] {
   display: none;
}

.row .pagination span a:active, .row .pagination span a:link, .row .pagination span a:visited{
    background: rgba(130,115,103,0.5);
    color: #FFF;
    font-family: 'Playfair Display';
    font-size: 15px;
    font-weight: 700;
    line-height: 26px;
    width: 30px;
    height: 30px;
    position: relative;
    margin: 0px 0 5px 6px;
    border-radius: 30px;
}
 
/* MESSAGES SUJETS */
.signature_div {
    border-top: none!important;
}

#preview .postbody table, #preview .postbody td, div[class*="post--"] .postbody table, div[class*="post--"] .postbody td {
    border: 0 !important;
}

.englobALL {
    display: flex;
}

.englobPOST {
    flex-wrap: nowrap;
    width: 100%;
}

.post {
    border-radius: 0px;
    border: none;
    box-shadow: none!important;
    margin-bottom: 0px;
}

.postbody {
  color: #9C8E75!important;
  line-height: 13px;
  text-align: justify;
  float: none;
  font-size: 12px;
  margin-left: 0px;
  padding: 12px 30px 18px 18px;
}

.postbody .content {
  font-size: 12px;
  min-height: 340px;
}

.content {
    color: #9C8E75!important;
    line-height: 13px;
    text-align: justify;
    font-size: 12px;
    border: 1px solid rgba(0,0,0,0.03);
    background: #f8f2ec;
    border-radius: 4px;
    padding: 15px 15px 15px 25px;
    margin-left: -25px;
}

.post-head {
    background-image: url(https://i.imgur.com/bxtSIdQ.png);
    filter: grayscale(30%) opacity(50%);
    border: none!important;
    font-family: verdana;
    font-size: 11px!important;
    font-weight: 700;
    line-height: 65%;
    padding: 5px;
    text-align: right;
    text-transform: uppercase;
    width: 677px;
    border-radius: 0px;
}

.postheadLINKS {
  font-size: 20px;
}

.postheadLINKS a{
  color: rgba(187,140,123,1);
}

.post-head .topic-date {
    border: none;
    color: #fff;
    display: inline-block;
    float: left;
    margin: 0 0 0 23px;
    padding: 6px 12px;
    background: rgba(187,140,123,1);
    border-radius: 3px;
}

/* AVATARS */
.englobname{
    background-color: #f2ebe5;
    background-image: url(https://i.imgur.com/pnb8zmp.png);
    background-blend-mode: multiply;
    height: 110px;
    width: 976px;
    padding: 16px 0px 39px 114px;
}

.name_player{
  font: 800 40px Poppins;
    text-transform: uppercase;
    letter-spacing: -2px;
}

.englobimgpr{
    background: #ece3dc;
    height: 140px;
    width: 174px;
    border: 1px solid rgba(0,0,0,0.03);
    position: absolute;
    margin-top: -110px;
    margin-left: 976px;
  }
  
  .englobimgpr img{
    border: 7px solid rgba(0,0,0,0.03);
    margin-left: 36px;
    margin-top: 17px;
    width: 100px;
    height: 100px;
}
  
.englobimgpr .profil_field {
    display: none;
}
  
.englobimgpr .profil_field:nth-child(1) {
    display: block;
}

.profilenglob {
    background: #ece3dc;
    padding: 15px;
    width: 300px;
    border-right: 1px solid rgba(0,0,0,0.03);
    position: relative;
    z-index: 98;
}

#englob { /* Encadrement global des 2 divs */
    background: #ece3dc;
    position: sticky;
    width: 269px;
    height: 370px;
    overflow: hidden;
    top: 63px;
    z-index: 98;
    border: 10px solid rgba(0,0,0,0.03);
}

.imgp {
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
    height: 350px;
    width: 250px;
    left: 0;
    top: 0;
    transition: all .5s;
    z-index: 0;
}

#englob:hover > .imgp {
    margin-top:0px;
}


.infosp {
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
    background: #F2EBE5;
    height: 100%;
    width: 250px;
    left: 0;
    line-height: 10px;
    margin-left: 0px;
    opacity: 1;
    overflow-y: auto;
    padding: 5px;
    position: absolute;
    top: 0;
    transition: all .5s;
    transform: scale(0.8);
    z-index: 1;
}
  
.infosp2 {
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
    height: 100%;
    width: 250px;
    left: 0;
    line-height: 10px;
    margin-left: -50px;
    opacity: 0;
    overflow-y: auto;
    padding: 5px;
    position: absolute;
    top: 0;
    transition: all .5s;
    z-index: 1;
}
  
.infosp2::before{
    content: "";
    bottom: 0;
    left: 0;
    border-left: 1px solid #F2EBE5;
    border-bottom: 1px solid #F2EBE5;
    width: 10%;
    height: 10%;
    margin-left: 12px;
    margin-top: 284px;
    display: block;
}
  
.infosp2::after{
    content: "";
    bottom: 0;
    left: 0;
    margin-top: -296px;
    border-right: 1px solid #F2EBE5;
    border-top: 1px solid #F2EBE5;
    width: 10%;
    height: 10%;
    margin-left: 205px;
    display: block;
}

#englob:hover > .infosp2 {
  opacity:1;/* Lorsque la souris passe sur la div #englob, on augmente l'opacité des infos */
  margin-left:0px;/* et on décale cette div à 0px (position par défaut) */
}

.ranktxt {
    color: #e0d9d3;
    font-family: 'Hind';
    font-size: 18px;
    line-height: 0px;
    font-style: italic;
    font-weight: 700;
    text-transform: lowercase;
    text-shadow: -2px 0 #fff,0 2px #fff,2px 0 #fff,0 -2px #fff!important;
    cursor: help;
}

.infoprr {
    font-family: 'Playfair Display';
    font-size: 14px;
    font-weight: 700;
    line-height: 12px;
    margin: 7px 3px 7px 3px;
    padding: 4px;
    text-align: left;
    text-transform: uppercase;
    color: #9C8E75!important;
}
  
.infoprr:nth-child(1) {
  display: none;
}
  
.infoprr span{
  font-weight: 700;
    font-size: 20px;
    font-style: oblique;
    font-family: 'Playfair Display';
}
  
.infoprr .label{font-size:0px;}
.infoprr .label span,.infoprr .f1{font-size:20px!important;}

  /* AUTRE */
.block {
    background-color: #f2ebe5;
    color: #bbaeaa;
    font-size: 11px;
    line-height: 12px;
    text-transform: uppercase;
    overflow: hidden;
    padding: 18px;
    border-radius: 0px;
    margin-top: 10px;
    position: relative;
}

La template viewtopic_body:
Code:
<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
 //<![CDATA[
 var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">

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="titleSTB">
            <div class="titleSTT">{TOPIC_TITLE}</div>
            <div class="sub-header-path">
 <a href="{U_INDEX}"><span>APOTHEOSIS</span></a>
 {NAV_CAT_DESC}
  </div>
 </div>
<div class="bg_fixed_pg">
  <div class="sub-header-buttons"><div class="imgblock"></div>
 <div class="bg_buttons"><!-- BEGIN switch_user_authpost -->
 <div class="answ"><a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow" {S_POST_NEW_TOPIC} title="{T_POST_NEW_TOPIC}" class="masterTooltip icon ion-compose"> NOUVEAU</a></div>
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
  <div class="answ" style="margin-left: 3px; width: 104px;"><a href="{U_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} title="{T_POST_REPLY_TOPIC}" class="masterTooltip icon ion-reply"> RÉPONDRE</a></div>
                  <!-- END switch_user_authreply --></div>
  <div class="bg_buttons"><div class="pagination">
          {PAGINATION}
</div></div>
</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 -->
<div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
  <div class="englobname"><div class="name_player"><a name="{postrow.displayed.U_POST_ID}"></a>{postrow.displayed.POSTER_NAME}</div>
  <div class="ranktxt">{postrow.displayed.POSTER_RANK}</div></div><div class="englobimgpr"><!-- BEGIN profile_field -->
  <span class="profil_field">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
 <!-- END profile_field --></div>
  <div class="englobALL">
    <div class="profilenglob"><div id="englob">
    <div class="imgp">{postrow.displayed.POSTER_AVATAR}</div>
      <div class="infosp2"><div class="infosp">
                                <!-- BEGIN profile_field -->
      <div class="infoprr">{postrow.displayed.profile_field.LABEL}<br /> {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>
 <!-- END profile_field -->
      <br /><center>{postrow.displayed.PROFILE_IMG}
      {postrow.displayed.PM_IMG}</center>
    </div>
    </div>
    </div>
    </div>
    <div class="englobPOST">
 <div class="post-head" id="posthh">
 <div class="topic-date">
 {postrow.displayed.POST_DATE_NEW}

 <!-- BEGIN switch_vote_active -->
 <div class="vote">
 <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-plus-circled"></a>
 <!-- END switch_vote -->

 <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-minus-circled"></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>
                           <div class="postheadLINKS">
 <a href="{postrow.displayed.QUOTE_URL}" class="masterTooltip" title="Citer">
 <i class="ion-quote"></i>
 </a>
 <a href="{postrow.displayed.EDIT_URL}" class="masterTooltip" id="quotee" title="Éditer">
 <i class="ion-edit"></i>
 </a>
 <a href="{postrow.displayed.DELETE_URL}" class="masterTooltip" id="supprr" title="Supprimer">
 <i class="icon ion-ios-close"></i>
 </a>
 </div>
                         </div>

 <div class="postbody">
 <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>
 <!-- BEGIN switch_signature -->
 <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->
 </div>
 <!-- BEGIN switch_likes_active -->
 <div class="fa_like_div">
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsup"></i>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsdown"></i>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 </div>
 <!-- END switch_likes_active -->
 </div>
 <!-- BEGIN first_post_br -->
 <hr id="first-post-br" />
 <!-- END first_post_br -->
  </div>
</div>
 <!-- END displayed -->
<!-- END postrow -->

<!-- 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 -->


<!-- BEGIN show_permissions -->
<div class="block" style="width: 100%;">
 {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 -->

<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() !== undefined) {
 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>

Et enfin le javascript installé 'sur les sujets':
Code:
$(function(){
$('#main-content').each(function(){
var a=$('div[class*="post--"]').find('a[href^="/u"] span').css('color');
 
if(a)
{
$(this).find('.topic-date').css('backgroundColor',a);
}

if(a)
{
$(this).find('.postheadLINKS i').css('color',a);
}
});});

La template est peut-être un peu bordelique parce que je suis toujours en plein codage de celle-ci, désolé !
Merci d'avance!!!

edit:
Je joins un nouveau screen qui sera, peut-être, plus parlant que mes explications(sur ce screen, le premier message a une couleur violette et donc le bloc de la date prend la couleur violette pour tous les messages, même celui qui devrait avoir une couleur bleue):
Voir l'image:


Dernière édition par cyanureeett le Jeu 7 Avr 2022 - 11:24, édité 1 fois
cyanureeett

cyanureeett
Nouveau membre

Messages : 2
Inscrit(e) le : 28/04/2021

https://testcyanure.forumactif.com/
cyanureeett a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème d'application de la couleur d'un groupe à un bloc

Message par Toryudo Jeu 7 Avr 2022 - 11:10

Bonjour !
Plusieurs petits problèmes dans votre script :
Code:
$('#main-content').each(function(){
Ici, vous faites un each (une boucle) sur un élément #main-content présent une seule fois sur la page. Je suppose que vous voudriez plutôt faire une boucle sur chacun des posts, donc on change plutôt ça en .post.

Code:
var a = $('div[class*="post--"]').find('a[href^="/u"] span').css('color');
Ici, vous récupérez la couleur d'un membre d'un post, mais comme vous ne précisez pas quel post... alors vous obtenez la couleur du membre du premier post trouvé dans toute la page. Toujours le même donc. Quand on est dans une boucle et qu'on veut trouver l'élément associé à l'élément sur lequel on boucle, on part toujours de $(this).

Enfin, niveau optimisation, pas besoin de faire deux fois le même if, on peut mettre les deux instructions dans le même. Ça nous donne donc au final ce script corrigé :
Code:
$(function(){
   $('.post').each(function(){
      var a = $(this).find('a[href^="/u"] span').css('color');
      if(a){
         $(this).find('.topic-date').css('background-color', a);
         $(this).find('.postheadLINKS i').css('color', a);
      }
   });
});
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1384
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'application de la couleur d'un groupe à un bloc

Message par cyanureeett Jeu 7 Avr 2022 - 11:23

Bonjour !

Clair et efficace, avec de très bonnes explications qui me seront d'ailleurs fortement utiles sur d'autres scripts.
Je vous remercie énormément, le script marche à merveille et j'ai pu comprendre les erreurs dans mon script.

Excellente journée, je mets le problème en résolu !
cyanureeett

cyanureeett
Nouveau membre

Messages : 2
Inscrit(e) le : 28/04/2021

https://testcyanure.forumactif.com/
cyanureeett a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'application de la couleur d'un groupe à un bloc

Message par Chacha Jeu 7 Avr 2022 - 11:36

main-content - Problème d'application de la couleur d'un groupe à un bloc 4qhGdLE
Bienvenue sur le forum de support de Forumactif

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69477
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum