Partagez | 
 

 [xooit] Cacher le profil des posteurs sous l'avatar en hover

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

Miettes

Doyenne

Bons Points (BP) : 113
MessageSujet: [xooit] Cacher le profil des posteurs sous l'avatar en hover   Jeu 7 Jan - 10:36
Tutoriel proposé par Newteen

Bonjours à tous et toutes !!

Voila, je voulais à tout prix faire un système de hover pour cacher le profil des membres sous mon avatar sur mon forum XOOIT!

A partir d'un tuto pour Forumactif sur un autre forum et avec l'aide de Louzanes (MERCIII) et de diverses recherches sur SoP et sur d'autres sites (d'où des crédits en bas de message), j'ai enfin réussi et je me suis dit que ça pourrait intéresser d'autres personnes "xooitiennes", j'ai donc décidé d'en faire à mon tour un tutoriel.

En faisant ceci, j'ai appris plein de nouvelles choses en CSS et je pense que vous pourrez vous aussi apprendre plein de choses. Smile

Je vais donc tenter de bien vous expliquer !


L'effet en image :

On observe différents effets :
- L'inclinaison du cadre des avatars change au survol.
- Le profil apparaît et l'avatar disparaît au survol.

Pour apprendre à modifier le contenu des profils des membres et connaître à quoi correspondent les codes du template il existe un tuto sur SoP [ICI]

Pour faire cet effet de transparence, il existe aussi un tutoriel de Miettes qui utilise du Javascript [ICI]

1. modification du template VIEWTOPIC_BODY.TPL

Direction le template : VIEWTOPIC_BODY.TPL
(Panneau d'administration => Templates => VIEWTOPIC_BODY.TPL)
(Pensez à sauvegarder votre template sans modification quelques part, au cas où ça tournerait mal. De cette manière vous pourrez le remettre)

Grâce au tutoriel dont le lien est ci-dessus, vous avez mis en page votre profil posteur.

Nous allons ici nous intéresser à l'avatar
Code:
{postrow.POSTER_AVATAR}
et au contenu du profil
Code:
{postrow.POSTER_JOINED} <= date d'inscription {postrow.POSTER_POSTS}<= Nombre de messages
{postrow.POSTER_FROM}<= autres champs de profil

Nous allons créer une balise "div" qui encadre donc tous ces éléments, qui s'appelle ici "avatar_mess" et qui va nous permettre de travailler le cadre de l'avatar, avec ici, l'inclinaison (que nous verrons avec le CSS).

Nous créons ensuite une "div" pour l'avatar lui même, ici appelé "avatarhover" (mais vous l'appelez comme vous voulez, mes noms ne sont pas forcément les plus judicieux ^^) qui va permettre de travailler la position et l'opacité de l'avatar en fonction du survol (hover), dans le CSS. On referme la div, juste après l'avatar donc.

Puis une nouvelle "div" : "profil_mess" qui va nous permettre de travailler l'inclinaison du profil selon le survol.

Et une dernière "div" pour mettre en page le profil, que j'ai appelé "mepprofil" ("mep" pour mise en page)

Nous refermons toutes nos balises "div".

Code:
<div class="avatar_mess">
   <div class="avatarhover"> {postrow.POSTER_AVATAR}</div>
  <div class="profil_mess">
    <div class="mepprofil"> Découvre son profil<br>
{postrow.POSTER_JOINED}<br>
<br>{postrow.POSTER_POSTS}
{postrow.POSTER_FROM}
   </div>
  </div>
</div>

On referme, si ce n'est pas fait, toutes autres balises de mise en page du profil, si par exemple vous avez créé un tableau.

Pour avoir une vision d'ensemble voilà mon code entier :
Code:

/*PROFIL POSTEUR*/    
 <table class="tableau_profil" cellpadding="0" cellspacing="0">          
            <tr>
              <td id="pseudo">
                  <span class="name"><a name="{postrow.U_POST_ID}"></a><span class="pseudo_posteur">{postrow.POSTER_NAME}</span></span>
            </td>
        </tr>  
        <tr>
          <td id="rang_posteur">
