La date/heure actuelle est Mar 4 Oct 2022 - 22:50

2 résultats trouvés pour 73403E

Donner couleur de fond différente (et définie) de la couleur du pseudo en fonction du groupe

Bonjour !
Le forum étant en maintenance, je ne vais pas pouvoir vérifier ce que je vais dire, mais déjà, une remarque :
Code:
$('#MBER').each(function()

Ceci n'est pas possible. each() permet de boucler sur un élément, mais #MBER montre que vous êtes sur un id ; or, un id ne peut pas se retrouver plusieurs fois dans la page, ce n'est pas fait pour. Boucler sur un id qui ne doit se trouver qu'une seule fois dans la page n'a donc pas de sens, il faudrait remplacer MBER par un class. Là, ça deviendrait logique et exploitable.

Dans votre JavaScript, $(this).find('.nameLMBER span').css('color') permet de récupérer la couleur d'un pseudo.
Vous pensez récupérer #73403E (format Hexadécimal) pour le groupe des admin par exemple, mais vous allez en fait récupérer la couleur sous la forme rgb(115, 64, 62) (format RGB). Vous allez devoir faire les conversions à la main, avec ce petit outil par exemple : https://nobsmarketplace.com/resources/tools/rgb-to-hex/

Enfin, puisque vous voulez faire des tests / conditions, vous aller avoir un code final de ce style :
Code:
$(function(){
      $('.MBER').each(function() {
            var color = $(this).find('.nameLMBER span').css('color');
            // Groupe admin
            if (color == 'rgb(115, 64, 62)'){
                  $(this).css('background', '#DB9A5C');
                  $(this).attr('style', 'background: #DB9A5C');
            }
            // Groupe modos
            if (color == 'rgb(?, ?, ?)'){
                  $(this).css('background', '#?');
                  $(this).attr('style', 'background: #?');
            }
      });
});


Les lignes $(this).attr('style', 'background: #DB9A5C'); ne sont potentiellement pas utiles, essayez sans et si ça ne marche pas, essayez avec !
par Toryudo
le Dim 26 Juin 2022 - 11:59
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Donner couleur de fond différente (et définie) de la couleur du pseudo en fonction du groupe
Réponses: 2
Vues: 409

Donner couleur de fond différente (et définie) de la couleur du pseudo en fonction du groupe

Détails techniques


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

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://chanterune.forumactif.com

Description du problème

Bonjour,

Un peu partout sur mon forum, et en particulier dans les messages et dans la liste des membres, j'aimerais que le fond du cadre de l'avatar s'adapte à la couleur du groupe. Mais pas de manière habituelle : il ne s'agit pas de donner au fond la même couleur que le pseudo. Je pense que ça doit passer par du JS :

Il faudrait 1) détecter la couleur du pseudo (puisque c'est la couleur du groupe) et 2) dire au fond du cadre de l'avatar de prendre la valeur X pour son background s'il détecte en 1) la valeur Y.

Exemple : le groupe "Admin" a la couleur #73403E, et donc comme il est visible dans la capture d'écran, le pseudo des membres de ce groupe est de cette même couleur. Toujours dans la capture d'écran, vous pouvez constater que le cadre qui entoure les avatars est blanc, par défaut. En fait, je voudrais qu'il apparaisse en #DB9A5C pour les membres du groupe Admin. Autrement dit, je cherche un JS qui puisse dire "si la couleur du pseudo est #73403E, alors la couleur du fond est #DB9A5C".

Pour ce qui concerne la liste des membres, le Template est celui-ci :

Code:
<div class="sujet-cadre">
  <div class="affichage_sujets">
<form action="{S_MODE_ACTION}" method="get">
    <table cellspacing="0" cellpadding="5" border="0" align="center" class="tleLMBER">
    <tr>
      <td class="header_sujet" style="padding: 0;" nowrap="nowrap"><h1>{L_ORDER_OR_SELECT}</h1></td>
    </tr>
    <tr>
    <td>
    <table cellspacing="0" cellpadding="0" border="0" align="center" class="genmed">
    <tr>
    <td width="100%" style="padding:5px 0;">{L_USER_SELECT} <input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />    
    {L_SELECT_SORT_METHOD} {S_MODE_SELECT}    
    {L_ORDER} {S_ORDER_SELECT}    
    {S_HIDDEN_SID}
    <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </form>
    <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr><td class="{memberrow.ROW_CLASS}" align="center">
    <!-- BEGIN memberrow -->
    <div id="LMBER"><div id="MBER"><div class="nameLMBER"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div>
    <div class="imgLMBER">{memberrow.AVATAR_IMG}<div><div>{memberrow.POSTS} messages<br/><br/>inscrit le {memberrow.JOINED}<br/><br/>dernière visite : {memberrow.LASTVISIT}<br/><br/>{memberrow.INTERESTS}</span></div></div></div><div class="btnLMBER">{memberrow.PM_IMG} {memberrow.WWW_IMG}</div>
    <!-- BEGIN switch_td_group -->
    <span style="display:none;">{memberrow.GROUPS}</span>
    <!-- END switch_td_group -->
    </div></div>
    <!-- END memberrow -->
    </td>
    </tr>
    <!-- BEGIN switch_no_user -->
    <tr>
    <td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
    </tr>
    <!-- END switch_no_user -->
    </table>
    <!-- BEGIN switch_pagination -->
    <table style="margin:auto; width:650px;" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><span class="nav">{PAGE_NUMBER}</span></td>
    <td align="right"><span class="nav">{PAGINATION}</span></td>
    </tr>
    </table>
    <br />
    <!-- END switch_pagination -->
</div></div>


Et le CSS correspondant est celui-ci :

Code:
/* AFFICHAGE LISTE DES MEMBRES */
/* BLOC ENTÊTE - RECHERCHER UN UTILISATEUR OU MODIFIER ORDRE AFFICHAGE */
.tleLMBER {
    margin: 0 auto 10px;
    width: 100%;
    background: #e3e3e3;
}
/* TITRE ENTÊTE */
.tleLMBER th {
margin-bottom:5px; padding:5px 0;
text-transform:uppercase; font-family:Arial; font-size:16px;
background:black; color:white; /* MODIFIABLE */
}
/* BLOC LISTE DES MEMBRES */
#LMBER {
margin:auto; width:660px;
}
 /* BLOC MEMBRE */
