AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Coffret dresseur d’élite ETB Pokémon EV06 Mascarade Crépusculaire
56.90 €
Voir le deal

    Affichage du profil au survol de l'avatar

    Hiro'
    Hiro'
    MasculinAge : 27Messages : 127

    Sam 21 Sep 2013 - 21:52

    Rappel du premier message :



    Bonjour tout le monde !
    Nouveau tutoriel, certainement plus utile que le précédent. Il s'agît ici de cacher assez simplement le profil à l'intérieur de votre avatar. Mystérieux, isn't it ? Mystérieux, peut-être mais relativement simple.

    Affichage du profil au survol de l'avatar - Page 14 ZEG3qYu

    Ce tuto nécessite la modification des templates et de la fiche de style CSS. Vous devez donc être administrateur fondateur.
    Ce tuto est valable pour un forum avec des avatars aux dimensions 200*400. Il est cependant assez simple à personnaliser. Tout est expliqué Wink


    Merci à Sparrow à qui j'ai subtilisé le code CSS qu'il utilise ici.


    Première partie : Templates.

    Elles font peur, elles inquiètent, elles en imposent et font les fières avec leurs grands airs qui font que vous les trouvez totalement hors de votre portée. Pourtant, il va bien falloir y toucher ! Alors retroussez vos manches, et rendez-vous sur le template viewtopic_body.

    Cernons la partie qui nous intéresse.

    Code:
    <!-- 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}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
     <span class="postdetails poster-profile">
     {postrow.displayed.POSTER_RANK}<br />
     {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<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>

    Que de variables ! Cependant, quand on regarde bien, on remarque que leur utilité est parfois quasi-transparente.

    Kézako ?

    • {postrow.displayed.POSTER_NAME}. Celle-ci est très importante. Il s'agît du nom du posteur. Ne me dîtes pas que vous ne l'aviez pas deviné.
    • {postrow.displayed.POSTER_RANK}. Le rang du membre, si rang il y a. Juste en dessous, on a l'image associée à ce rang.
    • {postrow.displayed.POSTER_AVATAR}. Voilà celle qui nous intéresse particulièrement : l'avatar.
    • {postrow.displayed.POSTER_JOINED}. C'est la date d'inscription du membre.



    Certaines variables importantes n'apparaissent pas, car englobées dans une autre.
    On devinera cependant assez facilement que :

    • Le nombre de messages du membre est {postrow.displayed.POSTER_POSTS}
    • La date d'inscription du membre est {postrow.displayed.POSTER_JOINED}

    Ce sont les deux qui nous intéresseront ici.

    Bon, il est temps de le modifier ce template. Alors pour commencer, nous allons supprimer du code !
    Vous pouvez donc supprimer tout ce qui est inclut entre :


    Code:
    <span class="postdetails poster-profile">
    et
    Code:
    </span><br />


    Qu'est-ce que j'ai supprimé ?
    Tout le profil qui s'affichait à côté de votre message. C'est malin ! Il ne reste plus que votre pseudo. Heureusement que je suis là pour rattraper tout ça.


    Voilà par quoi vous allez remplacer tout ça :

    Code:
    <div class="description4"><div style="display: block; text-align: center; width: 200px; height:400px; overflow:visible;">{postrow.displayed.POSTER_AVATAR}<div class="description4_contenu" style="margin-top:-400px;"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;font-variant:small-caps; text-shadow:1px 1px 1px white; font-size:14px;"><br /><div style="text-align:center; font-size:17px;">{postrow.displayed.POSTER_NAME}.</div><center><i>{postrow.displayed.POSTER_RANK}</i></center><br /><br />{postrow.displayed.POSTER_POSTS} messages.<br />Inscrit le {postrow.displayed.POSTER_JOINED}.</div></div></div></div>
    <br /><br />
    {postrow.displayed.POSTER_RPG}

    Une petite explication s'impose.

    Kézako ?

    • description4 est un cadre. Dans ce cadre, vous avez affiché l'avatar du membre avec la variable { postrow.displayed.POSTER_AVATAR }.
    • Par dessus ce magnifique cadre vous avez rajouté un cadre nommé description4_contenu. C'est là que s'afficheront les éléments que vous aurez décidé d'afficher.



    Personnaliser

    • La taille de l'avatar. Il suffit de repérer tous les 400 et les remplacer par votre hauteur, et tous les 200 et les remplacer par votre largeur. Attention ! Il y en a dans le HTML et dans le CSS. Il y a également un endroit où les dimensions ont perdus 10 px, vous devrez également enlever 10px à vos dimensions. Pourquoi ? Cela est du a un padding, une marge intérieure.
    • Le contenu caché. Dans cet exemple, il correspond à ceci :

      Code:
      {postrow.displayed.POSTER_NAME}.</div><center><i>{postrow.displayed.POSTER_RANK}</i></center><br /><br />{postrow.displayed.POSTER_POSTS} messages.<br />Inscrit le {postrow.displayed.POSTER_JOINED}.

      Pour savoir ce que veulent dire ces variables, il faut lire le début du tutoriel.


    • Vous pouvez tout naturellement modifier les différentes variables de templates, le texte et la mise en forme appliquée.



    Le template est modifié. Enregistrez-le et validez-le. Allez voir : le texte est superposé sur l'avatar. Le CSS peut entrer en piste !

    Deuxième partie : CSS.

    Bon, après le détail que j'ai fait pendant la première partie, vous devriez comprendre facilement ce code sans plus d'explications. Je le répète encore une fois : n'oubliez pas de modifier les dimensions de l'avatar pour qu'ils correspondent à ceux de votre forum.
    Et le code fut.

    Code:
    .description4 {
      display: block;
      width: 200px;
      margin: auto;
      height: 400px;
      overflow: hidden;
      transition:0.4s ease;
    }

    .description4:hover {
      display: block;
      width: 200px;
      margin: auto;
      height: 400px;
      overflow: hidden;
    }

    .description4_contenu {
      position: absolute;
      width: 200px;
      height: 400px;
      overflow: 400px;
      background-color: #EFE9DD;
      font-size: 11.5px;
      font-family:'Georgia';
      color: #3E352E;
      text-align: justify;
      padding:0px;
      opacity: 0;
      transform: all;
      transition: 1s;
    }

    .description4_contenu:hover {
      opacity: 0.8;
      transform: all;
      transition: 1s;
    }
    Pour l'explication du code, je vous envoie à mon précédent tutoriel.
    Et, c'est terminé !
    Si vous vous êtes paumé en route ou si vous êtes un gros flemmard qui n'a pas tout lu, voici une dernière partie pour pouvoir voir le code tout beau tout propre.

    Troisième partie : Pour les flemmards et les paumés. (patapey ?)

    CSS :

    Code:
    .description4 {
      display: block;
      width: 200px;
      margin: auto;
      height: 400px;
      overflow: hidden;
      transition:0.4s ease;
    }

    .description4:hover {
      display: block;
      width: 200px;
      margin: auto;
      height: 400px;
      overflow: hidden;
    }

    .description4_contenu {
      position: absolute;
      width: 200px;
      height: 400px;
      overflow: 400px;
      background-color: #EFE9DD;
      font-size: 11.5px;
      font-family:'Georgia';
      color: #3E352E;
      text-align: justify;
      padding:0px;
      opacity: 0;
      transform: all;
      transition: 1s;
    }

    .description4_contenu:hover {
      opacity: 0.8;
      transform: all;
      transition: 1s;
    }

    Template viewtopic_body :

    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(){
     _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 align="left" valign="middle" nowrap="nowrap">
     <!-- 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 -->
     <span id="fb_likebtn" style="margin-left: 6px; ">
     <iframe src="http://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
     </span>
     <!-- END switch_fb_likebtn -->
     </td>
     <td class="nav" 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="bottom" nowrap="nowrap" width="100%">
     <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"><div style="font-size:20px;text-align:center; margin-bottom:-20px;z-index:150;letter-spacing:2px;"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div></span><br />
     <span class="postdetails poster-profile">
     
                                      
                                      <div class="description4"><div style="display: block; text-align: center; width: 200px; height:400px; overflow:visible;">{postrow.displayed.POSTER_AVATAR}<div class="description4_contenu" style="margin-top:-400px;"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;font-variant:small-caps; text-shadow:1px 1px 1px white; font-size:14px;"><br /><div style="text-align:center; font-size:17px;">{postrow.displayed.POSTER_NAME}.</div><center><i>{postrow.displayed.POSTER_RANK}</i></center><br /><br />{postrow.displayed.POSTER_POSTS} messages.<br />Inscrit le {postrow.displayed.POSTER_JOINED}.</div></div></div></div>
                                      
                                      <br /><br />
     
     {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}">{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}&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>

    Voilà, j'espère avoir été clair. Merci d'avoir lu ce tutoriel et à beintôw Wink


    Dernière édition par Hiro' le Dim 22 Sep 2013 - 12:25, édité 1 fois



    Pas souvent là, mais je vous aime quand même très fort ! Étudiant en prépa littéraire, quand j'en ai marre de pas comprendre ce que je lis, je code pour ne plus comprendre non plus ce que j'écris.
    Perle
    Perle
    FémininAge : 26Messages : 32

    Sam 23 Mai 2015 - 16:46

    merci
    lolo0302
    lolo0302
    MasculinAge : 35Messages : 7

    Jeu 28 Mai 2015 - 23:42

    merci
    avatar
    Psiconda
    FémininAge : 39Messages : 18

    Sam 6 Juin 2015 - 21:40

    Merci pour le partage =)
    Biscotte Cynique
    Biscotte Cynique
    FémininAge : 27Messages : 47

    Dim 7 Juin 2015 - 12:55

    Super ! Merci !
    AkaZukin
    AkaZukin
    FémininAge : 29Messages : 35

    Lun 15 Juin 2015 - 20:27

    Merci pour le tuto!
    Strawy
    Strawy
    FémininAge : 26Messages : 38

    Mer 17 Juin 2015 - 19:23

    Merci beaucouuup ! *-*



    Affichage du profil au survol de l'avatar - Page 14 435141StrawyKit2Signa
    Ayiss
    Ayiss
    FémininAge : 28Messages : 3

    Mer 17 Juin 2015 - 22:24

    Gracias!
    ChupabracaRope
    ChupabracaRope
    FémininAge : 22Messages : 40

    Jeu 18 Juin 2015 - 20:40

    Merci ♥ !
    Silverblight
    Silverblight
    MasculinAge : 39Messages : 24

    Ven 19 Juin 2015 - 10:19

    Merci !
    Marion Navi
    Marion Navi
    FémininAge : 30Messages : 183

    Lun 22 Juin 2015 - 10:22

    Merci de partager cette idée. Elle m'intéresse beaucoup et j'aimerais l'appliquer à mon forum.
    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Ven 26 Juin 2015 - 21:40

    Merci bien.
    thedourn
    thedourn
    MasculinAge : 31Messages : 5

    Sam 27 Juin 2015 - 22:11

    merci
    DanJack
    DanJack
    FémininAge : 29Messages : 155

    Dim 5 Juil 2015 - 18:06

    Merci beaucoup pour ce tutoriel ♥
    SethGuex
    SethGuex
    MasculinAge : 24Messages : 7

    Dim 12 Juil 2015 - 1:22

    Merci pour ce tuto.
    Shaïka
    Shaïka
    FémininAge : 27Messages : 79

    Mer 15 Juil 2015 - 19:33

    Coucou et merci pour le tuto *^* C'est une excellente idée!
    .cranberry
    .cranberry
    FémininAge : 31Messages : 50

    Sam 25 Juil 2015 - 15:05

    Génial !!! ♥
    Autumn Avery
    Autumn Avery
    FémininAge : 25Messages : 6

    Mar 28 Juil 2015 - 12:12

    Veux voiiiir :)
    Youp
    Youp
    FémininAge : 29Messages : 579

    Mer 29 Juil 2015 - 18:40

    Merci beaucoup ^^



    Affichage du profil au survol de l'avatar - Page 14 262632clip20160315at092522
    Illusion d'un Rêve
    Illusion d'un Rêve
    MasculinAge : 22Messages : 33

    Lun 3 Aoû 2015 - 13:52

    Super tuto merci :3
    shiku
    shiku
    FémininAge : 26Messages : 10

    Mer 5 Aoû 2015 - 13:46

    Merci!! : )
    Nishiki
    Nishiki
    FémininAge : 26Messages : 325

    Sam 8 Aoû 2015 - 15:10

    Merci :)



    Affichage du profil au survol de l'avatar - Page 14 Head19
    Anonymous
    Invité

    Dim 9 Aoû 2015 - 17:05

    Merci juste pour voir.
    Yukie
    Yukie
    FémininAge : 25Messages : 30

    Mer 12 Aoû 2015 - 18:23

    Merci ! sa va m’être vachement utile ^^
    Laakoh
    Laakoh
    FémininAge : 33Messages : 41

    Ven 14 Aoû 2015 - 9:38

    Merci !
    Damned
    Damned
    FémininAge : 22Messages : 109

    Ven 14 Aoû 2015 - 17:56

    Merci!
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 0:11