Connexion

Récupérer mon mot de passe

Derniers sujets
» [PhpBB2] Comme sur ce forum....capture écran jointe
par Milouze14 Aujourd'hui à 4:21

» [PhpBB2] Index colonnes
par Milouze14 Aujourd'hui à 4:20

» [Invision]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
par Milouze14 Hier à 19:26

» [Invision] 3D pour invision
par Milouze14 Hier à 19:19

» *RESOLU*[PhpBB3] Changer la couleur du texte dans" Qui est en ligne "
par Milouze14 Hier à 19:06

» Règlement de l'entraide Forumactif
par Angelface Hier à 18:07

» *RESOLU*[PhpBB2] Bouton qui est en ligne qui clignote....
par Milouze14 Hier à 16:22

» [PHPBB2] Cacher tous les sujets des invités
par dédé54 Hier à 12:42

» [PhpBB2] index colonnes
par Milouze14 Hier à 4:24

» *RESOLU*[PhpBB2] coloration du titre du sujet dans chaque rubrique .
par Milouze14 Mer 16 Oct 2019 - 18:58

» histoire du Jour sans fin
par Quad Daniel Mer 16 Oct 2019 - 8:06

» Histoire de Blondes Sans Fin
par Quad Daniel Mer 16 Oct 2019 - 8:00

» *RESOLU*[PhpBB3] L'harmonie des couleurs
par 1bernard1 Mer 16 Oct 2019 - 5:18

» *RESOLU*[PhpBB2] Script qui beug depuis plusieurs jours
par Milouze14 Mar 15 Oct 2019 - 19:46

» *RESOLU*[PhpBB2] Coloration de citation parteille et autres
par Milouze14 Mar 15 Oct 2019 - 19:11

» *CORBEILLE*[Edge] Probleme affichage d'avatar..
par Milouze14 Mar 15 Oct 2019 - 19:02

» *RESOLU*[PhpBB2] Je n'ai pas le nombre de posts et sujets dans l'astuce...
par Milouze14 Mar 15 Oct 2019 - 19:00

» *RESOLU*[PhpBB3] Couleurs des liens dans le widget " derniers sujets "
par Milouze14 Lun 14 Oct 2019 - 19:58

» [PhpBB2]Afficher le nombre de sujets/messages sur les messages
par Milouze14 Dim 13 Oct 2019 - 18:04

» [PhpBB3]Afficher le nombre de sujets/messages sur les messages
par Milouze14 Sam 12 Oct 2019 - 18:44

[PHPBB3] Avatar coulissant + affichage profil différent.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Anonymous
Invité
Invité

MessageInvité le Mer 4 Jan 2017 - 0:03

Bonjour  a tous
je vous propose une modification de l'affichage du profil dans les messages.

avatar slide vers le haut en phpbb3 ( avatar carré ) >>

le visuel >> forum test

aller c'est partie >>

-Astuce du Forum Milouze14-




  • coucou

    Réponse automatique:

    Merci de cliquer ici pour voir le message

-Pour toute information merci de contacter un Membre du Staff-



ont va commencé par ajouté le script pour cacher les information au invité au début du template viewtopic_body

panneau admin>affichage>Template>général>viewtopic_body>

Code:
<script type="text/javascript">
$(document).ready(function(){if (_userdata["user_posts"]== 1)
$(function(){
$('.profil_mess').remove();
})});
                    </script>

ensuite ont va rechercher cette partie et supprimé la >>

