Donner couleur de fond différente (et définie) de la couleur du pseudo en fonction du groupe
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
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 !
Re: 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 :
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 :
Les lignes $(this).attr('style', 'background: #DB9A5C'); ne sont potentiellement pas utiles, essayez sans et si ça ne marche pas, essayez avec !
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()
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 !
Re: Donner couleur de fond différente (et définie) de la couleur du pseudo en fonction du groupe
Bonjour,
Et... ça marche parfaitement ! C'est super, merci beaucoup (en plus, je comprends le JS, ce qui n'est pourtant pas ma tasse de thé !)
J'ai fait le test sur la liste des membres et sur les sujets, les deux fonctionnent parfaitement.
Merci beaucoup !
Et... ça marche parfaitement ! C'est super, merci beaucoup (en plus, je comprends le JS, ce qui n'est pourtant pas ma tasse de thé !)
J'ai fait le test sur la liste des membres et sur les sujets, les deux fonctionnent parfaitement.
Merci beaucoup !
Sujets similaires
» Modernbb : donner une couleur différentes au profil membre par rapport au groupe
» Couleur de groupe en fond de pseudo
» Appliquer la couleur du groupe en fond du pseudo
» Mettre le pseudo en différente couleur.
» Donner la couleur du groupe à une div
» Couleur de groupe en fond de pseudo
» Appliquer la couleur du groupe en fond du pseudo
» Mettre le pseudo en différente couleur.
» Donner la couleur du groupe à une div
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum