Mettre un cadre différent en fonction du groupe

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Mettre un cadre différent en fonction du groupe

Message par yann59160 le Jeu 8 Jan 2015 - 17:12

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)

yann59160
Nouveau membre

Messages : 21
Inscrit(e) le : 27/04/2008

http://growing-strong.taguilde.net/
yann59160 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par yann59160 le Ven 9 Jan 2015 - 18:54

up

yann59160
Nouveau membre

Messages : 21
Inscrit(e) le : 27/04/2008

http://growing-strong.taguilde.net/
yann59160 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par yann59160 le Lun 12 Jan 2015 - 0:37

Personnes ?

yann59160
Nouveau membre

Messages : 21
Inscrit(e) le : 27/04/2008

http://growing-strong.taguilde.net/
yann59160 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par [Nihil] le Lun 12 Jan 2015 - 12:14

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 Smile
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 ?

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par yann59160 le Lun 12 Jan 2015 - 15:40

Bonjour Nihil,

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 ?

yann59160
Nouveau membre

Messages : 21
Inscrit(e) le : 27/04/2008

http://growing-strong.taguilde.net/
yann59160 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par [Nihil] le Lun 12 Jan 2015 - 19:06

Hello Smile

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).

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par yann59160 le Lun 12 Jan 2015 - 19:18

Voici le code du fichier viewtopic_body que j'ai déjà modifier:

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>&nbsp;&nbsp;&nbsp;
         <!-- 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&amp;pub=forumotion">{L_SHARE}</a>
            <!-- BEGIN switch_plus_menu -->
            &nbsp;|&nbsp;
            <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}&amp;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">&nbsp;</td>
               <td align="center" class="t-title">
                  <h1 class="cattitle">&nbsp;{TOPIC_TITLE}</h1>
               </td>
               <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>&nbsp;</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://illiweb.com/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}&nbsp; &nbsp;<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>&nbsp;<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">&nbsp;</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>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</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">&nbsp;{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">&nbsp;{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 -->
         »&nbsp;<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">&nbsp;{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>&nbsp;&nbsp;&nbsp;
            <!-- 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}:&nbsp;{S_JUMPBOX_SELECT}&nbsp;<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">&nbsp;</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}&nbsp;<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

yann59160
Nouveau membre

Messages : 21
Inscrit(e) le : 27/04/2008

http://growing-strong.taguilde.net/
yann59160 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par [Nihil] le Lun 12 Jan 2015 - 20:28

Alors, on va commencer par faire quelques petites modification sur le template viewtopic_body ^___^

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

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par yann59160 le Lun 12 Jan 2015 - 20:52

Très bien, voila qui est fait.

yann59160
Nouveau membre

Messages : 21
Inscrit(e) le : 27/04/2008

http://growing-strong.taguilde.net/
yann59160 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par [Nihil] le Mar 13 Jan 2015 - 18:54

Dernière modification de ce template là normalement, on va changer :
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 (^-^)

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par yann59160 le Mar 13 Jan 2015 - 23:16

Voila qui est fait.

Je suppose que je dois me rendre dans "Gestion des codes Javascript" et crée un nouveau code javascript ?

Merci

yann59160
Nouveau membre

Messages : 21
Inscrit(e) le : 27/04/2008

http://growing-strong.taguilde.net/
yann59160 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par [Nihil] le Mer 14 Jan 2015 - 11:33

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

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par yann59160 le Mer 14 Jan 2015 - 13:46

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:
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",
    };
Est-ce bien cela ?

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.

yann59160
Nouveau membre

Messages : 21
Inscrit(e) le : 27/04/2008

http://growing-strong.taguilde.net/
yann59160 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par [Nihil] le Mer 14 Jan 2015 - 16:31

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 Smile ?

Pour les modifications tu as très bien compris ! Attention juste à mettre le code couleur en minuscules Wink

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par yann59160 le Mer 14 Jan 2015 - 17:24

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 Smile

Pour le profil quel fichier dois-je modifier?

yann59160
Nouveau membre

Messages : 21
Inscrit(e) le : 27/04/2008

http://growing-strong.taguilde.net/
yann59160 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par [Nihil] le Ven 16 Jan 2015 - 11:28

Hello Yann

Un petit message pour te prévenir que je ne t'oublie pas, je suis juste assez occupée ces temps ci Smile

Pense à upper le sujet tous les 2 / 3 jours pour qu'il ne soit pas archivé ^-^

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par yann59160 le Ven 16 Jan 2015 - 23:08

Merci pour le conseil Smile

yann59160
Nouveau membre

Messages : 21
Inscrit(e) le : 27/04/2008

http://growing-strong.taguilde.net/
yann59160 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par [Nihil] le Sam 17 Jan 2015 - 20:49

J'ai fait un petit test différent pour le javascript.

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

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un cadre différent en fonction du groupe

Message par yann59160 le Ven 23 Jan 2015 - 2:38

Cela fonctionne très bien merci pour ton aide.

yann59160
Nouveau membre

Messages : 21
Inscrit(e) le : 27/04/2008

http://growing-strong.taguilde.net/
yann59160 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum