AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  Connexion  

Partagez| .

Tes tutoriel by Amaranth

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

avatar

Admin - Blablateur - Movie Maker - Aviseur
____________________

Voir le profil de l'utilisateur http://nouilles8frites51.forumactif.org
J'ai rejoins la planète PRD le : 04/07/2014 J'ai posté un total de : 103 et j'ai : 25 Localisation : PRD


Admin - Blablateur - Movie Maker - Aviseur
Message(#) Sujet: Tes tutoriel by Amaranth Jeu 29 Oct - 10:37

INFOBULLE PROGRESSIVE DE PROFIL

Niveau

Moyen


Auteur

Amaaranth ♫♪


A quoi ça sert ?


Ce tutoriel permettra de déplacer les champs contact du profil pour les faire apparaître sur l'avatar au survol dans une infobulle.


Tutoriel


Tout d'abord, il vous faut chercher ceci dans le template :
Code:
<table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle">
 {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
 </td>
 </tr>
 </table>
Il s'agit là du champ contact que vous avez ordinairement en dessous du message posté. {postrow.displayed.PROFILE_IMG} indique l'icone qui redirige vers le profil du posteur. {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} indique respectivement, les icones qui redirige vers "écrire un message au posteur" et "envoyer un email au posteur". {postrow.displayed.contact_field.CONTENT} indique tous les autres champs contact possible d'insérer comme facebook, twitter, tumblr ou même des champs personnalisés comme le lien vers la fiche de présentation ou la fiche de liens. Et enfin {postrow.displayed.ONLINE_IMG} qui est l'icone qui apparaît si le membre est en ligne.
Nous allons donc supprimer cette partie du code de son emplacement et ne garder que :
Code:
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
. Pour savoir où le coller nous allons maintenant rechercher {postrow.displayed.POSTER_AVATAR} C'est la partie qui représente l'avatar du posteur. Nous allons donc coller nos données pour le champ contact juste à la suite.

Nous allons maintenant définir l'infobulle progressive pour qu'elle s'applique à l'avatar et contient les champs contact. Pour cela, nous allons ouvrir une div juste avant la partie qui représente l'avatar et fermer celle-ci après les champs contact. Nous donnerons un nom à cette div pour la partie css, telle que div class="bidule". Nous allons ensuite définir la partie contenue dans l'infobulle et ouvrir un span juste après la partie qui représente l'avatar et la fermer juste avant la fermeture de la div. D'une même façon, nous lui donnerons un nom pour le css telle que span class="bouh" ce qui donne :
Code:
<div class="bidule"> {postrow.displayed.POSTER_AVATAR}
                            <span class="bouh">
                              {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<br/><!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
                             
                              </span>
                            </div>
L'essentiel a été fait dans le template, nous pouvons alors enregistrer la modification de celui-ci.

Dirigeons-nous maintenant vers notre css. Il nous faut maintenant inscrire le nom de notre div et de notre span mais attention, ne le faisons pas dans n'importe quel ordre. Pour bien la définir, on peut se demander ce qu'on veut définir et sur quoi ? Ici, une infobulle sur l'avatar. Nous allons donc inscrire le nom de cette div .bidule{ mais ça ne suffit pas. On doit préciser que l'infobulle est contenue dans le span, pour cela nous allons rajouter le nom à la suite ce qui donne : .bidule span.bouh{. Bien nous avons notre premier code défini. Oui, c'est bien mais, que mettre à l'intérieur ? Et bien tout ce qui peut définir votre infobulle, sa largeur, sa longueur, ses couleurs, l'espacement, les contours, tout ce qu'on voudrait y voir mais surtout, sa position. Dans sa simplicité voici ce que vous pouvez obtenir :
Code:

.bidule span.bouh{
background-color:#ffffff;
color:#000000;
-webkit-transition: all .50s;
transition: all .50s;
margin-left:-193px;
position:absolute;
height: 50px;
width:163px;
overflow-y: auto;
opacity: 0 ;
}
Cette première partie est la position basique de l'infobulle, la position qu'elle a lorsqu'elle n'est pas visible. La transition indique le temps que l'infobulle mettra à apparaître, ici un petit délais a été mis pour ne pas avoir l'impression que l'infobulle «tombe » d'un coup. Le margin-left permet de placer les champs contact sur l'avatar, notamment parce qu'originalement, sans ce code, l'infobulle apparaîtra à côté de l'avatar. (/ !\ je me suis appuyée sur un avatar au format 200x320 pour le chiffrement) Le height et le width indique respectivement la longueur et la largeur de l'infobulle. L'overflow-y permet pour sa part d'appliquer une scrollbar sur la longueur si les données sont plus importante que ne peut en contenir le height.
/!\ n'oubliez pas de refermer votre code à l'aide des balises } !

Nous allons maintenant nous occuper de faire apparaître l'infobulle. Et donc insérer un hover tel que : .bidule:hover span.bouh{ mais également ajouter un focus sur l'avatar qui est lui-même un lien qui redirige vers le profil pour cela nous allons ajouter un a et un :focus tel que : .bidule:hover span.bouh, a.bidule:focus span.bouh{. Nous n'avons maintenant plus qu'à mettre le contenu qui devra indiquer la position de l'infobulle une fois visible. Voilà ce que ça peut donner :
Code:
.bidule:hover span.bouh, a.bidule:focus span.bouh{
opacity: 1;
margin-left:-193px;
margin-top:235px;
}
Nous avons donc toujours notre margin-left qui nous aide à la placer au bon endroit par rapport à l'avatar. Nous avons en plus, ajouter un margin-top qui va donner l'effet de descente de l'infobulle sur l'avatar. J'ai ici, laissé un espace entre le bas de l'avatar et l'infobulle mais il est tout à fait d'augmenter le nombre ou au contraire de le diminuer selon vos envies.
/!\ n'oubliez pas de refermer votre code à l'aide des balises } !



code fiche par

Revenir en haut Aller en bas

Tes tutoriel by Amaranth

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

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