Profil

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

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 **********/

PHPBB3: 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>

<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 **********/

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

Merci (=

merci

wow merci

Merci

Superbe, merci

Merci (*´∀｀*人*´∀｀*)

Je suis trop curieuse ! merci :)

Merci !

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

Merci!

merci

Très original, merci du partage !

mercii

merci

merci

merci

Merci beaucoup pour ce code !

MERCI BAMBI

mercii

merci

merci

Vraiment super, merci beaucoup !