AccueilFAQRechercherMembresGroupesS'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.


    Affichage du profil au survol de l'avatar

    Partagez
    avatar
    Hiro'
    MasculinAge : 21Messages : 127

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


    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://illiweb.com/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://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}   <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.
    avatar
    Invité

    le Dim 29 Mai 2016 - 0:44

    Merci ! cheers
    avatar
    Froufy
    FémininAge : 17Messages : 59

    le Jeu 23 Juin 2016 - 17:45

    Merci!



    1+1= 4
          2
    3
    avatar
    indiana.mimi
    FémininAge : 24Messages : 25

    le Lun 27 Juin 2016 - 3:57

    j'ai envie de voir ! hâte ♥
    avatar
    ass kicker
    FémininAge : 23Messages : 80

    le Lun 27 Juin 2016 - 17:23

    merci ♥



      see you again
      No matter where you are, whether you’re a quarter mile away, or half way around the world … you’ll always be with me. You’ll always be my brother.©endlesslove
    avatar
    C-sshi
    FémininAge : 29Messages : 9

    le Ven 1 Juil 2016 - 20:43

    Merci pour le tutoriel ! :)



    No fear of pain, no fear of hurt. Only with you here will I be able to live. Without you I am just as if I have lost my life, unable to move forward, unable to move backward
    avatar
    Lilynufare
    FémininAge : 27Messages : 341

    le Dim 3 Juil 2016 - 4:28

    Merci :)
    avatar
    Sakuyyya
    FémininAge : 18Messages : 16

    le Ven 15 Juil 2016 - 0:13

    Merci! *-*
    avatar
    dean winchester
    MasculinAge : 24Messages : 85

    le Dim 17 Juil 2016 - 11:39

    merci
    avatar
    Cookie-eater
    FémininAge : 20Messages : 3

    le Lun 25 Juil 2016 - 11:02

    Merci !
    avatar
    Alexielios
    FémininAge : 27Messages : 62

    le Mar 26 Juil 2016 - 8:07

    Merci.










    "People live their lives bound by what they accept as correct and true. That's how they define reality.
    But what does it mean to be correct or true?"
    avatar
    bird box
    FémininAge : 22Messages : 3

    le Jeu 18 Aoû 2016 - 12:32

    ça va m'être utile, merci :aww:
    avatar
    Jynnea
    FémininAge : 23Messages : 103

    le Ven 19 Aoû 2016 - 2:29

    J'adore le principe! Ça éclaircit le profil! Je teste ça...on vera si j'y arrive affraid
    avatar
    Jynnea
    FémininAge : 23Messages : 103

    le Ven 19 Aoû 2016 - 2:31

    Vous pouvez supprimer mon double post mais je ne vois pas comment modifier nos réponses, Je voulais ajouter un gros merci mais je ne vois pas comment modifier nos réponses c'est normal?
    avatar
    mymywilliamss
    FémininAge : 25Messages : 11

    le Dim 21 Aoû 2016 - 15:51

    Merci !! tu me sauves la vie, mon code était foireux Razz
    avatar
    Invité

    le Jeu 25 Aoû 2016 - 19:08

    Merci pour ce LS c:
    avatar
    Descalium
    FémininAge : 21Messages : 13

    le Ven 26 Aoû 2016 - 3:15

    Merchiiii Razz
    avatar
    FreakCreepyGirl
    FémininAge : 21Messages : 20

    le Dim 11 Sep 2016 - 23:49

    Je vais tester ce tuto!! J'espère juste pas merder en essayer de le mettre haha

    Merci beaucoup! :lovebomb: :lovebomb:
    avatar
    Twearky
    FémininAge : 24Messages : 7

    le Dim 2 Oct 2016 - 19:09

    Bien
    avatar
    Clemelaeshoopatate
    FémininAge : 20Messages : 17

    le Dim 9 Oct 2016 - 14:10

    Merci beaucoup pour ce tutoriel ! ♥
    avatar
    Louaque
    MasculinAge : 53Messages : 60

    le Mar 11 Oct 2016 - 20:30

    Merci pour le partage!!
    avatar
    Applauze
    MasculinAge : 22Messages : 167

    le Mer 12 Oct 2016 - 12:44

    ça mérite un autre viewers Arrow
    avatar
    SuperSpaceCab
    MasculinAge : 33Messages : 36

    le Jeu 13 Oct 2016 - 5:57

    Merci beaucoup !
    avatar
    November
    MasculinAge : 17Messages : 50

    le Mer 26 Oct 2016 - 20:45

    Merci! :3
    avatar
    Mathilde .M
    FémininAge : 14Messages : 14

    le Sam 29 Oct 2016 - 16:41

    Merci Beaucoup
    avatar
    Pouet
    FémininAge : 20Messages : 5

    le Jeu 3 Nov 2016 - 20:36

    Merci beaucoup pour ce tutoriel :)
    Contenu sponsorisé


      La date/heure actuelle est Mar 17 Juil 2018 - 4:09