#MBER {
float:left; margin:0 5px 10px;
width:200px; height:360px; padding:5px 5px 0; font-family:Arial;
background:rgba(255,255,255,0.5); /* MODIFIABLE */
}
/* PSEUDONYME */
.nameLMBER{
width:200px; height:15px; padding-bottom:5px;
text-align:center; text-transform:uppercase;
}
/* AVATAR */
.imgLMBER img{
width:200px; height:320px;
}
.imgLMBER div {
position:relative; margin-top:-320px;
width:200px; height:320px; overflow:hidden;
}
/* BLOC MESSAGES / INSCRIPTION / DERNIERE VISITE / INFORMATION */
.imgLMBER div div{
width:180px; height:300px; padding:10px; overflow:auto;
background:rgba(255,255,255,0.8); color:black; /* MODIFIABLE */
font-size:11px; text-align:justify;
transform:translateY(640px); -webkit-transform:translateY(640px);
transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
}
#MBER:hover .imgLMBER div div{
transform:translateY(320px); -webkit-transform:translateY(320px);
}
/* IMAGES MP * WWW */
.btnLMBER {
position:relative; z-index:3; margin:-10px auto 0;
}
.btnLMBER img {
height:20px;
}


J'ai suivi le tuto donné par Oka.mi ici et voilà ce que donne le test de mon JS (coché sur toutes les pages) :

Code:
$(function(){
  $('#MBER').each(function() {
  $(this).css('background', $(this).find('.nameLMBER span').css('color'));
  $(this).find('#MBER').attr('style','background:#73403E');
        });
});


Ce qui donne ce résultat :

Voir l'image:


Le résultat n'est pas le bon (le fond prend la couleur du pseudo) alors que j'ai spécifié la couleur #DB9A5C.

Est-ce que quelqu'un pourrait m'indiquer où ma lecture du JS fait défaut ?

Merci beaucoup !
par Têted'ampoule
le Dim 26 Juin 2022 - 10:52
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Donner couleur de fond différente (et définie) de la couleur du pseudo en fonction du groupe
Réponses: 2
Vues: 409

Revenir en haut

Sauter vers: