
,
voici un tutoriel concernant les intitulés du profil qui seront masqués
puis en survolant un titre ( Voir son profil ) on affichera l'intégralité mais tout en cachant les
informations

.
Au survol des intitulés une infobulle fera son apparition avec une transition avec de petits triangles
qui pourront être supprimés via la C.S.S

.
La C.S.S a été */* Censuré par le robot de l'administration*/*çue pour n'importe quel cas de figure dans votre PA

:
Que ce soit une barre , date choix multiple etc etc
Ainsi que l'affichage Icône plus le texte
L'aperçu imagé:
![[PHPBB2] Afficher les informations du profil des messages avec plusieurs infobulles 410](https://i.servimg.com/u/f38/11/26/21/37/410.png)
Le bloc ou est placé l'avatar rang etc etc:
L'aperçu imagé:
![[PHPBB2] Afficher les informations du profil des messages avec plusieurs infobulles 118](https://i.servimg.com/u/f38/11/26/21/37/118.png)
En passant le curseur sur le titre "Voir son profil" on affichera tous les libellés

:
L'aperçu imagé:
![[PHPBB2] Afficher les informations du profil des messages avec plusieurs infobulles 213](https://i.servimg.com/u/f38/11/26/21/37/213.png)
Et au survol de chaque intitulé :
L'aperçu imagé:
![[PHPBB2] Afficher les informations du profil des messages avec plusieurs infobulles 310](https://i.servimg.com/u/f38/11/26/21/37/310.png)
Au survol de l'intitulé ,on déplace le petit triangle bleu de la gauche
vers l'infobulle qui donnera l'information demandée

.
Allez , assez de blabla et passons à la pratique

.
Pour le tutoriel on aura aussi la possibilité de personnaliser entièrement la partie gauche:
Donc pensez a bien déposer la couleur de fond qui correspond à vore forum les ami(e)s

.
Dans le template viewtopic_body:
Affichage/
Templates/
Général/
viewtopic_bodyRecherchez ceci ( ligne 121 environ) :
- 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}"></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>
Le tutoriel a été */* Censuré par le robot de l'administration*/*çût avec une largeur de la colonne de gauche de 230px sur un template vierge à ce niveau

.
On applique alors une nouvelle largeur ici:
- Code:
-
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="230">
et ici:
- Code:
-
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:230px;height:1px" />
Allez hop on supprime la partie mentionnée plus haut et on remplce pas ceci:
- Code:
-
<!-- BEGIN displayed -->
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<!-- ON CHANGE LA CLASS POUR UN AFFICHAGE DANS LA CSS -->
<td class="M14_profil_sujet"{postrow.displayed.THANK_BGCOLOR} valign="top" width="230">
<br />
<center><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a>
<strong>{postrow.displayed.POSTER_NAME}</strong>
</span></center><br />
<div id="M14_label_bloc">
<p> Voir son profil</p>
<span class="M14_label_bulle">
<!-- BEGIN profile_field -->
<div id="M14_label">
<span>{postrow.displayed.profile_field.LABEL}</span>
<div>Information demandée:<br />{postrow.displayed.profile_field.CONTENT}<br /></div>
<p>{postrow.displayed.POSTER_RPG}</p>
</div>
<!-- END profile_field -->
</span>
</div>
<br /><br /><br />
<center>
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}<br />
{postrow.displayed.POSTER_AVATAR}<br />
</span></center><br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:230px;height:1px"/>
</td>
Pensez à enregistrer puis à valider en cliquant respectivement sur

puis

Dans la feuille de style:
Affichage/
Images et Couleurs/
Couleurs/
Feuille de styleToute la C.S.S est commentée afin de mettre vos propres couleurs les ami(e)s

.
collez tout ceci:
- Code:
-
/*Le bloc gauche des messages*/
.M14_profil_sujet
{
background:#141414;/*la couleur de fond*/
height:300px;/*augmentez ou diminuez la hauteur*/
border: 1px solid #55bfcf;/*l epaisseur style couleur de bordure*/
-moz-border-radius-: 8px;/*les bordures arrondies*/
-webkit-border-radius: 8px;
border-radius:8px;
}
/*La partie qui englobe toutes les informations */
#M14_label_bloc
{
position:absolute;/*ne pas toucher*/
width:220px;/*la largeur de la colonne en relation avec le template*/
}
/*Le titre Voir son profil*/
#M14_label_bloc p
{
text-align:center;/*on centre le texte*/
color:#fff;/*la couleur de police*/
font-size:11px;/*la taille de la police*/
cursor:pointer;/*on donne un style au curseur*/
}
/*On impose une largeur au bloc*/
#M14_label
{
width:220px;/*la largeur de la colonne en relation avec le template*/
}
/*Positionnement de l icone si active a droite pour eviter toute deformation*/
#M14_label img
{
float:right;/*on positionne l icone a droite*/
margin-right:5px;/*puis on decale de 5px*/
}
/*Apparence de l intitule*/
#M14_label span
{
margin-left:5px;/*on decale l intitule de 5px de la gauche*/
cursor:pointer;/*on donne un style au curseur*/
font-size:11px;/*la taille de la police*/
color:#55bfcf !important;/*la couleur de police*/
}
/*L infobulle contenant tous les intitules*/
.M14_label_bulle
{
position:absolute;/*ne pas toucher*/
top:30px;/*on affichera l infobulle a 30px du titre*/
padding:10px 4px 10px 4px;/*on applique des espaces en haut droite bas et gauche*/
width: 220px;/*la largeur de la colonne en relation avec le template*/
left:0;/*ne pas toucher*/
display:none; /*ne pas toucher*/
background-color:#fff;/*la couleur de fond*/
color:#55bfcf;/*la couleur de police*/
font-size:10px;/*la taille de la police*/
background-image: url('http://i46.servimg.com/u/f46/11/26/21/37/01210.png');/*l image en haut de l infobulle*/
background-repeat:repeat-x;/*on repete l image*/
background-position:top;/*puis on la positionne en haut*/
cursor:pointer;/*on donne un style au curseur*/
-webkit-border-radius: 8px;/*les bordures arrondies*/
-moz-border-radius: 8px;
border-radius: 8px;
}
/*On affiche l infobulle au survol */
#M14_label_bloc:hover .M14_label_bulle
{
display:block;/*ne pas toucher*/
}
/*On demande que le premier intitule soit place a 25 px du haut*/
#M14_label:first-child
{
margin-top:25px;
}
/*Les informations qui seront affichees dans la petite infobulle*/
#M14_label div
{
display:none;/*ne pas toucher*/
position:absolute;/*ne pas toucher*/
margin-top:-15px;/*ne pas toucher*/
margin-left:168px;/*ne pas toucher*/
width:100%;/*ne pas toucher*/
min-height:30px;/*ne pas toucher*/
font-size:9px;/*La taille de police*/
color:#8fcf3c;/*la couleur de police*/
padding:10px 5px 10px 5px;/*on applique des espaces en haut droite bas et gauche*/
font-size:11px;/*la taille de la police*/
word-wrap:break-word;/*on evite les debordements*/
background-color:#2b1e1d;/*la couleur de fond*/
border:1px solid #8fcf3c;/*l epaisseur style couleur de bordure*/
/*on applique des bordures arrondies seulement en haut a droite et en bas a gauche*/
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomleft: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
-webkit-transition: all 0.5s ease-in-out;/*une petite transition de 0.5s s appliquera au survol*/
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*on positionne les icones eventuelles a droite dans l infobulle*/
#M14_label div img
{
float:right;/*ne pas toucher*/
border:none;/*ne pas toucher*/
}
/*On affiche l infobulle au survol des intitules */
#M14_label:hover div
{
display:block;/*ne pas toucher*/
}
/*********************Pour l affichage des barres***********************/
/*On applique une correction pour l affichage de la div*/
#M14_label div div
{
background:none;/*ne pas toucher*/
position:absolute ;/*ne pas toucher*/
margin-top:1px;/*Ne pas toucher*/
left:-150px;/*Ne pas toucher*/
border:none;/*ne pas toucher*/
}
#M14_label div:hover div
{
border:none;/*ne pas toucher*/
background:none;/*ne pas toucher*/
}
#M14_label div div:before , #M14_label div div:hover:before
{
border:none;/*ne pas toucher*/
}
/*Fin de correction pour l affichage de la div*/
/*On place la premiere image a gauche*/
#M14_label div div img
{
position:absolute ;/*ne pas toucher*/
float:left;/*ne pas toucher*/
}
/*********************Fin de l affichage des barres***********************/
/*on donne une autre apparence au survol de l infobulle*/
#M14_label div:hover
{
background-color:#141414;/*la couleur de fond*/
border:1px solid #20aec8;/*l epaisseur style couleur de bordure*/
color:#20aec8;/*la couleur de police*/
}
/*Les effets css3 qui peuvent etre supprimes*/
/*le petit triange a gauche des intitules*/
#M14_label:before
{
content:'';/*Ne pas toucher*/
position:absolute;/*Ne pas toucher*/
margin-left:0;/*Ne pas toucher*/
width: 0px;/*Ne pas toucher*/
height: 0px;/*Ne pas toucher*/
border-style: solid;/*Ne pas toucher*/
border-width: 5px 0 5px 10px;/*Ne pas toucher*/
border-color: transparent transparent transparent #20aec8;/*changer la couleur*/
-webkit-transition: all 0.5s ease-in-out;/*une petite transition de 0.5s s appliquera au survol*/
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*le petit triange a gauche des intitules au survol*/
#M14_label:hover:before
{
content:'';/*Ne pas toucher*/
position:absolute;/*Ne pas toucher*/
margin-left:150px;/*Ne pas toucher*/
width: 0px;/*Ne pas toucher*/
height: 0px;/*Ne pas toucher*/
border-style: solid;/*Ne pas toucher*/
border-width: 5px 0 5px 10px;/*Ne pas toucher*/
border-color: transparent transparent transparent #8fcf3c;/*changer la couleur*/
}
/*le petit triange a gauche de l infobulle*/
#M14_label div:before
{
content:'';/*Ne pas toucher*/
position:absolute;/*Ne pas toucher*/
float:left;/*Ne pas toucher*/
left:-10px;/*Ne pas toucher*/
top:1px;/*Ne pas toucher*/
width: 0px;/*Ne pas toucher*/
height: 0px;/*Ne pas toucher*/
border-style: solid;/*Ne pas toucher*/
border-width: 5px 10px 5px 0;/*Ne pas toucher*/
border-color:transparent #8fcf3c transparent transparent;/*changer la couleur*/
-webkit-transition: all 0.5s ease-in-out;/*une petite transition de 0.5s s appliquera au survol*/
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*le petit triange a gauche de l infobulle au survol*/
#M14_label div:hover:before
{
content:'';
position:absolute;/*Ne pas toucher*/
float:left;/*Ne pas toucher*/
left:-10px;/*Ne pas toucher*/
top:1px;/*Ne pas toucher*/
width: 0px;/*Ne pas toucher*/
height: 0px;/*Ne pas toucher*/
border-style: solid;/*Ne pas toucher*/
border-width: 5px 10px 5px 0;/*Ne pas toucher*/
border-color: transparent #20aec8 transparent transparent;/*changer la couleur*/
}
/*Fin des effets css3 qui peuvent etre supprimes*/
Pensez à valider les modifications en cliquant sur le bouton