La date/heure actuelle est Ven 10 Mai 2024 - 3:04
1 résultat trouvé pour 77a62e
Modifier couleur cadre avatar en fonction du groupe ou du rang
Détails techniques
Version du forum : Invision
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome, Opera
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://symbiosis.forumactif.com/
Description du problème
Bonjour,Après une recherche approfondie sur votre forum et sur le net et le test non concluant de quelques propositions (notamment : https://forum.forumactif.com/t332842-cadre-autour-de-l-avatar-en-fonction-du-groupe ; https://forum.forumactif.com/t375093-mettre-un-cadre-different-en-fonction-du-groupe ; https://forum.forumactif.com/t395141-couleur-du-profil-selon-le-groupe-de-l-utilisateur), je ne trouve pas de réponse satisfaisante.
Je voudrais que la couleur du cadre autour de l'avatar des membres de mon forum corresponde à la couleur du groupe dans lequel ils sont inscrits.
J'imagine que cela se passe dans le template viewtopic_body, que je vous donne ici :
- 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 = { };
}
});
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 id="navstrip" class="clearfix">
<div class="boutons_admin" style="margin-top: -28px; margin-bottom: -38px; text-align: right; margin-right: 0.5px; text-transform: none !important">
<a id="nouveaux_mess" href="{U_POST_NEW_TOPIC}" rel="nofollow">Nouveau sujet</a> <a id="mes_messages"href="{U_POST_REPLY_TOPIC}" rel="nofollow">Répondre</a>
</div>
<span id="navstrip" class="clearfix">
<div class="nav"><a href="{U_INDEX}"><span>{L_INDEX}</span></a></div>
{NAV_CAT_DESC}
</span>
<div id="navstrip" class="clearfix"></div>
<!-- BEGIN topicpagination -->
<div class="pagination topic-options">
{PAGINATION}
</div>
<!-- END topicpagination -->
<div class="borderwrap message_profil">
<div class="fond_titre">
<span class="symbole_titre">▷</span>
<h2>{TOPIC_TITLE}</h2>
</div>
{POLL_DISPLAY}
<!-- BEGIN postrow -->
<!-- BEGIN hidden -->
<div class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</div>
<!-- END hidden -->
<!-- BEGIN first_post_br -->
</div>
<hr id="first-post-br" />
<div class="borderwrap">
<!-- END first_post_br -->
<!-- BEGIN displayed -->
<div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ONLINE_IMG_NEW} clearfix post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
<div class="post-container"{postrow.displayed.THANK_BGCOLOR}>
<div class="postbody clearfix">
<div class="postprofile profil_message" id="profile{postrow.displayed.U_POST_ID}">
<div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
<div class="image_enligne">
{postrow.displayed.ONLINE_IMG_INV}
</div>
<div class="avatar_message">
<div class="avatar_image">
<div id="cadre_avatar">{postrow.displayed.POSTER_AVATAR}</div>
</div>
<div class="informations_avatar">
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</div>
</div>
<div class="pseudo_message">
{postrow.displayed.POSTER_NAME}
</div>
<div class="rang_message">
{postrow.displayed.POSTER_RANK_NEW}
</div>
<div class="boutons_profil">
<!-- BEGIN user_logged_in -->
{postrow.displayed.PROFILE_IMG}
<!-- BEGIN switch_user_pm -->
{postrow.displayed.PM_IMG}
<!-- END switch_user_pm -->
<!-- BEGIN switch_user_email -->
{postrow.displayed.EMAIL_IMG}
<!-- END switch_user_email -->
<!-- BEGIN switch_contact_row -->
<!-- BEGIN contact_field -->
{postrow.displayed.user_logged_in.switch_contact_row.contact_field.CONTENT}
<!-- END contact_field -->
<!-- END switch_contact_row -->
<!-- BEGIN switch_user_posts -->
{postrow.displayed.USER_POSTS_IMG}
<!-- END switch_user_posts -->
<!-- END user_logged_in -->
</div>
</div>
<div class="postbody-head postdetails post-header"{postrow.displayed.THANK_BGCOLOR}>
<div class="post-entry">
<!-- 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="font-weight: normal; font-family: 'Heebo', sans serif; color: #363B37; background: #fff; z-index: 99; border: 1px solid #CCCCCC; padding: 15px; min-height: 277px; margin: 10px 42px 122px 42px">{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>
{postrow.displayed.EDITED_MESSAGE}
</div>
<!-- BEGIN switch_signature -->
<br />
<div id="sig{postrow.displayed.U_POST_ID}" class="signature_div">{postrow.displayed.SIGNATURE_NEW}</div>
<!-- END switch_signature -->
</div>
</div>
<div class="contenu_footer_message">
<div class="message_date">
{postrow.displayed.POST_DATE_NEW}
</div>
<div class="liste_sujets_bouton_footer" style="text-align: right !important; margin-right: -11px !important; margin-top: -2px !important;">
{postrow.displayed.QUOTE}
{postrow.displayed.EDIT}
{postrow.displayed.DELETE}
{postrow.displayed.IP}
</div>
</div>
</div> <!-- closing tag post -->
<!-- END displayed -->
<!-- END postrow -->
</div>
<!-- BEGIN topicpagination -->
<div class="pagination topic-options">
{PAGINATION}
</div>
<!-- END topicpagination -->
<ul class="posting-buttons clearfix">
</ul>
<!-- BEGIN viewtopic_bottom -->
<div class="boutons_admin" style="margin-top: -20px; margin-bottom: 5px; text-align: center; text-transform: none !important">
<a id="nouveaux_mess" href="{U_POST_NEW_TOPIC}" rel="nofollow">Nouveau sujet</a> <a id="mes_messages" href="{U_POST_REPLY_TOPIC}" rel="nofollow">Répondre</a>
</div>
<div class="moderation_footer">
<div class="boutons_moderation" style="padding-top: 12px !important">
{S_TOPIC_ADMIN}
</div>
<div class="moderer" style="margin-top: -14px !important">
{S_AUTH_LIST}
</div>
<br />
</div>
<!-- END viewtopic_bottom -->
<div class="clearfix empty-clear"></div>
<!-- BEGIN promot_trafic -->
<div class="row2">
<div id="ptrafic_close" class="clearfix" style="display:none">
<div class="maintitle floated">
<h3>{PROMOT_TRAFIC_TITLE}</h3>
<div class="right rtl-inversion-right">
<a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a>
</div>
</div>
</div>
<div id="ptrafic_open" class="clearfix" style="display:''">
<div class="maintitle floated">
<h3>{PROMOT_TRAFIC_TITLE}</h3>
<div class="right rtl-inversion-right">
<a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a>
</div>
</div>
<div>
<!-- BEGIN link -->
» <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
<!-- END link -->
</div>
</div>
</div>
<!-- END promot_trafic -->
<!-- BEGIN switch_forum_rules -->
</div>
<div class="row1" id="forum_rules">
<div class="maintitle">
<h3>{L_FORUM_RULES}</h3>
</div>
<table>
<tr>
<!-- BEGIN switch_forum_rule_image -->
<td class="logo">
<img src="{RULE_IMG_URL}" alt=""/>
</td>
<!-- END switch_forum_rule_image -->
<td class="rules post-entry">
{RULE_MSG}
</td>
</tr>
</table>
</div>
<!-- END switch_forum_rules -->
<!-- BEGIN switch_user_logged_in -->
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .post-entry', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
Le CSS correspondant aux messages des sujets du forum :
- Code:
.post .post-header, .post {
background: url(https://2img.net/r/hpimg11/pics/390440footer.png) no-repeat bottom right #fff;
border: 0;
text-align: justify;
word-wrap: normal !important;
word-break: normal !important;
font-size: 12px;
min-height: 547px;
}
.message_profil .fond_titre {
width: auto;
}
/* FOOTER */
.contenu_footer_message {
background: url(https://2img.net/r/hpimg11/pics/168287texture.jpg);
color: #fff;
padding: 2%;
}
.message_date {
float: left;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
}
.message_boutons {
text-align: right;
}
/* PROFIL */
.post {
background: url(https://2img.net/r/hpimg11/pics/168287texture.jpg);
}
.postprofile {
position: relative;
text-align: center;
}
.image_enligne {
position: absolute;
right: 3.5%;
z-index: 7;
}
/* AVATAR */
.avatar_message {
height: 320px;
overflow: hidden;
position: relative;
width: 200px;
margin: auto;
border: 2px solid #36cb98;
}
.informations_avatar {
position: relative;
margin-top: 320px;
transition: all 1s;
height: 320px;
color: #fff;
padding: 10%;
box-sizing: border-box;
text-align: left;
}
.avatar_message:hover .informations_avatar {
transition: all .5s;
margin-top: -320px;
background: rgba(0,0,0,.6);
}
.informations_avatar span {
text-transform: uppercase;
font-size: 10px;
color: #36cb98!important;
font-weight: bold;
}
/* PSEUDO */
.pseudo_message {
margin: 10% 0 0 0;
display: block;
font-family: times new roman;
letter-spacing: -2px;
font-size: 24px;
}
/* RANG */
.rang_message {
letter-spacing: 5px;
color: #fff;
text-transform: uppercase;
font-size: 10px;
margin: 2% 0 5% 0;
}
/* BOUTONS PROFIL */
.boutons_profil img {
display: none;
}
.boutons_profil a {
font-size: 10px;
display: block;
width: 90%;
background: url(https://i.imgur.com/LEcGgfb.jpg);
margin: 2% auto;
line-height: 3;
color: #fff !important;
transition: all .5s;
}
.boutons_profil a:hover {
background: url('https://2img.net/r/hpimg11/pics/168287texture.jpg');
transition: all .5s;
}
/* NOUVEAU REPONDRE FOOTER */
.posting-options.topic-options {
width: 100%;
background: #fff;
padding: 2% 0;
}
/* MODERER */
.moderation_footer {
background: #fff;
text-align: center;
padding-top: -10px;
}
.moderer {
font-size: 0;
}
.moderer a {
background: url('https://2img.net/r/hpimg11/pics/168287texture.jpg');
display: block;
margin: auto;
width: 20%;
text-align: center;
text-transform: uppercase;
color: #fff !important;
border-radius: 25px;
transition: .5s all;
line-height: 28px;
font-size: 10px;
}
.moderer a:hover {
background: url('https://i.imgur.com/LEcGgfb.jpg');
transition: .5s all;
color: #fff !important;
}
Couleur des groupes :
Groupe 1 : #6800f0
Groupe 2 : #bd980d
Groupe 3 : #77a62e
Groupe 4 : #b64a4a
Groupe 5 : #2c819e
Merci d'avance !
- le Mar 8 Fév 2022 - 21:43
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Modifier couleur cadre avatar en fonction du groupe ou du rang
- Réponses: 4
- Vues: 663