[PHPBB2] Afficher les informations du profil des messages avec plusieurs infobulles

[Milouze14Fondateur]

  ,

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é:



Le bloc ou est placé l'avatar rang etc etc:
L'aperçu imagé:



En passant le curseur sur le titre "Voir son profil" on affichera tous les libellés   :
L'aperçu imagé:



Et au survol de chaque intitulé :

L'aperçu imagé:



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_body

Recherchez 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 style

Toute 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  

[fleur78]

Cool Merci  

[fleur78]

Oups parconte je trouve pas ou motifier le champ

[Milouze14Fondateur]

 

direction l'entraide stp  .
Sinon je vais pas m'en sortir  .

[fleur78]

  oui désoler voila c'est fait

[Teten85]

Merci je vais tester

[Teten85]

Je retombe sur le même souci, un message m'avertit que ma CSS est devenu trop grande et qu'il faut que je raccourcisse  

[Milouze14Fondateur]

 Didier,
si tout est correcte dans ta CSS et que le visuel te convient , je peux héberger
la totalité sur mon nom de domaine  .

[Teten85]

Je ne peux même pas la mettre à jour ma CSS, il la refuse elle est trop importante :ggff: 

J'ai un nom de domaine avec un hebergement (en vue d'un futur site en création pour plus tard) mais je suis novice et je ne sais pas comment faire pour heberger ma CSS sur le serveur...
J'en reviens toujours au même Philippe ce qui me dérange pour que tu l'heberge sur ton nom de domaine c'est qu'à chaque fois j'aurais besoin de tes services quand je voudrai modifier ma CSS...ça sera pas pratique
Est-ce que c'est compliqué à faire pour que je l'envoie sur mon domaine à moi  

[Milouze14Fondateur]

 Didier,

avec ton nom de domaine il suffit d'enregistrer la partie de ta CSS qui sera censée
ne plus être touché pendant un bon bout de temps dans le bloc note
puis au moment d'enregistrer le bloc note ,
il faut lui donner l'extension .css

Puis il faudra le placer sur ton nom de domaine  et regarder le lien et enfin le déposer dans le template
overall_header

Mais je ne pourrais t'aider plus car je n'en ai tout simplement pas le temps  .
Par contre , tu peux donner la totalité de ta css avec l'ajout éventuel stp  

[fascicularia]

Je ne peux même pas la mettre à jour ma CSS, il la refuse elle est trop importante :ggff: 

J'ai un nom de domaine avec un hebergement (en vue d'un futur site en création pour plus tard) mais je suis novice et je ne sais pas comment faire pour heberger ma CSS sur le serveur...
J'en reviens toujours au même Philippe ce qui me dérange pour que tu l'heberge sur ton nom de domaine c'est qu'à chaque fois j'aurais besoin de tes services quand je voudrai modifier ma CSS...ça sera pas pratique
Est-ce que c'est compliqué à faire pour que je l'envoie sur mon domaine à moi  

et en le compressant ???????

[Teten85]

 Didier,

avec ton nom de domaine il suffit d'enregistrer la partie de ta CSS qui sera censée
ne plus être touché pendant un bon bout de temps dans le bloc note
puis au moment d'enregistrer le bloc note ,
il faut lui donner l'extension .css

On peut fractionner la CSS ?

Puis il faudra le placer sur ton nom de domaine  et regarder le lien et enfin le déposer dans le template
overall_header

C'est ce que je voulais savoir ou mettre le lien
Mais je ne pourrais t'aider plus car je n'en ai tout simplement pas le temps  .
Par contre , tu peux donner la totalité de ta css avec l'ajout éventuel stp  

Je te remercie Philippe pour ton aide je vais essayer la manip et sinon j'attendrai que tu puisses m'aider c'est pas pressé  

Je ne peux même pas la mettre à jour ma CSS, il la refuse elle est trop importante :ggff: 

J'ai un nom de domaine avec un hebergement (en vue d'un futur site en création pour plus tard) mais je suis novice et je ne sais pas comment faire pour heberger ma CSS sur le serveur...
J'en reviens toujours au même Philippe ce qui me dérange pour que tu l'heberge sur ton nom de domaine c'est qu'à chaque fois j'aurais besoin de tes services quand je voudrai modifier ma CSS...ça sera pas pratique
Est-ce que c'est compliqué à faire pour que je l'envoie sur mon domaine à moi  

et en le compressant ???????

Comment ça ?

[Milouze14Fondateur]

Donne nous ta CSS Didier , que l'on puisse voir les éventuelles améliorations a apporter  .

[fascicularia]

Comment ça ?

Il suffit de passer par un compresseur de css qui va mettre le css à la ligne. A la fin, il te reste deux ou trois lignes.
Je te conseille ceci dit de conserver un duplicata de ta feuille de style pour travailler plus sereinement si tu souhaites y apporter des modifications.

http://www.cssdrive.com/index.php/main/csscompressor

[pierre31250]

magnifique, merci

[Teten85]

Comment ça ?

Il suffit de passer par un compresseur de css qui va mettre le css à la ligne. A la fin, il te reste deux ou trois lignes.
Je te conseille ceci dit de conserver un duplicata de ta feuille de style pour travailler plus sereinement si tu souhaites y apporter des modifications.

http://www.cssdrive.com/index.php/main/csscompressor

J'avais zappé ton message Stephane  
Je te remercie pour ton lien que je viens d'aller voir  
Je remplace l'original par la CCS compressée c'est ça ?
Je garde ma CCS originale en double et à chaque modif je recompresse et je remplace

[Teten85]

Ça fonctionne bien Stephane le compressur de CSS  
merci Philippe et Stephane pour votre aide  


Juste une question Philippe, est-on obligé dans l'infobulle d'avoir "information demandée" à chaque intitulé

[Milouze14Fondateur]

 Didier ,

Juste une question Philippe,
est-on obligé dans l'infobulle d'avoir "information demandée" à chaque intitulé

Non , ce n'est pas une obligation Didier   .

Il te suffit de supprimer cette partie :

Code:


Information demandée:<br />


Dans :

Code:

<!-- 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 -->


[Teten85]

Merci Philippe c'est exactement ce que je voulais
J'avais réussi à supprimer "information demandée" dans le template mais il restait une ligne vide à enlever  

[InvitéInvité]

merci

[Sacha]

Hello,

Merci.

[dragon594]

Merci beaucoup !

[fred9545Donateur]

Merci beaucoup !