Mettre un cadre différent 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
Mettre un cadre différent en fonction du groupe
Détails techniques
Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://growing-strong.taguilde.net/forum
Description du problème
Bonjour à tous,Alors j'ai plusieurs groupes sur le forum:
- GM
- Officiers
- Membres
- Nouveaux
- VIP
- Visiteur enregistré
J'ai des cadres sous formes d'image que je souhaiterai assigner a ces groupes.
Chaque groupe a sont cadres avec une couleur différente.
Les avatars sont tous de même taille cet à dire 200x200px.
Malheureusement je fait cela manuellement ce qui me prend un temps fou car je doit éditer chaque avatar de chaque membre peut importe le groupe.
Donc mettre en place des cadres automatique qui sont lié aux groupes.
Si vous avez une solution je suis preneur.
Merci d'avance.
Dernière édition par yann59160 le Ven 23 Jan 2015 - 2:38, édité 1 fois (Raison : Résolu)
Re: Mettre un cadre différent en fonction du groupe
Bonjour Yann,
Il est possible de rajouter un cadre autour / au dessus des avatars en fonction de la couleur du pseudo ^__^
En gros, si un membre a un pseudo vert (Officiers), on lui rajoute en CSS le cadre en image au dessus
On peut faire ça en javascript ^-^
Pour cela, pourrais tu nous fournir en png les différentes images de ton cadre s'il te plait ?
Il est possible de rajouter un cadre autour / au dessus des avatars en fonction de la couleur du pseudo ^__^
En gros, si un membre a un pseudo vert (Officiers), on lui rajoute en CSS le cadre en image au dessus
On peut faire ça en javascript ^-^
Pour cela, pourrais tu nous fournir en png les différentes images de ton cadre s'il te plait ?
Re: Mettre un cadre différent en fonction du groupe
Bonjour Nihil,
Merci d'avoir pris le temps de répondre.
Donc si je comprends bien, les cadres ne seront pas mis manuellement à chaque fois que la personne évoluera dans les groupes (vert; bleu, etc) celui s'adaptera et mettra le cadre adéquate ?
Merci d'avoir pris le temps de répondre.
- Code:
GM (pseudo en rouge):http://img15.hostingpics.net/pics/113814aMaitredeguilde.png
Officier (pseudo en vert):http://img15.hostingpics.net/pics/510971aOfficier.png
Membre (pseudo bleu foncé):http://img15.hostingpics.net/pics/362299aMembre.png
Nouveau (pseudo bleu clair):http://img15.hostingpics.net/pics/550905aNouveaux.png
VIP (pseudo violet): http://img15.hostingpics.net/pics/277425aVIP.png
Visiteur enregistré (pseudo en jaune):http://img15.hostingpics.net/pics/856108aenregistr.png
Donc si je comprends bien, les cadres ne seront pas mis manuellement à chaque fois que la personne évoluera dans les groupes (vert; bleu, etc) celui s'adaptera et mettra le cadre adéquate ?
Re: Mettre un cadre différent en fonction du groupe
Hello
Pourrais je avoir ton template viewotopic_body (si tu l'as modifié... j'suis bête, j'avais oublié de le demander xD) ?
Voici comment cela fonctionnera :
En fonction de la couleur de pseudo du membre, un cadre différent sera ajouté grâce à du CSS et du JS au dessus de l'avatar dans les messages. L'avatar sera carré, il faut que si possible les membres fassent l'effort d'avoir un avatar le plus "carré" possible, sinon certaines parties pourront être coupées :/
Souhaites tu que le cadre soit aussi présent aux autres endroits du forum (autre que les messages) ?
C'est faisable pour plusieurs endroits, il faut juste prendre conscience que c'est un peu "lourd" comme remplacement ^^ (il faudra changer plusieurs templates).
Pourrais je avoir ton template viewotopic_body (si tu l'as modifié... j'suis bête, j'avais oublié de le demander xD) ?
Voici comment cela fonctionnera :
En fonction de la couleur de pseudo du membre, un cadre différent sera ajouté grâce à du CSS et du JS au dessus de l'avatar dans les messages. L'avatar sera carré, il faut que si possible les membres fassent l'effort d'avoir un avatar le plus "carré" possible, sinon certaines parties pourront être coupées :/
Souhaites tu que le cadre soit aussi présent aux autres endroits du forum (autre que les messages) ?
C'est faisable pour plusieurs endroits, il faut juste prendre conscience que c'est un peu "lourd" comme remplacement ^^ (il faudra changer plusieurs templates).
Re: Mettre un cadre différent en fonction du groupe
Voici le code du fichier viewtopic_body que j'ai déjà modifier:
Normalement il y a pas de soucis, vis a vis de la taille des avatars.
Oui, je souhaite également mettre les cadres à 3 autres endroits sur le site.
- le profil
- la memberlist (optionnel)
et pour le derniers qui est aussi optionnel j'ai mis l'affichage des avatars sur les derniers messages.
Pourrais tu m'indiquer également les fichiers que je devrais éventuellement modifier ?
Merci d'avance
- 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>
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="left" valign="middle" nowrap="nowrap">
<span class="nav">
<!-- 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 -->
</span>
</td>
<td class="nav" valign="middle" width="100%">
<span class="nav" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a class="nav" 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>
</td>
<td align="right" valign="bottom" nowrap="nowrap" width="100%">
<!-- BEGIN switch_twitter_btn -->
<span id="twitter_btn" style="margin-left: 6px; ">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</span>
<!-- END switch_twitter_btn -->
<!-- BEGIN switch_fb_likebtn -->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
<!-- END switch_fb_likebtn -->
<span class="gensmall bold">
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
<!-- BEGIN switch_plus_menu -->
|
<script type="text/javascript">//<![CDATA[
var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
//]]>
</script>
<!-- END switch_plus_menu -->
</span>
</td>
</tr>
</table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
<tr align="right">
<td class="catHead" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint"> </td>
<td align="center" class="t-title">
<h1 class="cattitle"> {TOPIC_TITLE}</h1>
</td>
<td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
</tr>
</table>
</td>
</tr>
<!-- BEGIN topicpagination -->
<tr>
<td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END topicpagination -->
{POLL_DISPLAY}
<tr>
<th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
<th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
</tr>
<!-- BEGIN postrow -->
<!-- BEGIN hidden -->
<tr>
<td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
</tr>
<!-- END hidden -->
<!-- BEGIN displayed -->
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong><center>{postrow.displayed.POSTER_NAME}</center></strong></span>
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_AVATAR}<br />
{postrow.displayed.RANK_IMAGE}<!-- Nom du grade -- {postrow.displayed.POSTER_RANK}--><br /><br />
<!-- 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}
</span><br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT} <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
<td valign="top" nowrap="nowrap" class="post-options">
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
</td>
</tr>
<tr>
<td colspan="2" class="hr">
<hr />
</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="postbody">
<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 class="clear"></div>
<!-- BEGIN switch_signature -->
<div class="signature_div">
{postrow.displayed.SIGNATURE}
</div>
<!-- END switch_signature -->
</div>
<span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
</td>
</tr>
</table>
</td>
</tr>
<tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
<a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
</td>
<td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
</td>
</tr>
</table>
</td>
</tr>
<!-- BEGIN first_post_br -->
</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
<th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
</tr>
<!-- END first_post_br -->
<!-- END displayed -->
<!-- END postrow -->
<!-- BEGIN no_post -->
<tr align="center">
<td class="row1" colspan="3" height="28">
<span class="genmed">{no_post.L_NO_POST}</span>
</td>
</tr>
<!-- END no_post -->
<tr align="right">
<td class="catBottom" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint"> </td>
<td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
<td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
<tr>
<td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
<!-- BEGIN topicpagination -->
<td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
<!-- END topicpagination -->
</tr>
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<tr>
<td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
</tr>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</table>
<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
<tr>
<td class="catBottom" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
<td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
<tr>
<td class="catBottom" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
<td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="row2 postbody" valign="top">
<!-- BEGIN link -->
» <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
<!-- END link -->
</td>
</tr>
</table>
<!-- END promot_trafic -->
<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
<tbody>
<tr>
<td class="catBottom">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">
<h1 class="cattitle"> {L_FORUM_RULES}</h1>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="row1 clearfix">
<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 postbody">
{RULE_MSG}
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!-- END switch_forum_rules -->
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="row2" colspan="2" align="center" style="padding:0px">
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}<br />
<!-- END switch_user_logged_in -->
</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
<tbody>
<!-- BEGIN show_permissions -->
<tr>
<td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
<td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
</tr>
<!-- END show_permissions -->
<tr>
<td class="catBottom" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><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></td>
<!-- BEGIN show_permissions -->
<td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
<!-- END show_permissions -->
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
<tbody>
<tr>
<td class="catBottom" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><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></td>
<td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
<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 viewtopic_bottom -->
<td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
<!-- END viewtopic_bottom -->
<!-- BEGIN moderation_panel -->
<td align="center">
<span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
</td>
<td align="center" width="250">
<span class="gensmall"> </span>
</td>
<!-- END moderation_panel -->
</tr>
</table>
</form>
<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<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}" />
<span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
</form>
</td>
</tr>
</table>
<!-- END viewtopic_bottom -->
<!-- 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>
Normalement il y a pas de soucis, vis a vis de la taille des avatars.
Oui, je souhaite également mettre les cadres à 3 autres endroits sur le site.
- le profil
- la memberlist (optionnel)
et pour le derniers qui est aussi optionnel j'ai mis l'affichage des avatars sur les derniers messages.
Pourrais tu m'indiquer également les fichiers que je devrais éventuellement modifier ?
Merci d'avance
Re: Mettre un cadre différent en fonction du groupe
Alors, on va commencer par faire quelques petites modification sur le template viewtopic_body ^___^
On va remplacer cette zone là :
Par ceci :
Normalement, une fois validé et publié, il n'y a aucun changement à constater au niveau de l'affichage. (cela va juste me permettre de faire mes test plus rapidement xD)
Pour les autres template, on fait fonctionner dans les messages et ensuite on passe à la suite :p
On va remplacer cette zone là :
- Code:
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_AVATAR}<br />
Par ceci :
- Code:
<div class="cadre-avatar">{postrow.displayed.POSTER_AVATAR}</div>
<span class="postdetails poster-profile">
Normalement, une fois validé et publié, il n'y a aucun changement à constater au niveau de l'affichage. (cela va juste me permettre de faire mes test plus rapidement xD)
Pour les autres template, on fait fonctionner dans les messages et ensuite on passe à la suite :p
Re: Mettre un cadre différent en fonction du groupe
Très bien, voila qui est fait.
Re: Mettre un cadre différent en fonction du groupe
Dernière modification de ce template là normalement, on va changer :
En
Ensuite dans le CSS on va ajouter ceci :
Une fois encore normalement si tout va bien, aucun changement n'est à constater. Les changements apparaitront une fois qu'on ajoutera le javascript (^-^)
- Code:
{postrow.displayed.POSTER_NAME}
En
- Code:
<span class="pseudo">{postrow.displayed.POSTER_NAME}</span>
Ensuite dans le CSS on va ajouter ceci :
- Code:
/* -----------------
* Système de cadre pour les avatars
* -----------------
*/
.cadre-avatar {
position: relative;
width: 200px;
height: 200px;
}
.cadre-avatar.c-modif:before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 1;
pointer-events: none; /* permet de garder le click sur les liens */
}
/* Placement du lien dans le cadre */
.cadre-avatar.c-modif a {
position: absolute;
top: 0; left:0; right: 0; bottom:0;
width: 185px;
height: 185px;
overflow: hidden;
margin: auto;
}
/* Pour forcer la taille image avatar */
.cadre-avatar.c-modif img {
width: 100%;
}
/* Image Cadre Maitre Guilde */
.c-maitre-guilde:before {
background: url('http://img15.hostingpics.net/pics/113814aMaitredeguilde.png');
}
/* Image Cadre Officier */
.c-officer:before {
background: url('http://img15.hostingpics.net/pics/510971aOfficier.png');
}
/* Image Cadre Membre */
.c-membre:before {
background: url('http://img15.hostingpics.net/pics/362299aMembre.png');
}
/* Image Cadre Nouveau */
.c-nouveau:before {
background: url('http://img15.hostingpics.net/pics/550905aNouveaux.png');
}
/* Image Cadre VIP */
.c-vip:before {
background: url('http://img15.hostingpics.net/pics/277425aVIP.png');
}
/* Image Cadre Visiteur enregistré */
.c-enregistre:before {
background: url('http://img15.hostingpics.net/pics/856108aenregistr.png');
}
/* -----------------
* Fin système de cadre pour les avatars
* -----------------
*/
Une fois encore normalement si tout va bien, aucun changement n'est à constater. Les changements apparaitront une fois qu'on ajoutera le javascript (^-^)
Re: Mettre un cadre différent en fonction du groupe
Voila qui est fait.
Je suppose que je dois me rendre dans "Gestion des codes Javascript" et crée un nouveau code javascript ?
Merci
Je suppose que je dois me rendre dans "Gestion des codes Javascript" et crée un nouveau code javascript ?
Merci
Re: Mettre un cadre différent en fonction du groupe
Hum, je ne sais pas si c'est normal mais je ne vois pas le CSS de mon dernier message ajouté :s
Pour le javascript oui, il faut aller là, créer un nouveau code avec comme nom "Cadre des avatars dans les messages", et cocher "Sur les sujets".
Ensuite on met comme code :
Une fois ce code javascript ajouté ainsi que le CSS de mon message précédent ajouté, un profil devrait ressembler à ceci :
On voit un double cadre car il y avait déjà un cadre sur l'image d'avant (l'image est retaillée pour avoir la taille de l'intérieur du cadre)
Il faut mettre comme avatar une image carré (sans cadre), si possible au format 185px * 185px
Par exemple avec cette image là mise comme avatar : http://lorempixel.com/output/animals-q-c-185-185-3.jpg
On aura comme résultat :
Pour le javascript oui, il faut aller là, créer un nouveau code avec comme nom "Cadre des avatars dans les messages", et cocher "Sur les sujets".
Ensuite on met comme code :
- Code:
$(function(){
/* Liste des groupes */
var groupes = {
"ff0000" : "c-maitre-guilde",
"05f020" : "c-officer",
"1751e6" : "c-membre",
"0fabff" : "c-nouveau",
"b216f0" : "c-vip",
"e6b72b" : "c-enregistre",
};
/* Remplacement dans les messages */
$('.pseudo span').each(function(){
var $this = $(this);
var couleur = rgb2hex($this.css('color'));
var $cadreAvatar = $this.closest('td').find('.cadre-avatar');
$cadreAvatar.addClass('c-modif ' + groupes[couleur]);
});
});
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
Une fois ce code javascript ajouté ainsi que le CSS de mon message précédent ajouté, un profil devrait ressembler à ceci :
On voit un double cadre car il y avait déjà un cadre sur l'image d'avant (l'image est retaillée pour avoir la taille de l'intérieur du cadre)
Il faut mettre comme avatar une image carré (sans cadre), si possible au format 185px * 185px
Par exemple avec cette image là mise comme avatar : http://lorempixel.com/output/animals-q-c-185-185-3.jpg
On aura comme résultat :
Re: Mettre un cadre différent en fonction du groupe
Merci pour le javascript.
Donc si par la suite je souhaite ajouter des nouveaux groupes il me suffira de faire ainsi:
Modification dans le css:
Et dans le fichier javascript:
Pour ce qui est du css j'ai mis ce derniers dans Affichage -> Image et couleurs -> Couleurs -> Feuille de style css.
Car je n'est pas vue de css interne dans le fichier viewtopic_body.
Visiblement ce n'était pas ça place, pourrais tu m'indiquer le chemin a parcourir ?
Merci pour ton aide et le temps que tu m'accorde.
Donc si par la suite je souhaite ajouter des nouveaux groupes il me suffira de faire ainsi:
Modification dans le css:
- Code:
/* Image du nouveau groupe*/
.c-nouveau-groupe:before {
background: url('url-de-l'image');
}
Et dans le fichier javascript:
- Code:
$(function(){
/* Liste des groupes */
var groupes = {
"ff0000" : "c-maitre-guilde",
"05f020" : "c-officer",
"1751e6" : "c-membre",
"0fabff" : "c-nouveau",
"b216f0" : "c-vip",
"e6b72b" : "c-enregistre",
"couleur-du groupe" : "c-nouveau-groupe",
};
Pour ce qui est du css j'ai mis ce derniers dans Affichage -> Image et couleurs -> Couleurs -> Feuille de style css.
Car je n'est pas vue de css interne dans le fichier viewtopic_body.
Visiblement ce n'était pas ça place, pourrais tu m'indiquer le chemin a parcourir ?
Merci pour ton aide et le temps que tu m'accorde.
Re: Mettre un cadre différent en fonction du groupe
Pense à vérifier que ton javascript est bien activé :
Entonnement je ne vois pas ton CSS ajouté, pourtant tu le mets au bon endroit...
Pourrais tu me copier / coller l'intégralité de ton CSS pour que je regarde pourquoi ça ne fonctionne pas ?
Pour les modifications tu as très bien compris ! Attention juste à mettre le code couleur en minuscules
Entonnement je ne vois pas ton CSS ajouté, pourtant tu le mets au bon endroit...
Pourrais tu me copier / coller l'intégralité de ton CSS pour que je regarde pourquoi ça ne fonctionne pas ?
Pour les modifications tu as très bien compris ! Attention juste à mettre le code couleur en minuscules
Re: Mettre un cadre différent en fonction du groupe
Je viens d'activer la gestion des codes Javascript , il étais effectivement sur non.
Le css étais mal enregistré et les données n'étais donc pas dedans au tant pour moi.
Merci cela fonctionne très bien, il me reste plus cas mettre des avatars adapter
Pour le profil quel fichier dois-je modifier?
Le css étais mal enregistré et les données n'étais donc pas dedans au tant pour moi.
Merci cela fonctionne très bien, il me reste plus cas mettre des avatars adapter
Pour le profil quel fichier dois-je modifier?
Re: Mettre un cadre différent en fonction du groupe
Hello Yann
Un petit message pour te prévenir que je ne t'oublie pas, je suis juste assez occupée ces temps ci
Pense à upper le sujet tous les 2 / 3 jours pour qu'il ne soit pas archivé ^-^
Un petit message pour te prévenir que je ne t'oublie pas, je suis juste assez occupée ces temps ci
Pense à upper le sujet tous les 2 / 3 jours pour qu'il ne soit pas archivé ^-^
Re: Mettre un cadre différent en fonction du groupe
Merci pour le conseil
Re: Mettre un cadre différent en fonction du groupe
J'ai fait un petit test différent pour le javascript.
Il faut que tu remplaces le JS actuel par celui ci :
Et plutôt que de cocher "Sur les sujets", il faut cocher "sur toutes les pages".
Dis moi si ça fonctionne encore sur les sujets, et si le remplacement se fait bien dans les profils !
Il faut que tu remplaces le JS actuel par celui ci :
- Code:
$(function(){
/* Liste des groupes */
var groupes = {
"ff0000" : "c-maitre-guilde",
"05f020" : "c-officer",
"1751e6" : "c-membre",
"0fabff" : "c-nouveau",
"b216f0" : "c-vip",
"e6b72b" : "c-enregistre"
};
if (/^\/u[1-9][0-9]*[a-z]*$/.test(document.location.pathname)) {
/* Remplacement dans le profil */
var $module = $('.catLeft').eq(0).closest('table');
if ($module.find('span[style]').length < 1) return;
var couleur = rgb2hex($module.find('span[style]').css('color'));
var $avatar = $module.find('img').eq(0);
$avatar.wrap('<div class="cadre-avatar c-modif '+ groupes[couleur] +'"><a></a></div>');
} else if (/^\/t[1-9][0-9]*(p[1-9][0-9]*)?-/.test(document.location.pathname)) {
/* Remplacement dans les messages */
$('.pseudo span').each(function(){
var $this = $(this);
var couleur = rgb2hex($this.css('color'));
var $cadreAvatar = $this.closest('td').find('.cadre-avatar');
$cadreAvatar.addClass('c-modif ' + groupes[couleur]);
});
}
});
/* Transforme le rgb en hex pour les couleurs */
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
Et plutôt que de cocher "Sur les sujets", il faut cocher "sur toutes les pages".
Dis moi si ça fonctionne encore sur les sujets, et si le remplacement se fait bien dans les profils !
Re: Mettre un cadre différent en fonction du groupe
Cela fonctionne très bien merci pour ton aide.
Sujets similaires
» [Groupe] Mettre plusieurs modérateur d'un groupe.
» Cadre autour de l'avatar en fonction du groupe
» Modifier couleur cadre avatar en fonction du groupe ou du rang
» [AwesomeBB] Couleur du cadre avatar en fonction du groupe coloré
» Mettre un groupe Modérateur.
» Cadre autour de l'avatar en fonction du groupe
» Modifier couleur cadre avatar en fonction du groupe ou du rang
» [AwesomeBB] Couleur du cadre avatar en fonction du groupe coloré
» Mettre un groupe Modérateur.
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