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

    Rappel du premier message :

    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
    Yovoed
    FémininAge : 19Messages : 52

    le Lun 22 Jan 2018 - 21:35

    Merci beaucoup !
    avatar
    Likilou
    MasculinAge : 25Messages : 301

    le Ven 16 Fév 2018 - 19:00

    Merci :)



    avatar
    sunn-day
    MasculinAge : 23Messages : 44

    le Jeu 29 Mar 2018 - 22:17

    merci
    Contenu sponsorisé


      La date/heure actuelle est Lun 15 Oct 2018 - 10:19