Code:
<dt>
 {postrow.displayed.POSTER_AVATAR}
 <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
 </dt>
 <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
 <dd><br /></dd>
 <dd>
 <!-- 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}
 </dd>
 <dd><br /></dd>
 <dd>
 {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
 </dd>

remplacé par >>

Code:
<!-- debut slide --> <div class="profil_contour">
                        <br></br>
                      <div class="pseudo_profil"> <span class="name">{postrow.displayed.POSTER_NAME}</span></div>
                        <br />
        <div id="slide_avatar"><div>
                  <div style="width:220px;height: 220px;overflow: auto;"><div class="profil_mess">
                    <br />
                    <!-- BEGIN profile_field -->  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  <!-- END profile_field -->
                  </div>
        <div class="profil_mess"> {postrow.displayed.POSTER_RPG}  </div> </div>      
          <span id="postdetails poster-profile">{postrow.displayed.POSTER_AVATAR}</span> </div></div>
                          <br />
                  <center>{postrow.displayed.RANK_IMAGE}</center>
                        
                        <br />
    <center>  <div class="profil_contour"><strong>{postrow.displayed.POSTER_RANK}</strong></div></center>                      
                                                
      </div>  <!-- fin slide --><br />


Pensez à enregistrer puis à valider en cliquant respectivement sur Enregistrer  puis Valid

ensuite ont passe au css >>


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

ajouté ceci >>

Code:
/*début de R-max *****************************avatar slide vert le haut***************************************/

  /****************** début speudo slide***************/
 
.pseudo_profil{
  text-align: center !important;
  text-decoration:none !important;
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
 
 .pseudo_profil:hover {    
  letter-spacing:7px;
 }

.name {
    font-size: 20px;
  border: 1px solid #000;
    padding: 5px;
    border-radius: 5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}
 
  /************* fin speudo slide*******************/
 
.profil_contour
{
  border: 1px solid #000;    /**contour*****/
  background-color: #ccc; /************  contour cadre couleur********************/
   border-radius: 5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;   /******************* angle exterieur cadre couleur **********************/
font-size: 13px;                                
  text-align:center;
 padding-bottom:5px;
  padding-top:5px;
padding-left:5px;
padding-right:5px;
}
 /***************fin cadre couleur ***************/
 
 /************* début texte  slide intérieur ************/
.profil_mess div{  
  opacity:1;
}
 
  .profil_mess      
{
  text-align:left;
font-size: 11px;                                
  opacity: 0;
 -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;}
 
 
.profil_mess:hover    
{
  filter: alpha(opacity=100);
  opacity:1;
  }
 /*************fin texte slide intérieur *************/
/********* coin arrondie de avatar + taille automatique  **********/
#postdetails.poster-profile a img {  
border-radius: 5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  width:100%;
  height:100%;
  
}
 

/*******fond interieur ******/
#slide_avatar div {
  border-radius: 15px;
  -moz-border-radius:15px;
  -webkit-border-radius:15px; /*angle coin cadre interieur */
 background: #ccc;
  width:200px; /* Égal à la largeur de l'image */
 height: 200px; /* Égal à la hauteur de l'image */
 overflow: hidden;
 position: relative;
 }
#slide_avatar div img{  
    -webkit-transition:all 1.5s;    /* fait glisser l avatar */
    -moz-transition:all 1.5s;      /* fait glisser l avatar autre navigateur */
    -o-transition:all 1.5s;        /* fait glisser l avatar autre navigateur */
    -ms-transition:all 1.5s;      /* fait glisser l avatar autre navigateur */
    transition:all 1.5s;        /* fait glisser l avatar autre navigateur */
    top:0;                /* ne pas toucher */
    left:0;              /* ne pas toucher */
    width:100%;          /* ne pas toucher */
    height:100%;        /* ne pas toucher */
    position:absolute;    /* ne pas toucher */
    z-index:1;
}
 
 #slide_avatar div:hover img{
    margin-top:-200px;      /* fait glisser l avatar a droite */
}
/*******************fin slide avatar img ********************/
/*fin de R-max*******************************avatar slide vert le haut ***********************************************************/


Pensez à valider les modifications en cliquant sur le bouton Valider

ps:pour des avatars rectangle , il faudra modifier le html et le css ..




Voilà,c'est tout pour le moment clin oeil.
Un soucis?
Direction l'entraide hinhin
https://www.milouze14.com/f108-entraide-tous-supports
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mer 4 Jan 2017 - 4:42

coucou Chrystophe,

merci pour ce partage clin oeil
issam89
issam89
Milouzien

Messageissam89 le Mar 10 Jan 2017 - 23:40

Merci beaucoup !
Anonymous
Invité
Invité

MessageInvité le Jeu 12 Jan 2017 - 8:54

Merci beaucoup !
Anonymous
Invité
Invité

MessageInvité le Jeu 12 Jan 2017 - 15:55

Merci beaucoup !
msfeettoes
msfeettoes
Milouzien

Messagemsfeettoes le Jeu 13 Avr 2017 - 18:56

Merci beaucoup !
OptimaluS
OptimaluS
Milouzien

MessageOptimaluS le Mer 3 Mai 2017 - 1:13

Merci beaucoup !
fleur78
fleur78
Milouzien

Messagefleur78 le Dim 27 Aoû 2017 - 10:40

Merci beaucoup !
1bernard1
1bernard1
Milouzien

Message1bernard1 le Dim 24 Fév 2019 - 0:40

Merci beaucoup !

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum