Avant toute chose, il faudra vous assurer que votre profil est en "simple". Pour ceci, allez dans votre Panneau d'Administration > Utilisateurs & Groupes > Utilisateurs > Profils > Options générales et cochez "NON" dans "Activer le profil avancé" !


Rendez-vous dans Panneau d'administration > Affichage > Templates > Profil > profile_view_body. Remplacez la totalité de votre template par le code suivant :

Code:

<div class="fondprof"><div class="tritri"></div>
<div class="bloblo">
<div class="avataru"><div class="hovvava">{AVATAR_IMG}</div></div>
</div>

<div class="bloblo">
  <div class="blokin">
  <!-- BEGIN profile_field -->
  <div id="field_id{profile_field.ID}">
    <span>{profile_field.LABEL}</span>{profile_field.CONTENT}
   </div> <!-- END profile_field -->
  </div>
</div>

<div class="bloblo2">
  
<div class="mess"><span class="sf sf-pens"></span> <a rel="nofollow" href="/spa/{PUSERNAME}">{L_POSTS}</a></div>
  <div class="suj"><span class="sf sf-book"></span> <a rel="nofollow" href="/sta/{PUSERNAME}">{L_TOPICS}</a></div>
 
 <div class="fieldu">
  <span>{ADMINISTRATE_USER}{BAN_USER}</span> <span>{L_PRIVATE_MSG} : {PRIVATE_MSG}</span>
 </div>

</div>
  
</div>
<div class="fondinfo">
  <div class="imggauche"><img src="https://i.imgur.com/MCf8k34.png"/></div>
  <div class="nameuh">{USERNAME}</div>  
  <div class="takt"><!-- BEGIN contact_field -->
{contact_field.CONTENT}    
    <!-- END contact_field --></div>
  </div>
</div>
<br />
<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
   $(document).ready(function(){
      $('[id^=field_id]').each(function(){
         if ( $(this).find('.field_editable').is('span, div') )
         {
            $(this).hover(function()
            {
               if( $(this).find('.field_editable.invisible').is('span, div') )
               {
                  $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
                  $(this).find('.ajax-profil_edit').attr({
                        alt: "{L_FIELD_EDIT_VALUE}",
                        title: "{L_FIELD_EDIT_VALUE}"
                     }).click(function(){
                     $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
                     $(this).prev().find('.ajax-profil_valid').attr({
                        alt: "{L_VALIDATE}",
                        title: "{L_VALIDATE}"
                     }).click(function(){
                        var content = new Array();
                        $(this).parent().find('[name]').each(function(){
                           var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                           if ( (type_special && $(this).is(':checked')) || !type_special )
                           {
                              content.push(new Array($(this).attr('name'), $(this).attr('value')));
                           }
                        });
                        var id_name = $(this).parents('[id^=field_id]').attr('id');
                        var id = id_name.substring(8, id_name.length);
                        $.post(
                           "{U_AJAX_PROFILE}",
                           {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                           function(data){
                              $.each(data, function(i, item){
                                 $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                              });
                           },
                           "json"
                        );
                     });
                     $(this).remove();
                  });
               }
            },function()
            {
               if( $(this).find('.field_editable.invisible').is('span, div') )
               {
                  $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                  $(this).find('.ajax-profil_edit').remove();
               }
            });
         }
      });
   });
//]]>
</script>

Et ensuite, votre CSS (Panneau de Configuration > Affichage > Couleurs > Feuille de style CSS) :

Code:

.takt {
    display: flex;
    font-size: 0px;
    text-align: center;
    margin-top: 60px;
    margin-left: 80px;
}
.nameuh {
    float: right;
    text-align: right;
    padding: 20px;
    margin-right: 50px;
    width: 200px;
    font: 30px fancy;
}
.fondprof {
    margin: 200px auto 0px auto;
    width: 722px;
    height: 448px;
    padding: 10px;
    background: #eaeaea;
    border: 10px solid #111111;
}
  .tritri {
    position: absolute;
    margin-left:-10px;
    margin-top:-10px;
    width: 0px;
    height:0px;
    border-right: 290px solid transparent;
    border-top: 289px solid #a495da;
  }
  .bloblo {
    width:240px;
    padding:5px;
    display:inline-block;
    height:260px;
    vertical-align:top;
    position:relative;
  }
  .bloblo2 {
    width:180px;
    padding:5px;
    display:inline-block;
    height:260px;
    vertical-align:top;
  }
.avataru {
    position: relative;
    width: 200px;
    height: 400px;
    background-image: url(http://via.placeholder.com/200x400);
    margin: 29px;
    outline: 1px solid #8872d8;
    outline-offset: 8px;
    overflow: hidden;
}
.avataru img {
  width:100%;
}
.hovvava {
  height:200px;
  transition:1s linear;
}
.avataru:hover .hovvava {
  background: rgba(164, 149, 218, 0.5);
    opacity:1;
}
.blokin {
    padding: 10px;
    height: 230px;
    text-align: left;
    color: black;
    font-family: roboto;
    font-size: 19px;
}
  .mess {
    margin:10px;
    text-align:center;
  }
  .mess span {
    color:black;
    font-size:50px;
    position:relative;
    top:20px;
  }
  .mess a {
    color:black;
    text-transform:uppercase;
    font:11px roboto condensed;
    font-style:italic;
    padding:10px;
    background-image: url(https://i.imgur.com/KikxU8E.png);
    box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
  }
  .suj {
    margin:10px;
    text-align:center;
  }
  .suj span {
    color:black;
    font-size:50px;
    position:relative;
    top:20px;
  }
  .suj a {
    color:black;
    text-transform:uppercase;
    font:11px roboto condensed;
    font-style:italic;
    padding:10px;
    background-image: url(https://i.imgur.com/KikxU8E.png);
    box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
  }
  .fieldu {
  margin:50px 0px 0px 0px;  
  }
  .fieldu span {
  display:block;
width:150px;
height:17px;
font-size:11px;
color:#111111;
text-transform:uppercase;
text-align:center;
font-family:'calibri';
box-sizing:border-box;
padding-top:2px;
background-image: url(https://i.imgur.com/KikxU8E.png);
margin-top:5px;
margin-left:18px;
}
.fondinfo {
    padding: 10px;
    background: #111111;
    width: 742px;
    margin: 0 auto;
    height: 100px;
}
  .imggauche {
    position:absolute;
    margin-top:-20px;
  }
  .imggauche img {
    height:138px;
  }

Pour que les icones apparaissent, rendez vous dans Panneau d'administration > Affichage > Templates > Général > overall_header et après la balise CSS, rajoutez :

Code:

<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

Validez le template.