<span class="rang_posteur">{postrow.POSTER_RANK}{postrow.RANK_IMAGE}</span>
            </td>
          </tr>
          <tr>
            <td>
<div class="avatar_mess">
  <div class="avatarhover"> {postrow.POSTER_AVATAR}</div>
  <div class="profil_mess">
    <div class="mepprofil"> Découvre son profil<br>
{postrow.POSTER_JOINED}<br>
<br>{postrow.POSTER_POSTS}
{postrow.POSTER_FROM}
  </div>
  </div>
</div>  
            </td>
            </tr>
          </table>
 

Ce code est donc à mettre à la place de :
Code:

 <span class="name"><a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b></span><br /><span class="postdetails">{postrow.POSTER_RANK}<br />{postrow.RANK_IMAGE}{postrow.POSTER_AVATAR}<br /><br />{postrow.POSTER_JOINED}<br />{postrow.POSTER_POSTS}<br />{postrow.POSTER_FROM}</span>
 


Pensez à enregistrer votre template.

Pour le moment, voila ce que ça donne :
Spoiler:
 

Parlons peu, parlons bien, passons au CSS !

2. Modification du style dans le template OVERALL_HEADER.TPL

(Panneau d'administration => Templates => OVERALL_HEADER.TPL)
De même, pensez à sauvegarder quelques part votre template sans les modifications, comme ça en cas de problème vous pourrez le remettre tel quel !

Le CSS que nous allons voir devra être placer avant la balise

Code:
</style>


Je vous laisse mettre en page le nom du membre et son rang. Nous allons nous concentrer sur l'avatar et les infos du profil.

Attaquons par le CSS de notre première balise div avatar_mess
Tout d'abord, lorsqu'on ne survole pas l'avatar.
Je vous invite à lire mes commentaires dans les codes suivants pour comprendre le CSS.
Pour ce qui n'est pas expliqué, vous pouvez toujours trouver des informations sur le forum  [ICI]

Code:

.avatar_mess
{
  width: 200px; /*la largeur*/
  height: 320px;  /*la hauteur*/
  margin-left: -10px;
  margin-right: 10px;
  overflow: hidden;
 background: #99CCFF;   /* JE CHOISIS MES PROPRES COULEURS*/
  border: 5px solid #FFCC99;  /* JE CHOISIS MA BORDURE */
  
  /* L'INCLINAISON*/
 transform: rotate(-5deg); /* Nous indiquons que nous voulons qu'il y ai une transformation de type rotation, de 5degrés vers la droite */
  -moz-transform: rotate(-5deg); /* Tous les "transform" suivant permettent de s'adapter aux différents navigateurs)*/
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -htm-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  
  box-shadow: 0px 0px 6px #000000; /* Ici, nous avons ajouté de l'ombre à notre bloc et nous nous sommes adapter aux différents navigateurs, vous pouvez tout a fait l'enlever si vous ne voulez pas d'ombre*/
  -moz-box-shadow: 0px 0px 6px #000000;
  -o-box-shadow: 0px 0px 6px #000000;
  -htm-box-shadow: 0px 0px 6px #000000;
  -webkit-box-shadow: 0px 0px 6px #000000;
  
      transform: all;   /* nous appliquons nos transformations à tout le bloc et avec tous les navigateurs*/
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;

transition: 1s; /*Ici, nous réglons la vitesse de l'inclinaison, en seconde et pour tous les navigateurs*/
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
 }
 

Ça va jusque la ? Parce que c'est loin d'être fini. Very Happy 

Bien, maintenant, occupons-nous de ce qui se passe lorsqu'on survole l'avatar.

Pour indiquer au style que nous parlons de ce qui va se passer lorsqu'on survole l'avatar, nous allons ajouter ":hover" comme ci-dessous dans le code:
Code:

.avatar_mess:hover
{
  margin-left: 5px; /* la marque lorsque l'avatar se redressera */
  
/* L'inclinaison*/  
 transform: rotate(0deg); /* nous voulons que l'avatar se redresse, il sera droit donc une rotation de 0degrès. Si vous voulez le faire pencher de l'autre coté par exemple, il faudra mettre "5deg" */

  -moz-transform: rotate(0deg); /* Comme précédement, on précise pour les autres navigateurs*/
  -o-transform: rotate(0deg);    
  -ms-transform: rotate(0deg);
  -htm-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
      transform: all; /* pour la suite de ce style, c'est la meme chose qu'avant, on regle la transformation pour tous le bloc et tous les navigateurs et idem pour la vitesse*/
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
Vous suivez ? A ce stade, on devrat avoir un cadre incliné qui se redresse au passage de la souris.

Maintenant, on attaque l'avatar (Banzaïïï!)
Donc, on s'occupe de notre balise "div avatarhover"

Code:

.avatarhover{
position:relative;  /* Position permet de placer l'élément dans le conteneur, donc ici dans notre bloc. Relative, indique que l'élément ne dépasse pas du bloc*/
z-index: 2; /* Z-index permet de jouer avec les superpositions. Plus le chiffre est haut, plus l'élément est au dessus. Ici, mon profil sera en dessous donc 1 et mon avatar au dessus donc ici : 2. Attention ça ne fonctionne que si l'élément est positionné (ci dessus)!*/
}


Bien maintenant, que se passe-t-il lorsqu'on survole l'avatar ? On ajoute donc ":hover"
Tout ce que nous souhaitons, c'est qu'au passage de la souris, l'avatar disparaisse (ou s'atténue). Pour cela, on va jouer avec l'opacité. 0.0 étant transparent et 1.0 étant opaque
Code:

.avatarhover:hover{
  opacity: 0;
 -moz-opacity: 0; /* Pour FIREFOX veille version*/
  -khtml-opacity: 0; /*  Pour SAFARI veille version */
  filter: alpha(opacity=0); /*Pour internet explorer, ici 0 pour transparent et 100 pour opaque*/
}

Bien, maintenant quand nous passons la souris sur l'avatar, le cadre se redresse et l'avatar disparaît.

OK, maintenant on va s'occuper du profil : c'est parti.

Code:

.profil_mess
{
  display: block; /* Il s'agit d'un bloc*/
  width: 190px;
  height: 310px;
  margin: auto;
  padding: 5px;
  overflow: auto; /* Si besoin d'une scroll bar */
  background: #99CCFF;  /* JE CHOISIS MES PROPRES COULEURS*/
  color: black;        /* JE CHOISIS MES PROPRES COULEURS*/
  
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;

position:absolute; top:10px; left:10px;  /* Je place mon code en haut du bloc */
z-index: 1;  /* Je place mon profil SOUS l'avatar. L'avatar esr en position 2 donc au dessus.*/
}  

Dernière étape !
Je mets en page mon profil : taille, alignement, etc.

Code:

.mepprofil{
font-size: 12px !important;
text-align: center;
width: 100%;
margin: 5px auto 0;
padding:0;
height: 100%;
position:absolute; top:10px; left:10px;
}

Mon code en entier est ci-dessous. Si vous le prenez, personnalisez-le, et n'oubliez pas de mettre un petit lien vers SoP quelque part. Razz

Code:

/*PROFIL POSTEUR*/
table.tableau_profil{
   width:230px;
   margin:auto;
   border:dashed 1px #333333;
   border-radius: 10px;
  background-color: {T_BODY_BGCOLOR};}
  
#pseudo{
   border-bottom:solid 1px #333333;
   width:100%;
   text-align:center;
}

