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.


    Profil en bandeau au-dessus du message (large avatar)

    Partagez
    avatar
    NyoTheNeko
    FémininAge : 24Messages : 5018

    le Mar 1 Juil 2014 - 0:36

    Profil



    Ceci est un code de profil crée suite à la Demande d'Euterpe, ici.

    Pour PHPBB2 & PHPBB3 ▬ CSS3 & HTML5 ▬ Ce que ça donne


    Les effets et images


    Les avatars sont prévus pour être en 800px de largeur et 400px de hauteur. Il faudra donc faire attention à votre disposition de profil par la suite si vous adoptez quelque chose de la sorte. Notez que tous les avatars sont redimensionnés à cette taille par le CSS.
    Votre forum devrait faire 900px de largeur!
    Rang, Profil et Contact s'étendent au passage de la souris.
    Notez que vous devrez mettre une hauteur à chacun de vos éléments rétractables (rang, profil et contact) qui ont pour l'instant tous un height: XXpx;. Faites en fonction de la hauteur effective de
    Il se peut que selon la hauteur de votre profil, vous ayez à changer la hauteur minimale (min-height) de .postbody. Comme indiqué dans le CSS.
    Les deux polices utilisées sont Marck Script et Reenie Beanie. Vous retrouverez leurs link dans le template, comme ceci:
    Code:
    <link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
    . Vous pouvez les changer/retirer, mais pensez alors à retirer ou changer chacunes de leurs apparitions dans le CSS (sous la forme de font-family: 'Marck Script' et font-family: 'Reenie Beanie' )!

    PHPBB2: Le code


    Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> viewtopix_body /!\ Attention!: C'est le template en entier! /!\ :
    Code:
    <script type="text/javascript">
    //<![CDATA[
    var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
    $(function(){

        if(typeof(_atc) == "undefined") {
            _atc = { };
        }
      
        _atc.cwait = 0;
        $('.addthis_button').mouseup(function(){
            if ($('#at15s').css('display') == 'block') {
                addthis_close();
            }
        });
    });

    var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
    showHiddenMessage = function(id)
    {
        try
        {
            var regId = parseInt(id, 10);
            if( isNaN(regId) ) { regId = 0; }
          
            if( regId > 0)
            {
                $('.post--' + id).toggle(0, function()
             {
                if( $(this).is(":visible") )
                {
                   $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                }
                else
                {
                   $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                }
             });
            }
        }
        catch(e) { }
      
       return false;
    };

    //]]>
    </script>

    <table width="100%" border="0" cellspacing="2" cellpadding="0">
       <tr>
          <td align="left" valign="middle" nowrap="nowrap">
             <span class="nav">
             <!-- BEGIN switch_user_authpost -->
             <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>  
             <!-- END switch_user_authpost -->
             <!-- BEGIN switch_user_authreply -->
             <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
             <!-- END switch_user_authreply -->
             </span>
          </td>      
          <td class="nav" valign="middle" width="100%">
             <span class="nav"><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%">
             <!-- BEGIN switch_twitter_btn -->
             <span id="twitter_btn" style="margin-left: 6px; ">
             <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
             <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
             </span>
             <!-- END switch_twitter_btn -->
            
             <!-- BEGIN switch_fb_likebtn -->        
             <script>(function(d, s, id) {
               var js, fjs = d.getElementsByTagName(s)[0];
               if (d.getElementById(id)) return;
               js = d.createElement(s); js.id = id;
               js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
               fjs.parentNode.insertBefore(js, fjs);
             }(document, 'script', 'facebook-jssdk'));</script>  
             <div class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
             <!-- END switch_fb_likebtn -->
            
             <span class="gensmall bold">
                <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
                <!-- BEGIN switch_plus_menu -->
                 |
                <script type="text/javascript">//<![CDATA[
                   var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
                   var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
                   var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
                   var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
                   var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
                   var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
                   insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
                //]]>
                </script>
                <!-- END switch_plus_menu -->
             </span>
          </td>
       </tr>
    </table>

    <link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
    <table>
      <tr>
      <td>
    <div class="contour_sujet">
      <h1 class="cattitle"> {TOPIC_TITLE}</h1>
      <div 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> </div>
      <!-- BEGIN topicpagination -->
      <div class="pagination"><span class="gensmall">{PAGINATION}</span></div>
      <!-- END topicpagination -->
      <table width="100%">
        {POLL_DISPLAY}
      </table>
      <!-- BEGIN postrow -->
      <!-- BEGIN hidden -->
      <div class="postdetails {postrow.hidden.ROW_CLASS}">{postrow.hidden.MESSAGE}</div>
      <!-- END hidden -->
      <!-- BEGIN displayed -->
      <div class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
        <div class="position_rang">
          <div class="titre_menu_gauche">R<br/>A<br/>N<br/>G</div>
          <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}
          </span>
        </div>
        <div class="position_profil">
          <div class="titre_menu_gauche">P<br/>R<br/>O<br/>F<br/>I<br/>L</div>
          <span class="postdetails poster-profile">
            <!-- 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>
        </div>
        <div class="position_boutons_profil">
          <div class="titre_menu_droite">C<br/>O<br/>N<br/>T<br/>A<br/>C<br/>T</div>
          <span class="postdetails poster-profile">
            {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}
          </span>
        </div>
        <div class="contenu_principal">
          <div class="en_haut_ava">
            <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>
            {postrow.displayed.POSTER_AVATAR}
          </div>
          <div class="boutons_manipulation">
            {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}
          </div>
          <div class="postbody">
            <div>{postrow.displayed.MESSAGE}</div>
            <div class="clear"></div>
       <!-- BEGIN switch_signature -->
       <div class="signature_div">
              {postrow.displayed.SIGNATURE}
       </div>
       <!-- END switch_signature -->
        </div>
      </div>
    </div>

       <!-- END displayed -->
       <!-- END postrow -->
      </td>
    </tr>
    </table>
      <table class="forumline" style="border: 0px solid;" width="100%" border="0" cellspacing="1" cellpadding="0">
       <!-- 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>
                      <h1 class="cattitle"> {TOPIC_TITLE}</h1>
                      <div 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> </div>
          </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>


    Le CSS:
    Code:
    /********** DÉBUT PROFIL **********/
    /* Positionne le sujet et lui donne sa grandeur max. */
    .contour_sujet {
      width: 900px;
      margin: auto;
    }

    /* Utilisé pour la répétition du titre tout en bas du sujet. */
    .contour_fin_sujet {
      width: 900px;
      margin: auto;
    }

    /* Mise en forme du titre du sujet. */
    h1.cattitle {
      display: block;
      width: 100%;
      text-align: center;
      /* Taille couleur et police du titre. */
      font-size: 50pt;
      color: black;
      font-family: 'Marck Script';
    }

    /* Mise en place des flèches pour aller tout en haut ou en bas du sujet, et au prochain sujet. */
    .browse-arrows {
      width: 100%;
      text-align: right;
    }

    /* Mise en place de la pagination */
    .pagination {
      width: 100%;
      text-align: right;
    }

    /* Un message */
    .post {
      /* Pour les position absolute de plus tard */
      position: relative;
      /* Permet de séparer les différents messages. */
      margin-top: 25px;
    }

    /* Taille de la police de toutes les options de profil (rang, fiche de perso et profil)  */
    .postdetails {
      font-size: 10pt;
    }

    /* Mise en forme et positionnement des titres RANG et PROFIL */
    .titre_menu_gauche {
      float: left;
      width: 30px;
      text-align: center;
      font-size: 20pt;
    }

    /* Mise en forme et positionnement du titre CONTACT */
    .titre_menu_droite {
      float: right;
      width: 30px;
      font-family: 'Reenie Beanie';
      font-size: 20pt;
    }

    /* Mise en forme et positionnement du carré contenant le rang lorsqu'il est fermé */
    .position_rang {
      position: absolute;
      /* Positionnement lorsque fermé. ATTENTION. Le fermé change du ouvert pour la position! */
      top: 420px;
      left: 10px;
      /* Largeur lorsque fermé. C'est la même largeur que .titre_menu_gauche */
      width: 30px;
      /* hauteur à définir selon les désirs */
      height: XXpx;
      padding: 5px;
      /* On ne voit pas ce qui dépasse */
      overflow: hidden;
      /* Police, puis alignement du texte */
      font-family: 'Reenie Beanie';
      text-align: justify;
      /* Couleur de fond */
      background-color: #CF9E80;
      transition: all ease 1s;
    }


    /* Mise en forme et positionnement du du carré contenant le profil lorsqu'il est fermé */
    .position_profil {
      position: absolute;
      /* Positionnement lorsque fermé. ATTENTION. Le fermé change du ouvert pour la position! */
      top: 580px;
      left: 10px;
      /* Largeur lorsque fermé. C'est la même largeur que .titre_menu_gauche */
      width: 30px;
      /* hauteur à définir selon les désirs */
      height: XXpx;
      padding: 5px;
      /* On ne voit pas ce qui dépasse */
      overflow: hidden;
      /* Police, puis alignement du texte */
      font-family: 'Reenie Beanie';
      text-align: justify;
      /* Couleur de fond */
      background-color: #CF9E80;
      transition: all ease 1s;
    }

    /* Mise en forme et positionnement du du carré contenant les boutons de profil lorsqu'il est fermé */
    .position_boutons_profil {
      position: absolute;
      /* Positionnement lorsque fermé. ATTENTION. Le fermé change du ouvert pour la position!  Note: le top est le même que celui du rang */
      top: 420px;
      right: 10px;
      /* Largeur lorsque fermé. C'est la même largeur que .titre_menu_gauche */
      width: 30px;
      /* hauteur à définir selon les désirs */
      height: XXpx;
      padding: 5px;
     /* Alignement des images */
      text-align: center;
      /* On ne voit pas ce qui dépasse */
      overflow: hidden;
      /* Couleur de fond */
      background-color: #CF9E80;
      transition: all ease 1s;
    }

    /* Permet de cacher toutes les infos lorsque la hauteur n'est pas définie. Donc lorsque la souris n'est pas passée. C'est bien de le laisser de toute façon */
    .position_rang .postdetails.poster-profile, .position_profil .postdetails.poster-profile, .position_boutons_profil .postdetails.poster-profile  {
      display: none;
    }

    /* Permet de faire apparaître toutes les informations au survol de la souris. */
    .position_rang:hover .postdetails.poster-profile, .position_profil:hover .postdetails.poster-profile, .position_boutons_profil:hover .postdetails.poster-profile {
      display: inline;
    }

    /* Mise en forme et positionnement du carré contenant le rang lorsqu'il est ouvert */
    .position_rang:hover {
      position: absolute;
      top: 420px;
      /* Ici le positionnement change (le left) */
      left: -200px;
      /* Nouvelle taille */
      width: 240px;
      /* À retirer ou à mettre une valeur si on veut que la taille s'agrandisse encore de la position fermée. */
      height: XXpx;
      transition: all ease 1s;
    }

    /* Mise en forme et positionnement du carré contenant le profil lorsqu'il est ouvert */
    .position_profil:hover {
      position: absolute;
      top: 580px;
      /* Ici le positionnement change (le left) */
      left: -200px;
      /* Nouvelle taille */
      width: 240px;
      /* À retirer ou à mettre une valeur si on veut que la taille s'agrandisse encore de la position fermée. */
      height: XXpx;
      transition: all ease 1s;
    }

    /* Mise en forme et positionnement du carré contenant les boutons du profil lorsqu'il est ouvert */
    .position_boutons_profil:hover {
      position: absolute;
      top: 420px;
      /* Ici le positionnement change (le right) */
      right: -80px;
      /* Nouvelle taille */
      width: 120px;
      /* À retirer ou à mettre une valeur si on veut que la taille s'agrandisse encore de la position fermée. */
      height: XXpx;
      transition: all ease 1s;
    }

    /* Mise en forme du bloc central (continent avatar, pseudo et message) */
    .contenu_principal {
      /* Largeur */
      width: 800px;
      /* Permet de le centrer */
      margin: auto;
      /* Mis en forme du texte: couleur et police */
      color: grey;
      font-family: 'Reenie Beanie';
      /* Couleur de fond et bordure */
      background-color: white;
      border: 1px solid black;
    }

    /* Définition de la largeur de l'avatar. Permettre de le placer lui et le pseudo. */
    .en_haut_ava {
      position: relative;
      /* Taille avatar */
      width: 800px;
      height: 400px;
    }

    /* Placement de l'avatar */
    .en_haut_ava img {
      position: abolute;
      /* Vu qu'il prend tout le bloc, on le positionne tout en haut à droite. */
      top: 0;
      left: 0;
      /* L'image de l'avatar prendra automatiquement ces valeurs. */
      width: 800px;
      height: 400px;
    }

    /* Placement et mise en forme du pseudo */
    .en_haut_ava .name {
      position: absolute;
      /* Positionnement en haut à droite. */
      right: 10px;
      top: -30px;
      /* Taille de police et police */
      font-size: 30pt;
      font-family: 'Marck Script';
      /* Ombre du texte puis, après la virgule, lumière */
      text-shadow: 1px 1px 2px black, -1px -1px 1px white;
    }

    /* On retire le soulignement au passage de la souris sur le pseudo. */
    .en_haut_ava .name a:hover {
      text-decoration: none !important;
    }

    /* Permet de placer les boutons citer, éditer, etc. */
    .boutons_manipulation {
      width: auto;
      margin-top: 10px;
      padding-right: 10px;
      text-align: right;
    }

    /* Mise en forme du message */
    .postbody {
      /* Taille minimale */
      min-height: 400px;
      padding: 20px;
      padding-top: 0px;
      /* Couleur, alignement, police et taille du texte */
      color: grey;
      text-align: justify;
      font-family: 'Reenie Beanie';
      font-size: 16pt;
      /* Couleur de fond du message */
      background-color: white;
    }

    /********** FIN PROFIL **********/

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par NyoTheNeko le Ven 4 Mar 2016 - 21:23, édité 5 fois
    avatar
    NyoTheNeko
    FémininAge : 24Messages : 5018

    le Mar 1 Juil 2014 - 16:16

    PHPBB3: Le code


    Il y a quelques légères modifications par rapport à PHPBB2, vu que l'on  quelque peu gardé la structure de base du PHPBB3, cependant, le résultat est le même. Le bouton en ligne était auparavant une image de fond du message, mais se trouve à présent dans la partie "Contact" tout en haut!
    Très peu de changements dans le CSS par rapport au PHPBB2, cependant, ces derniers ont été notés dans le CSS comme spécifique au PHPBB3 pour les codeurs intéressés.

    Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> viewtopix_body /!\ Attention!: C'est le template en entier! /!\ :

    Code:
    <script type="text/javascript">
    //<![CDATA[
    var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };


    $(function(){

        if(typeof(_atc) == "undefined") {
            _atc = {  };
        }

        _atc.cwait = 0;
        $('.addthis_button').mouseup(function(){
            if ($('#at15s').css('display') == 'block') {
                addthis_close();
            }
        });
    });

    var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
    showHiddenMessage = function(id)
    {
        try
        {
            var regId = parseInt(id, 10);
            if( isNaN(regId) ) { regId = 0; }

            if( regId > 0)
            {
                $('.post--' + id).toggle(0, function()
     {
     if( $(this).is(":visible") )
     {
     $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
     }
     else
     {
     $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
     }
     });
            }
        }
        catch(e) { }

     return false;
    };

    //]]>
    </script>

    <link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
    <h1 class="cattitle">
     <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
    </h1>
    <div class="topic-actions">
     <div class="buttons">

     <!-- BEGIN switch_user_authpost -->
     <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   
     <!-- END switch_user_authpost -->

     <!-- BEGIN switch_user_authreply -->
     <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
     <!-- END switch_user_authreply -->
     </div>

     <div class="pathname-box">
     <p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
     </div>

     <p class="right">
     <!-- BEGIN switch_fb_likebtn -->
     <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));</script>
     <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
     <!-- END switch_fb_likebtn -->
     </p>

     <div class="pagination">
     {PAGE_NUMBER}
      • 
     <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_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
     //]]>
     </script>
     <!-- END switch_plus_menu -->
     </div>
     <div class="clear"></div>
    </div>

    <!-- BEGIN topicpagination -->
    <p class="pagination">{PAGINATION}</p>
    <!-- END topicpagination -->
    <p class="left-box"><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></p>
    <div class="clear"></div>
    {POLL_DISPLAY}

    <!-- BEGIN postrow -->
     <!-- BEGIN hidden -->
     <div class="post {postrow.hidden.ROW_COUNT}">
     <div class="inner">
     <span class="corners-top"><span></span></span>
     <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
     <div class="clear"></div>
     <span class="corners-bottom"><span></span></span>
     </div>
     </div>
     <!-- END hidden -->
     <!-- BEGIN displayed -->
     <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
     <div class="inner"><span class="corners-top"><span></span></span>
                <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
        <div class="position_rang">
          <div class="titre_menu_gauche">R<br/>A<br/>N<br/>G</div>
          <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}
          </span>
        </div>
        <div class="position_profil">
          <div class="titre_menu_gauche">P<br/>R<br/>O<br/>F<br/>I<br/>L</div>
          <span class="postdetails poster-profile">
            <!-- 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>
        </div>
        <div class="position_boutons_profil">
          <div class="titre_menu_droite">C<br/>O<br/>N<br/>T<br/>A<br/>C<br/>T</div>
          <span class="postdetails poster-profile">
            {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}
          </span>
        </div><div class="position_rang">
          <div class="titre_menu_gauche">R<br/>A<br/>N<br/>G</div>
          <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK_NEW}<br/>{postrow.displayed.RANK_IMAGE}
          </span>
        </div>
        <div class="position_profil">
          <div class="titre_menu_gauche">P<br/>R<br/>O<br/>F<br/>I<br/>L</div>
          <span class="postdetails poster-profile">
            <!-- 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>
        </div>
        <div class="position_boutons_profil">
          <div class="titre_menu_droite">C<br/>O<br/>N<br/>T<br/>A<br/>C<br/>T</div>
          <span class="postdetails poster-profile">
            <div class="{postrow.displayed.ONLINE_IMG_NEW}"></div> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
          </span>
        </div>
        <div class="contenu_principal">
          <div class="en_haut_ava">
            <div id="profile{postrow.displayed.U_POST_ID}"><strong class="name">{postrow.displayed.POSTER_NAME}</strong>
              {postrow.displayed.POSTER_AVATAR}</div>
          </div>
     <div class="postbody">

     <div class="boutons_manipulation">
                                      <ul class="profile-icons">
     <li>{postrow.displayed.THANK_IMG}</li>
     <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
     <li>{postrow.displayed.QUOTE_IMG}</li>
     <li>{postrow.displayed.EDIT_IMG}</li>
     <li>{postrow.displayed.DELETE_IMG}</li>
     <li>{postrow.displayed.IP_IMG}</li>
     <li>{postrow.displayed.REPORT_IMG_NEW}</li>
     </ul>
                               </div>

     <div class="clearfix"></div>

     <!-- 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 style="display:none"></div>
     <div>{postrow.displayed.MESSAGE}</div>
     <!-- BEGIN switch_attachments -->
     <dl class="attachbox">
     <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
     <dd class="attachments">
     <!-- BEGIN switch_post_attachments -->
     <dl class="file clearfix">
     <dt>
     <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
     </dt>
     <dd>
     <!-- BEGIN switch_dl_att -->
     <span><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}</span>
     <!-- END switch_dl_att -->

     <!-- BEGIN switch_no_dl_att -->
     <span>{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}</span>
     <!-- END switch_no_dl_att -->

     <!-- BEGIN switch_no_comment -->
     <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</span>
     <!-- END switch_no_comment -->

     <!-- BEGIN switch_no_dl_att -->
     <span><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></span>
     <!-- END switch_no_dl_att -->

     <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
     </dd>
     </dl>
     <!-- END switch_post_attachments -->
     </dd>
     </dl>
     <!-- END switch_attachments -->
     {postrow.displayed.EDITED_MESSAGE}
     <!-- BEGIN switch_signature -->
     <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
     <!-- END switch_signature -->
     </div>
                              </div>

     <div class="clear"></div>

     <p class="right"><a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a></p>
     <span class="corners-bottom"><span></span></span></div>
                      </div>
     <!-- BEGIN first_post_br -->
     <hr id="first-post-br" />
     <!-- END first_post_br -->
     <!-- END displayed -->
    <!-- END postrow -->

    <a name="bottomtitle"></a>

    <!-- BEGIN topicpagination -->
    <p class="pagination">{PAGINATION}</p>
    <!-- END topicpagination -->

    <p class="left-box"><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></p>

    <div class="clear"></div>

    <div class="noprint">
    <!-- BEGIN switch_user_logged_in -->
    <!-- BEGIN watchtopic -->
    <p class="right">{S_WATCH_TOPIC}</p>
    <!-- END watchtopic -->
    <!-- END switch_user_logged_in -->
    </div>

    <!-- BEGIN promot_trafic -->
    <div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em">
     <span class="corners-top"><span></span></span>
     <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></span>
     <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
     <span class="corners-bottom"><span></span></span>
    </div>
    <div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em">
     <span class="corners-top"><span></span></span>
     <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></span>
     <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
     <div class="clear"></div>
     <div>
     <!-- BEGIN link -->
     » <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
     <!-- END link -->
     </div>
     <span class="corners-bottom"><span></span></span>
    </div>
    <!-- END promot_trafic -->

    <!-- BEGIN switch_forum_rules -->
    <div class="post row1" id="forum_rules">
     <span class="corners-top"><span></span></span>
     <div class="h3"> {L_FORUM_RULES}</div>
     <div class="clear"></div>
     <table class="postbody">
     <tr>
     <!-- BEGIN switch_forum_rule_image -->
     <td class="logo">
     <img src="{RULE_IMG_URL}" alt="" />
     </td>
     <!-- END switch_forum_rule_image -->
     <td class="rules content">
     {RULE_MSG}
     </td>
     </tr>
     </table>
     <span class="corners-bottom"><span></span></span>
    </div>
    <!-- END switch_forum_rules -->

    <!-- BEGIN switch_user_logged_in -->
    <a name="quickreply"></a>
    {QUICK_REPLY_FORM}
    <!-- END switch_user_logged_in -->

    <hr />

    <div class="topic-actions">
     <div class="buttons">
     <!-- BEGIN switch_user_authpost -->
     <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   
     <!-- END switch_user_authpost -->

     <!-- BEGIN switch_user_authreply -->
     <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
     <!-- END switch_user_authreply -->
     </div>

     <div class="pathname-box">
     <p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
     </div>

     <div class="pagination">
     {PAGE_NUMBER}
     </div>
    </div>
    <div class="clear"></div>

    <!-- BEGIN viewtopic_bottom -->
    <form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
    <fieldset class="jumpbox">
     <label>{L_JUMP_TO}: </label>
     {S_JUMPBOX_SELECT} 
     <input class="button2" type="submit" value="{L_GO}" />
    </fieldset>
    </form>
    <!-- END viewtopic_bottom -->

    <!-- BEGIN viewtopic_bottom -->
    <form method="get" action="{S_FORM_MOD_ACTION}">
    <fieldset class="quickmod">
     <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}" />
     <label>{L_MOD_TOOLS}: </label>
     {S_SELECT_MOD}&nbsp;
     <input class="button2" type="submit" value="{L_GO}" />
    </fieldset>
    </form>
    <div class="clear"></div>
    <p class="right">{S_TOPIC_ADMIN}</p>
    <!-- END viewtopic_bottom -->

    <!-- BEGIN show_permissions -->
     <div class="h3">{L_TABS_PERMISSIONS}</div>
     {S_AUTH_LIST}
    <!-- END show_permissions -->

    <!-- BEGIN switch_image_resize -->
    <script type="text/javascript">
    //<![CDATA[
    $(resize_images({ 'selector' : '.postbody .content', '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>


    Le CSS:

    Code:
    /********** DÉBUT PROFIL **********/
    /* Positionne le sujet et lui donne sa grandeur max. */
    .contour_sujet {
      width: 900px;
      margin: auto;
    }

    /* Utilisé pour la répétition du titre tout en bas du sujet. */
    .contour_fin_sujet {
      width: 900px;
      margin: auto;
    }

    /* Mise en forme du titre du sujet. */
    h1.cattitle {
      display: block;
      width: 100%;
      text-align: center;
      /* Taille couleur et police du titre. */
      font-size: 50pt;
      color: black;
      font-family: 'Marck Script';
    }

    /* Spécifique PHPBB3: le titre du sujet est un lien */
    h1.cattitle a {
      /* Taille couleur et police du titre. */
      font-size: 50pt;
      color: black;
      font-family: 'Marck Script';
    }

    /* Mise en place des flèches pour aller tout en haut ou en bas du sujet, et au prochain sujet. */
    .browse-arrows {
      width: 100%;
      text-align: right;
    }

    /* Mise en place de la pagination */
    .pagination {
      width: 100%;
      text-align: right;
    }

    /* Un message */
    .post {
      /* Pour les position absolute de plus tard */
      position: relative;
      /* Permet de séparer les différents messages. */
      margin-top: 25px;
    }

    /* Taille de la police de toutes les options de profil (rang, fiche de perso et profil)  */
    .postdetails {
      font-size: 10pt;
    }

    /* Mise en forme et positionnement des titres RANG et PROFIL */
    .titre_menu_gauche {
      float: left;
      width: 30px;
      text-align: center;
      font-size: 20pt;
    }

    /* Mise en forme et positionnement du titre CONTACT */
    .titre_menu_droite {
      float: right;
      width: 30px;
      font-family: 'Reenie Beanie';
      font-size: 20pt;
    }

    /* Mise en forme et positionnement du carré contenant le rang lorsqu'il est fermé */
    .position_rang {
      position: absolute;
      /* Positionnement lorsque fermé. ATTENTION. Le fermé change du ouvert pour la position! */
      top: 420px;
      left: 10px;
      /* Largeur lorsque fermé. C'est la même largeur que .titre_menu_gauche */
      width: 30px;
      /* hauteur à définir selon les désirs */
      height: XXpx;
      padding: 5px;
      /* On ne voit pas ce qui dépasse */
      overflow: hidden;
      /* Police, puis alignement du texte */
      font-family: 'Reenie Beanie';
      text-align: justify;
      /* Couleur de fond */
      background-color: #CF9E80;
      transition: all ease 1s;
    }


    /* Mise en forme et positionnement du du carré contenant le profil lorsqu'il est fermé */
    .position_profil {
      position: absolute;
      /* Positionnement lorsque fermé. ATTENTION. Le fermé change du ouvert pour la position! */
      top: 580px;
      left: 10px;
      /* Largeur lorsque fermé. C'est la même largeur que .titre_menu_gauche */
      width: 30px;
      /* hauteur à définir selon les désirs */
      height: XXpx;
      padding: 5px;
      /* On ne voit pas ce qui dépasse */
      overflow: hidden;
      /* Police, puis alignement du texte */
      font-family: 'Reenie Beanie';
      text-align: justify;
      /* Couleur de fond */
      background-color: #CF9E80;
      transition: all ease 1s;
    }

    /* Mise en forme et positionnement du du carré contenant les boutons de profil lorsqu'il est fermé */
    .position_boutons_profil {
      position: absolute;
      /* Positionnement lorsque fermé. ATTENTION. Le fermé change du ouvert pour la position!  Note: le top est le même que celui du rang */
      top: 420px;
      right: 10px;
      /* Largeur lorsque fermé. C'est la même largeur que .titre_menu_gauche */
      width: 30px;
      /* hauteur à définir selon les désirs */
      height: XXpx;
      padding: 5px;
     /* Alignement des images */
      text-align: center;
      /* On ne voit pas ce qui dépasse */
      overflow: hidden;
      /* Couleur de fond */
      background-color: #CF9E80;
      transition: all ease 1s;
    }

    /* Permet de cacher toutes les infos lorsque la hauteur n'est pas définie. Donc lorsque la souris n'est pas passée. C'est bien de le laisser de toute façon */
    .position_rang .postdetails.poster-profile, .position_profil .postdetails.poster-profile, .position_boutons_profil .postdetails.poster-profile {
      display: none;
    }

    /* Permet de faire apparaître toutes les informations au survol de la souris. */
    .position_rang:hover .postdetails.poster-profile, .position_profil:hover .postdetails.poster-profile, .position_boutons_profil:hover .postdetails.poster-profile {
      display: inline;
    }

    /* Mise en forme et positionnement du carré contenant le rang lorsqu'il est ouvert */
    .position_rang:hover {
      position: absolute;
      top: 420px;
      /* Ici le positionnement change (le left) */
      left: -200px;
      /* Nouvelle taille */
      width: 240px;
      /* À retirer ou à mettre une valeur si on veut que la taille s'agrandisse encore de la position fermée. */
      height: XXpx;
      transition: all ease 1s;
    }

    /* Mise en forme et positionnement du carré contenant le profil lorsqu'il est ouvert */
    .position_profil:hover {
      position: absolute;
      top: 580px;
      /* Ici le positionnement change (le left) */
      left: -200px;
      /* Nouvelle taille */
      width: 240px;
      /* À retirer ou à mettre une valeur si on veut que la taille s'agrandisse encore de la position fermée. */
      height: XXpx;
      transition: all ease 1s;
    }

    /* Mise en forme et positionnement du carré contenant les boutons du profil lorsqu'il est ouvert */
    .position_boutons_profil:hover {
      position: absolute;
      top: 420px;
      /* Ici le positionnement change (le right) */
      right: -80px;
      /* Nouvelle taille */
      width: 120px;
      /* À retirer ou à mettre une valeur si on veut que la taille s'agrandisse encore de la position fermée. */
      height: XXpx;
      transition: all ease 1s;
    }

    /* Mise en forme du bloc central (continent avatar, pseudo et message) */
    .contenu_principal {
      /* Largeur */
      width: 800px;
      /* Permet de le centrer */
      margin: auto;
      /* Mis en forme du texte: couleur et police */
      color: grey;
      font-family: 'Reenie Beanie';
      /* Couleur de fond et bordure */
      background-color: white;
      border: 1px solid black;
    }

    /* Définition de la largeur de l'avatar. Permettre de le placer lui et le pseudo. */
    .en_haut_ava {
      position: relative;
      /* Taille avatar */
      width: 800px;
      height: 400px;
    }

    /* Placement de l'avatar */
    .en_haut_ava img {
      position: abolute;
      /* Vu qu'il prend tout le bloc, on le positionne tout en haut à droite. */
      top: 0;
      left: 0;
      /* L'image de l'avatar prendra automatiquement ces valeurs. */
      width: 800px;
      height: 400px;
    }

    /* Placement et mise en forme du pseudo */
    .en_haut_ava .name {
      position: absolute;
      /* Positionnement en haut à droite. */
      right: 10px;
      top: -30px;
      /* Taille de police et police */
      font-size: 30pt;
      font-family: 'Marck Script';
      /* Ombre du texte puis, après la virgule, lumière */
      text-shadow: 1px 1px 2px black, -1px -1px 1px white;
    }

    /* On retire le soulignement au passage de la souris sur le pseudo. */
    .en_haut_ava .name a:hover {
      text-decoration: none !important;
    }

    /* Permet de placer les boutons citer, éditer, etc. */
    .boutons_manipulation {
      width: auto;
      margin-top: 10px;
      padding-right: 10px;
      text-align: right;
    }

    /* Mise en forme du message */
    .postbody {
      /* Taille minimale */
      min-height: 400px;
      padding: 20px;
      padding-top: 0px;
      /* Couleur, alignement, police et taille du texte */
      color: grey;
      text-align: justify;
      font-family: 'Reenie Beanie';
      font-size: 16pt;
      /* Couleur de fond du message */
      background-color: white;
    }

    /* PHPBB3 spécifique pour le postbody */
    .postbody {
      float: none;
      width: auto;
    }

    /* PHPBB3 spécifique pour que le bouton online soit dans les contact. À ADAPTER SELON L'IMAGE MISE POUR CELA */
    .online {
      display: inline-block;
      width: 59px;
      height: 19px;
    }

    /********** FIN PROFIL **********/

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par NyoTheNeko le Ven 4 Mar 2016 - 21:16, édité 2 fois



    avatar
    NyoTheNeko
    FémininAge : 24Messages : 5018

    le Ven 4 Juil 2014 - 16:17

    Edit: Ça se transforme en TP parce que FA aime pas la longueur de mes templates, non mais! =P ça risque d'être pire avec le rajoute de PUNBB et Invision xD

    Petit message pour les admins (désolé du DP), j'aimerais commencer la conversion pour toutes versions de forums avec cet LS-ci. Du coup, j'aimerais bien si possible qu'il ne soit pas encore classé tant que c'est fait, histoire que je puisse tester comment je mets ça en forme! ^^ Pour le reste c'est bon, je contacterais Neva ou quelqu'un d'autre pour les éditer avec le bon template, mais pour les test, j'aimerais bien que celui-ci reste ouvert à l'édition pour moi! ^^

    EDIT Halloween : Je ne déplace pas le sujet dans ce cas. Par contre je l'ai précisé dans le sujet histoire qu'A-Lice ne le loupe pas (j'ai vu le message au dernier moment).



    avatar
    Alumine
    FémininAge : 21Messages : 488

    le Dim 7 Déc 2014 - 19:56

    Merci (=



    Alumine
    avatar
    patriciadpt30
    FémininAge : 55Messages : 240

    le Dim 8 Fév 2015 - 23:01

    merci



    Patricia :)
    avatar
    Euterpe
    FémininAge : 32Messages : 319

    le Mar 7 Avr 2015 - 18:11

    wow merci
    avatar
    Madras
    FémininAge : 33Messages : 281

    le Sam 27 Juin 2015 - 7:49

    Merci
    avatar
    ptite_perle
    FémininAge : 55Messages : 124

    le Ven 4 Sep 2015 - 21:50

    Superbe, merci



    avatar
    Kelalin
    FémininAge : 26Messages : 1979

    le Sam 5 Sep 2015 - 0:33

    Merci (*´∀`*人*´∀`*)
    avatar
    Cruelly
    FémininAge : 25Messages : 2572

    le Lun 14 Sep 2015 - 18:58

    Je suis trop curieuse ! merci :)



    MON PROJET, venez donner votre avis sur mon futur forum :heart: :heart:
    avatar
    TiGraou
    MasculinAge : 25Messages : 242

    le Mar 15 Sep 2015 - 16:48

    Merci !
    avatar
    NyoTheNeko
    FémininAge : 24Messages : 5018

    le Mer 7 Oct 2015 - 12:20

    Petit message pour Alice: tu peux le déplacer. Je n'ai pas le temps de faire les autres versions.
    bisous. :hug:



    avatar
    Coco-Lapin02
    MasculinAge : 50Messages : 167

    le Mar 22 Mar 2016 - 2:47

    Merci!
    avatar
    kensha
    FémininAge : 28Messages : 5

    le Dim 27 Mar 2016 - 4:40

    merci
    avatar
    Antithée
    FémininAge : 21Messages : 69

    le Mar 17 Mai 2016 - 14:20

    Très original, merci du partage !
    avatar
    NanoiHime
    FémininAge : 20Messages : 563

    le Sam 27 Aoû 2016 - 21:26

    mercii



    avatar
    mijako
    FémininAge : 26Messages : 83

    le Mar 14 Fév 2017 - 5:19

    merci
    avatar
    Nyotengu
    FémininAge : 24Messages : 85

    le Sam 4 Mar 2017 - 21:42

    merci
    avatar
    Christtinne
    FémininAge : 32Messages : 195

    le Mar 14 Mar 2017 - 1:49

    merci
    avatar
    .Lucifer.
    MasculinAge : 45Messages : 179

    le Ven 5 Mai 2017 - 15:03

    Merci beaucoup pour ce code ! Wink



    avatar
    shibari
    MasculinAge : 23Messages : 277

    le Mar 9 Mai 2017 - 13:09

    MERCI BAMBI





    Merci Dakota pour ce kit.
    avatar
    alsayed
    MasculinAge : 45Messages : 75

    le Ven 19 Mai 2017 - 10:01

    mercii
    avatar
    Deed01
    MasculinAge : 41Messages : 340

    le Sam 16 Sep 2017 - 18:27

    merci Very Happy
    avatar
    Omys
    FémininAge : 23Messages : 57

    le Lun 13 Nov 2017 - 15:02

    merci Very Happy



    avatar
    Nocturne
    FémininAge : 28Messages : 24

    le Mer 22 Nov 2017 - 9:48

    Vraiment super, merci beaucoup !
    Contenu sponsorisé


      La date/heure actuelle est Mar 18 Déc 2018 - 15:41