Connexion

Récupérer mon mot de passe

Derniers sujets
» [PUNBB] Module de connexion type Forumactif
par soleda Aujourd'hui à 16:05

» [TOUTES VERSIONS] Afficher un texte dans l'éditeur avec transition
par soleda Aujourd'hui à 16:00

» *RESOLU*[PHPBB2] Problème des membres non inscrits sur le Tchatt:
par Milouze14 Aujourd'hui à 14:59

» [TOUTES VERSIONS sauf AwesomeBB] Ajouter une limite de caractères à la réponse rapide..
par Splash Sam 18 Jan 2020 - 10:25

» *CORBEILLE*[PHPBB2] Echange de trafic modifié en recherche interne inopérant
par Milouze14 Ven 17 Jan 2020 - 19:04

» [AWESOMEBB]Ajouter une limite de caractères à la réponse rapide..
par Milouze14 Ven 17 Jan 2020 - 16:28

» [TOUTES VERSIONS]Visualiser le mot de passe
par soleda Ven 17 Jan 2020 - 6:00

» *RESOLU*[PHPBB2] Nouveaux BBcode pour le TchatBox :
par Milouze14 Mer 15 Jan 2020 - 18:08

» *RESOLU*[PHPBB3] Bouton à Smileys
par Milouze14 Mer 15 Jan 2020 - 11:23

» histoire du Jour sans fin
par Quad Daniel Mar 14 Jan 2020 - 12:51

» Histoire de Blondes Sans Fin
par Quad Daniel Mar 14 Jan 2020 - 12:48

» [AWESOMEBB]Afficher les widgets à droite
par Splash Mar 14 Jan 2020 - 8:21

» [AWESOMEBB] Widget "Derniers Sujets"
par Milouze14 Mar 14 Jan 2020 - 7:20

» *RESOLU*[PHPBB3] Bouton à Smileys
par Milouze14 Sam 11 Jan 2020 - 16:13

» *RESOLU*[AWESOMEBB] Nombre de caractères restant sur les nouveaux sujets
par Milouze14 Sam 11 Jan 2020 - 15:55

» *RESOLU*[PHPBB3] Bouton avec menu déroulant
par Milouze14 Sam 11 Jan 2020 - 15:52

» C’est fort de calva !
par Quad Daniel Sam 11 Jan 2020 - 10:14

» *RESOLU*[EDGE] Supprimer la balise br ou saut de ligne
par Milouze14 Sam 11 Jan 2020 - 9:18

» *RESOLU*[EDGE] Ajouter l'avatar du membre à côté de la réponse rapide
par Milouze14 Ven 10 Jan 2020 - 20:21

» *RESOLU*[AWESOMEBB] Design Footer
par Milouze14 Ven 10 Jan 2020 - 19:24

[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

Avertissement : 30/100

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