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 du moment :
Nike : Jusqu’à 50% sur les articles de ...
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 2 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.
    HeartLessB
    HeartLessB
    FémininAge : 25Messages : 78

    Mer 23 Oct 2013 - 22:11

    merci
    Apokalip'z
    Apokalip'z
    MasculinAge : 30Messages : 290

    Jeu 24 Oct 2013 - 11:20

    veux voir ça



    Affichage du profil au survol de l'avatar - Page 2 1424818313-sign-apoka
    Isalia
    Isalia
    FémininAge : 24Messages : 125

    Jeu 24 Oct 2013 - 11:39

    Ow *merci*
    Shanilae
    Shanilae
    FémininAge : 30Messages : 78

    Dim 27 Oct 2013 - 16:59

    Merci beaucoup !
    Heartfilia
    Heartfilia
    FémininAge : 24Messages : 98

    Lun 28 Oct 2013 - 19:27

    Je suis fan, je te remercie ^^



    YOU HELLA SAVED MY LIFE
    - chloe price
    FreeSpirit
    FreeSpirit
    MasculinAge : 28Messages : 167

    Mar 29 Oct 2013 - 16:28

    merci :)
    Kassou
    Kassou
    FémininAge : 24Messages : 43

    Mer 30 Oct 2013 - 8:36

    Merci !
    Staark
    Staark
    MasculinAge : 28Messages : 49

    Mer 30 Oct 2013 - 15:02

    Merci :3
    Shounen Brave
    Shounen Brave
    FémininAge : 25Messages : 5

    Jeu 31 Oct 2013 - 15:47

    Merci ♥
    Swann Calder
    Swann Calder
    FémininAge : 30Messages : 27

    Dim 3 Nov 2013 - 18:19

    merci :)
    Zibeline
    Zibeline
    FémininAge : 38Messages : 84

    Mer 6 Nov 2013 - 13:13

    merci beaucoup
    Anonymous
    Invité

    Sam 9 Nov 2013 - 11:52

    Merci o/
    Fluff'
    Fluff'
    FémininAge : 36Messages : 55

    Sam 9 Nov 2013 - 19:32

    Merci :)
    Traum Ble
    Traum Ble
    FémininAge : 31Messages : 10

    Lun 11 Nov 2013 - 15:46

    Merci beaucoup ^^



    Affichage du profil au survol de l'avatar - Page 2 Resistme
    Elyade
    Elyade
    FémininAge : 38Messages : 53

    Lun 11 Nov 2013 - 17:54

    Ah je veux bien voir ce tuto ! Merci ! =)
    Kaa.nameless
    Kaa.nameless
    FémininAge : 32Messages : 20

    Mar 12 Nov 2013 - 11:09

    Merci beaucoup pour ce code Very Happy 
    Chocomiss
    Chocomiss
    FémininAge : 25Messages : 10

    Mar 12 Nov 2013 - 12:21

    Merci du partage :)



    Spoiler:
    d r a c a r y s
    d r a c a r y s
    FémininAge : 30Messages : 4

    Jeu 14 Nov 2013 - 19:57

    Ce tuto a l'air tellement cool, je need de le voir *-*
    Merciiii ♥
    Kathee
    Kathee
    FémininAge : 30Messages : 680

    Sam 16 Nov 2013 - 17:02

    Merci Hiro' !

    Comme d'habitude, tes astuces sont superbes :hug: 





    Forum dérivé ouat
    dans un univers steampunk :heart:
    Ayzi
    Ayzi
    MasculinAge : 32Messages : 24

    Dim 17 Nov 2013 - 10:41

    Merci
    M.T
    M.T
    FémininAge : 34Messages : 53

    Dim 17 Nov 2013 - 18:38

    Merci =)
    Deadpoolio
    Deadpoolio
    MasculinAge : 34Messages : 277

    Lun 25 Nov 2013 - 10:56

    Ce tuto en jette, merci :)
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 35Messages : 215

    Lun 25 Nov 2013 - 23:11

    Merci Very Happy



    ....
    Babiroussa
    Babiroussa
    MasculinAge : 34Messages : 33

    Mar 26 Nov 2013 - 12:30

    Merci Hiro' !
    SpicAsh
    SpicAsh
    FémininAge : 27Messages : 176

    Mer 27 Nov 2013 - 13:33

    Merci beaucoup o/
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 19:21