#rang_posteur{
   width:100%;
   text-align:center;
}

.pseudo_posteur{
   font-family:Georgia;
   font-size: 15px;
  text-align: center;  
  }

  
.rang_posteur{
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size: 15px;
   font-variant: small-caps;
   text-align: center;
   padding: 10px;
   }

.avatar_mess
{
  width: 200px;
  height: 320px;
  margin-left: -10px;
  margin-right: 10px;
  overflow: hidden;
  background: #99CCFF;
  border: 5px solid #FFCC99;
  transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -htm-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  box-shadow: 0px 0px 6px #000000;
  -moz-box-shadow: 0px 0px 6px #000000;
  -o-box-shadow: 0px 0px 6px #000000;
  -htm-box-shadow: 0px 0px 6px #000000;
  -webkit-box-shadow: 0px 0px 6px #000000;
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
 }

.avatar_mess:hover
{
  margin-left: 5px;
  transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -htm-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.avatarhover{
position:relative;
z-index: 2;}

.avatarhover:hover{
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}

.profil_mess{
  display: block;
  width: 190px;
  height: 310px;
  margin: auto;
  padding: 5px;
  overflow: auto;
  background: #99CCFF;
  color: black;
position:absolute; top:10px; left:10px;
z-index: 1;
}

.mepprofil{
font-size: 12px !important;
text-align: center;
width: 100%;
margin: 5px auto 0;
padding:0;
height: 100%;
position:absolute; top:10px; left:10px;
}


/* fin profil posteur*/

Pensez à enregistrer le template pour garder vos modifications.

Voila ce que ça donne :
Spoiler:
 

3. Du javascript

Pour finir, on va ajouter du Javascript pour que ce cadre ne s'affiche que lorsqu'il est nécessaire (là où il y a des avatars donc).
Cette partie est faites par Miettes.

Ce code sera à placer dans le template Overall_header.tpl juste avant
Code:
<style type="text/css">

On va utiliser du js pour tester si le tableau contient ou non du contenu "info du membre". Pour cela, on va juste regarder si le "avatarhover" contient ou non une image

Donc en gros

-> quand le document est chargé
Code:
jQuery(document).ready(function(){

-> On va regarder chaque "avatarhover"
Code:
jQuery(".avatarhover").each(function() {

-> pour chacun d'eux, on va stocker le contenu du bloc dans une variable "info"
Code:
var info = jQuery(this).html();

-> on test si info est vide
Code:
if(info == " "){

-> dans ce cas, on va mettre en display "none" le bloc "avatar_mess" qui est le parent de "avatarhover"
Code:
jQuery(this).parent().css("display", "none");

-> Il faut également appelé la bibliothèque jquery
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Au final, voici le code à copier :

Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">
<!--
jQuery(document).ready(function(){
   jQuery(".avatarhover").each(function() {
     var info = jQuery(this).html();
      if(info == " "){
         jQuery(this).parent().css("display", "none");
      }
   });
});

//-->
</script>






Je choisis de mettre un petit crédit pour être tout a fait honnête avec tous le monde. Si le staff considère que c'est une mauvaise idée, enlevez-le ! (Pas de punitions pitié, ça part d'une bonne intention :$ *se cache sous le bureau*)
Ils m'ont aidée :  [ICI] [ICI][ICI]
Je précise tout de même que j'ai dû faire beaucoup de recherches par rapport au tuto qui m'a inspirée et que ce tutoriel est totalement fait par mes soins, et avec l'aide de Miettes.




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



 
Je soussigné(e), Newteen,  accepte / n'accepte pas  qu'un directeur reposte le tutoriel "[xooit]Cacher le profil des posteurs sous l'avatar en hover " tel que je l'ai rédigé.
 

[xooit] Cacher le profil des posteurs sous l'avatar en hover

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» cacher/afficher le profil sous l'avatar
» Infos du profil derrière l'avatar (comme CssActif)
» Supprimer le lien menant au profil au clic sur l'avatar
» Mettre le pseudo sous l'avatar
» Tutoriel Afficher les fichiers cachés sous Windows Vista / Seven

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants