Couleurs header des posters en fonction des groupes

[solvia]

Détails techniques

Version du forum : phpBB2
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
Lien du forum : https://aurumregis.forumactif.com/

Description du problème

Bonjour forumactif !
Voilà, il se trouve que j'aimerai énormément pouvoir appliquer sur le header des posteurs la couleur de leur groupe respectif ! (j'appelle header la bannière sur le screen qui entoure le pseudo, ici "Le Cristal")
J'ai cherché sur le forum sans trouver de réponse ou alors des réponses avec des solutions que j'ai essayé sans réussir à l'appliquer ! Surtout que si je comprend bien, il faut avoir recourt à du javascript et je vous avoue que ce n'est absolument pas ma tasse de thé (à comprendre que je n'arrive pas à le lire/comprendre)
Quelqu'un aurait-il une solution ou une idée de comment je pourrais m'y prendre ? Voir même un tuto que je n'aurai pas vu ?
Merci à toute personne qui s'intéressera à mon micro soucis !

[solvia]

up !

[Invité]

Hello solvia,

tu peux donner le contenu de ce template et la css associée s'il te plait.

Dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body

a++

[solvia]

Bonjour/Bonsoir !
Je vous envoie ça directement !

Le Template :

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>

<div class="sujetFond">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td align="left" valign="middle">
        <!-- 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>
  </tr>
  <tr>
    <td colspan="3">
      <h1 class="sujetTitre">
        {TOPIC_TITLE}<br />
        <span class="sujetNav" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          <a class="sujetNav" 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>
      </h1>
    </td>
  </tr>
  <!-- BEGIN topicpagination -->
  <tr>
    <td colspan="3" align="right" valign="top">
      <div class="sujetPagination">{PAGINATION}</div>
    </td>
  </tr>
 
    <!-- END topicpagination -->
  {POLL_DISPLAY}
  <!-- BEGIN postrow -->
  <!-- BEGIN hidden -->
  <tr>
    <td class="postdetails" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
  </tr>
  <!-- END hidden -->
  <!-- BEGIN displayed -->
 
 <tr class="post--{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}">
 <td valign="top">
     
      <div class="sujetProfil">
        <div class="sujetHover">
          <div class="sujetInfos">
            <!-- BEGIN profile_field -->
            <div>
              {postrow.displayed.profile_field.LABEL}
            {postrow.displayed.profile_field.CONTENT}</div>
            <!-- END profile_field -->
           
          </div>
      <div class="sujetAvatar">{postrow.displayed.POSTER_AVATAR}</div>
          <div class="sujetOn"></div>
        </div>
       
        <div class="sujetFeuille">
          {postrow.displayed.POSTER_RPG}
        </div>
  </div><div style="text-align:center;padding-bottom:20px;"><br/>
                {postrow.displayed.PM_IMG}
              <!-- BEGIN contact_field -->{postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
            </div>
    </td>
   
    <td valign="top">
      <div class="sujetTriangle"></div>
    </td>
   
  <td valign="top" colspan="2"><div class="sujetPseudo">{postrow.displayed.POSTER_NAME}
    <div class="sujetRang">
        {postrow.displayed.POSTER_RANK}
    </div> </div>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr class="sujetHeureEdit">
          <td class="sujetHeureEdit">
            <div class="sujetHeure">{postrow.displayed.POST_DATE}</div>{postrow.displayed.ONLINE_IMG}
            <div class="sujetEdit">{postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG}</div>
          </td>
        </tr>
        <tr>
          <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                    <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                    <!-- END switch_vote -->

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

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

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

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

                  <div class="sujetMessage"><br>
                    <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>
              </td>
          </tr>
        <!-- BEGIN switch_signature -->
 
 
 
        <tr>
          <td colspan="2">
            <div class="sujetSignature">
              {postrow.displayed.SIGNATURE}
            </div>
          </td>
        </tr> 
        <!-- END switch_signature -->
        </table><br><br><br><br>
    </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 width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td class="sujetPagination" valign="top" {COLSPAN_PAGINATION}>{PAGE_NUMBER}</td>
      <!-- BEGIN topicpagination -->
      <td class="sujetPagination" align="right" valign="top" >{PAGINATION}</td>
      <!-- END topicpagination -->
  </tr>
  <!-- BEGIN switch_user_logged_in -->
  <!-- BEGIN watchtopic -->
  <tr>
<td class="sujetPagination sujetPaginationLast" colspan="2" align="right" valign="top">{S_WATCH_TOPIC}</td>
  </tr>
 
  <!-- END watchtopic -->
  <!-- END switch_user_logged_in -->

 <tr>
      <td colspan="2" align="center">
        <!-- BEGIN switch_user_logged_in -->
        <a name="quickreply"></a>
        {QUICK_REPLY_FORM}
        <br />
        <!-- END switch_user_logged_in -->
      </td>
  </tr>
       
     

  <tr>
    <!-- BEGIN show_permissions -->
   
    <!-- END show_permissions -->
  </tr>
  <tr>
    <td colspan="3">
   
    </td>
  </tr>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
  <tr>
      <td align="left" valign="middle">
        <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>


      <!-- BEGIN moderation_panel -->
      <td align="center">
        {moderation_panel.U_YOUR_PERSONAL_MODERATE}
      </td>
      <!-- END moderation_panel -->
  </tr>
  </form>
 

<!-- BEGIN viewtopic_bottom -->
  <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
        <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

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

            {L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" />
        </form>
      </td>
  </tr>
 
 
<!-- END viewtopic_bottom -->
</table>
</div>
       
         
  <div style="width: 100%; text-align: right; margin-top: 5px; margin-bottom: 15px;">
    <span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span><br/>
    </div>


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

Et voici le CSS :

Code:

/**************************************************************** MESSAGE ET PROFIL *****************************************************/
.sujetHover {
height: 350px;
    overflow: hidden;
    position: relative;
    width: 250px;
    border: solid 2px #fff;

  }
.sujetMessage {padding:10px;}

.sujetInfos {
  opacity: 0;
  position: absolute;
  width: 230px;
  height:330px;
  background-color : rgba(255,255,255,0.9);
font-size:10px;
color:#777;
  top: 0;
  overflow:auto;
  padding:5px;
  margin-top:0px;
  text-align: justify;
  z-index: 3;
padding:0px;
  margin-left:10px;
  -webkit-transition: all 0.8s ease-in;
  -moz-transition: all 0.8s ease-in;
  transition: all 0.8s ease-in;
font-family:verdana, sans-serif;
}

.sujetInfos:hover {
  opacity: 1;
  margin-top: 10px;
}
.sujetInfos img {width:160px;max-height:110px;background:#fff;
margin-left:10px;margin-top:10px;border:solid 10px #fff;}
.sujetAvatar{
  position:absolute;
  top:0;
  left:0px;
  transform:translatex(0px);
  webkit-transform:translatex(0px);
  transition:all 600ms;
}
.sujetAvatar > img{
  width:100%;
}

.sujetInfos div{
padding:3px;
border-bottom:solid 1px #fff;margin-left:10px;
  font-size:9px;font-family:tahoma; color:#999;
}
.sujetNouveauRep{
  margin-bottom:0px;

}
.sujetFond{
 background:#f2f2f2!important;
  font-size:12px;
  color:#222;
  width:100%;
  padding-top:10px;
}
.sujetTitre{

  background-color:#f5f5f5;
  color:#222;
  font-size:15px;
  text-transform:uppercase;
  text-align:center;
  font-weight:normal;
  letter-spacing:2px;
  margin-bottom:10px;
  font-family: poppins;
  width:100%;
  height:auto;
}
.sujetNav{
  font-size:0;
}
.sujetNav a{
  color:#222!important;
  font-family:open sans;
 
  font-weight:normal;
  font-size:10px;
  text-decoration:none!important;
}
.sujetNav a:not(:last-of-type):after{
  content:"-";
  margin:0 2px;
}
.sujetPagination{
  color:#ccc;
  background-color:#f5f5f5;
  border:solid 1px #eee;
  padding:10px;

}
.sujetPaginationLast{
  padding:0 10px 10px;
}
.sujetPagination a{
  color:#504254!important;

}
.sujetPagination img{
  height:10px;
  opacity:0.8;
}
.sujetHeureEdit{
  height:20px;
  padding:10px 0 0 0;width:700px;
 
}
.sujetHeure{
  float:left;
  font-size:9px;
  text-transform:lowercase;
  font-family:tahoma;
  border:solid 1px #eee;
  padding:5px;
  margin-left:10px;
}
.sujetEdit{
  float:right;
}
.sujetEdit img{
  height:20px;
  opacity:;
  margin:0 3px;
}


.sujetPermissions{
  padding:10px;
  background-color:#e2dfed;
}
/*Profil du posteur*/
.sujetProfil{
 background: #f5f5f5;
    border: solid 1px #eee;
    height: 355px;
    margin-top: 70px;
    padding: 10px;
    width: 255px;
}
.sujetPseudo{
    border-bottom: solid 2px #ccc;
    font-family: Poppins, sans-serif;
    font-size: 20px;
    height: 70px;
    margin-left: -277px;
    margin-top: -10px;
    padding-left: 170px;
    padding-right: 2px;
    padding-top: 10px;
    text-align: left;
    text-decoration: none!important;

  background:#eee;
}
.sujetPseudo{
  text-decoration:none!important;
}
.sujetPseudo strong{
  font-weight:normal;
}
.sujetOn{
  position:absolute;
  bottom:15px;
  right:15px;
  transform:translatex(0px);
  webkit-transform:translatex(0px);
  transition:all 600ms;
}
.sujetHover:hover .sujetOn{
  transform:translatex(-200px);
  webkit-transform:translatex(-200px);
}
.sujetHover{
  position:relative;
  width:250px;
  height:350px;
  overflow:hidden;
 
}


.sujetRang{
  color:#222;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:10px;
  padding-left:20px;
font-family: Verdana;
margin-top:5px;
 
}
form#quick_reply {
  margin-top:10px;
  width:880px;
}

.sujetFeuille{
  padding:10px;
}
.sujetFeuille br:first-of-type{
  display:none;
}
/******************************************************************FIN MESSAGE ET PROFIL ********************************************/




Merci de votre attention !

[Invité]

Hello solvia,

alors le script va donner une class ( header_groupe ) aux pseudos ayant une couleur car il faut bien comprendre que la couleur du groupe va impacter la couleur du pseudo et son rang et parfois le masquer, j'ai donc ajouté cette class pour y remédier.

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


.sujetPseudo.header_groupe .sujetRang,
.sujetPseudo.header_groupe a[href^="/u"] span[style] {color:white!important;}


Penses à cliquer sur le bouton

Puis le script qui va ajouter la couleur de fond:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Codes Javascript

Activer la gestion des codes Javascript : Oui

Mets un titre explicite.
Cocher  Sur les sujets



Déposes ceci:

Code:


$(function(){$('.sujetPseudo a[href^="/u"] span[style]').each(function(){var color=$(this).css('color');
if(color){$(this).closest('div').addClass('header_groupe').css('background-color',color);}
});});


Penses a cliquer sur le bouton VALIDER

Et voilou .

a++

[solvia]

aaaah !! ça marche nickel !!
merci énormément ! pour le code et pour avoir pris le temps <3
je vous souhaite une belle journée

[Invité]

Re,

bonne et belle journée à toi aussi .
a++