Bonjour à tous !
Aujourd'hui je vous propose un profil très simple et facilement modifiable ^-^
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.
- Rendu en image:
Optimisé pour tous les navigateurs - Version PHPBB2
Quelques infos:
- La taille est adaptée automatiquement
- Les couleurs et les polices sont modifiables et sont toutes indépendantes de la charte de couleur dans l'onglet Couleurs.
- L'image "Info du profil" est modifiable.
Installer votre nouveau profil:
Pour commencer l'installation de nos 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 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></span>
<div class="SujetPseudo">{postrow.displayed.POSTER_NAME}</div>
<div class="SujetProfil">
<div class="SujetRang">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}
</div>
<span class="SujetAvatar">
{postrow.displayed.POSTER_AVATAR}
</span>
</div>
<div class="SujetInfosProfil">
<div>
<!-- BEGIN profile_field -->
<div class="SujetLabel">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}</div>
<!-- END profile_field -->
<div class="SujetFeuillePerso">{postrow.displayed.POSTER_RPG}</div>
</div>
<img src="http://img11.hostingpics.net/pics/480042Infoduprofil.png" alt="Infos fermées" class="ImageInfosClosed" />
</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:
/* Commande profil par Cheshire Cat */
/* Concerne le pseudo du membre */
.SujetPseudo{
margin-bottom:-12px; /* fait descendre le pseudo en dessous de la bordure du profil */
text-align:center;
text-transform:uppercase;
font-size:20px;
}
/* Empêche le pseudo d'être écrit en gras */
.SujetPseudo strong{
font-weight:normal;
}
/* Concerne l'avatar et le rang */
.SujetProfil{
margin:0 5px;
width:230px;
padding:15px;
box-sizing:border-box;
border-radius:15px;
border:1px solid #d6d59c;
background-color:#fafdf9;
}
/* Concerne le rang */
.SujetRang{
margin:5px 0 15px;
text-align:center;
font-size:15px;
color:#6e520f;
letter-spacing:1px;
}
/* Concerne les informations du profil */
.SujetInfosProfil{
width:135px;
padding:0px 15px 0px 15px;
margin-top:-1px;
margin-left:34px;
box-sizing-border-box;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
border:1px solid #d6d59c;
background-color:#fafdf9;
transition:all 800ms;
font-size:11px;
}
/* Ajoute un padding supérieur au passage de la souris pour afficher les informations */
.SujetInfosProfil:hover{
padding:15px 15px 0 15px;
}
/* Concerne la parite interne aux informations */
.SujetInfosProfil > div{
height:0px;
overflow:auto;
transition:all 800ms; /* créé une transition progressive avant et après passage de la souris */
}
/* Affiche les informations au survol */
.SujetInfosProfil:hover > div{
height:180px;
}
/* Concerne les champs du profil */
.SujetLabel{
margin-bottom:5px;
margin-right:5px;
padding:3px;
background-color:rgba(233, 236, 234, 0.7);
border:1px solid #bcb7ba;
color:#6e520f;
}
/* Supprime le margin-bottom pour le dernier champ du profil */
.SujetLabel:last-of-type{
margin-bottom:0;
}
/* Concerne la feuille de personnage */
.SujetFeuillePerso{
color:#6e520f;
}
/* Concerne le lien vers la feuille de personnage */
.SujetFeuillePerso a[href="/u1rpgsheet"]{
text-align:center;
letter-spacing:1px;
display:block;
margin:10px 0 5px;
color:#6e520f;
border-bottom:1px solid #6e520f;
}
/* Supprime les balises BR avant et après le lien vers la feuille de personnage */
.SujetFeuillePerso br:first-of-type,
.SujetFeuillePerso br:nth-of-type(2){
display:none;
}
/* Concerne l'image en bas des informations du profil */
.ImageInfosClosed{
margin-bottom:-1px;
margin-left:-15px;
opacity:0.6;
}
/* empeche certaines infos du profil de depasser*/
.SujetInfosProfil > div img,
.SujetInfosProfil > div textarea {
max-width: 100%;
box-sizing: border-box;
}
N'oubliez pas de l'enregistrer, et voilà vos nouveaux profils !
Un petit merci fait toujours plaisir, alors hésite pas ! :mouton:
, j'ai juste ajouté ce petit bout de CSS :
