epsilon
forum de libre service de codage,
aucune inscription
Une refonte complète d'Epsilon est prévue pour bientôt. Dans les mois qui suivent, le forum va totalement changer d'apparence et toutes les catégories vont être réorganisées. Pas de panique, aucun LS ne va disparaître !
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-28%
Le deal à ne pas rater :
Brandt LVE127J – Lave-vaisselle encastrable 12 couverts – L60cm
279.99 € 390.99 €
Voir le deal

Jawn
Jawn
The relations between us in those latter days were peculiar.
The relations between us in those latter days were peculiar.
[PURPLE AND STARY] WpInyZE

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://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://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://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://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.
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum