Bonjour ou bonsoir !
Je suis de nouveau là, de retour pour vous proposer un nouveau libre service de profil avec un style assez simple !
Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.
- Aperçu en image:
Optimisé pour tous les navigateurs - Version PHPBB2
Quelques infos:
- La taille de la création est de 200 pixels.
- La taille des avatars dans le code est de 320 pixels, mais adaptable si vous modifiez la valeur.
- Les couleurs et les polices sont modifiables et sont toutes indépendantes de la charte de couleur dans l'onglet Couleurs.
Installer votre nouveau profil:
Pour commencer l'installation de notre nouveau profil, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > viewtopic_body et chercher cette partie, si votre template n'est pas encore modifiée
- Code:
<!-- BEGIN displayed -->
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<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><br />
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
<!-- 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><br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>
Vous supprimez et vous remplacez par ce qui suis
- Code:
<!-- BEGIN displayed -->
<tr id="p{postrow.displayed.U_POST_ID}">
<td valign="top">
<div class="profil_posteur">
<div class="pseudo_sujet">
<a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a>
{postrow.displayed.POSTER_NAME}
</div>
<div class="rang_sujet">
{postrow.displayed.POSTER_RANK}
</div>
<div class="hover_profil">
<div class="avatar_sujet">
{postrow.displayed.POSTER_AVATAR}
</div>
<div class="infosprofil_sujet">
<!-- BEGIN profile_field -->
<div class="label_sujet">
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}
</div>
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</div>
</div>
<div class="rang_sujet">
{postrow.displayed.RANK_IMAGE}
</div>
</div>
</td>
Une fois cela fait, enregistrez et validez votre template.
Nous allons ensuite devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS
- Code:
/* Profil du membre dans les sujets */
.profil_posteur{
width:200px;
background:#927d75;
padding:8px 0;
font-family:calibri; /* Police sur toute la zone du profil */
box-sizing:border-box; /* Cette propriete permet d ajuster le padding en fonction de la taille du bloc */
}
/* La partie suivante centre a la fois le pseudo, le rang écrit et l image du rang */
.pseudo_sujet, .rang_sujet{
text-align:center;
}
/* La partie suivante concerne uniquement le pseudo du membre */
.pseudo_sujet{
font-size:16px;
}
/* La partie suivante concerne les div du rang */
.rang_sujet{
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
}
/* La partie suivante concerne uniquement l image du rang */
.rang_sujet img{
max-width:100%;
}
/* La partie suivante concerne l'effet sur le profil */
.hover_profil{
position:relative; /* Ne pas modifier cette partie */
width:200px; /* A modifier en fonction de la taille de votre avatars */
height:320px; /* A modifier en fonction de la taille de votre avatars */
overflow:hidden;
margin:8px 0;
}
.avatar_sujet{
position:absolute;
top:0;
left:0;
/* La propriete filter permet d appliquer un flou a l image */
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
/* La valeur scale permet d agrandir la zone concernee */
-webkit-transform:scale(1);
transform:scale(1);
/* La propriete transition permet d avoir un effet fluide */
-webkit-transition:all 400ms;
transition:all 400ms;
}
.hover_profil:hover .avatar_sujet{
/* La propriete filter permet d appliquer un flou a l image */
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
/* La valeur scale permet d agrandir la zone concernee */
-webkit-transform:scale(2);
transform:scale(2);
}
.infosprofil_sujet{
position:absolute; /* Ne pas modifier cette partie */
top:10px; /* Ne pas modifier cette partie */
left:10px; /* Ne pas modifier cette partie */
width:180px;
height:300px;
overflow:auto;
padding:10px;
background:rgba(0, 0, 0, 0.2); /* La derniere valeur permet de modifier l opacite de la couleur de fond */
border:4px solid #f9fdf9;
box-sizing:border-box; /* Cette propriete permet d ajuster le padding en fonction de la taille du bloc */
opacity:0;
/* La valeur scale permet d agrandir la zone concernee */
-webkit-transform:scale(1.5);
transform:scale(1.5);
/* La propriete transition permet d avoir un effet fluide */
-webkit-transition:all 400ms;
transition:all 400ms;
}
.hover_profil:hover .infosprofil_sujet{
opacity:1;
/* La valeur scale permet d agrandir la zone concernee */
-webkit-transform:scale(1);
transform:scale(1);
}
.label_sujet{
background:#f9fdf9;
padding:3px;
text-transform:uppercase;
font-size:10px;
letter-spacing:1px;
margin:0 0 5px 0;
}
/* Ne pas modifier cette partie */
.label_sujet:last-child{
margin:0 0 0 0;
}
/* empeche certaines infos du profil de depasser*/
.infosprofil_sujet img,
.infosprofil_sujet textarea {
max-width: 100%;
box-sizing: border-box;
}
Si jamais vous voulez une image dans vos profils, vous devez mettre le champ en tout premier et avec une image par défaut, sans quoi cela peut provoquer quelques problèmes avec le code actuel.
Voici aussi les champs à renseigner pour ne pas afficher le titre du label
Donc, si vous suivez ces indications, ajoutez ceci à votre CSS
- Code:
/* Ne pas modifier cette partie */
.label_sujet:first-child{
padding:0;
}
/* Ne pas modifier cette partie */
.label_sujet:first-child > img{
width:100%; /* le pourcentage permet de redimensionner l image quelque soit sa taille et celle de la zone */
}
N'oubliez pas de l'enregistrer, et voilà vos nouveaux profils !
J'espère que ça vous plaît, et n'hésitez surtout pas à poster un petit "merci", ça fait toujours très plaisir
PA codée par Cheshire Cat de <a href="http://epicode.bbactif.com/">Epicode</a> et <a href="http://www.never-utopia.com">N-U</a><br /> 
