C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Vos partenaires dans le footer
Sam 10 Nov 2018, 09:39 par FredR

» Mettre votre © Copyright dans le footer de votre forum
Sam 10 Nov 2018, 09:25 par FredR

» Effet pour vos sous-forums
Sam 10 Nov 2018, 06:13 par FredR

» Pour faire des beaux titres de sous-forums
Sam 10 Nov 2018, 05:55 par FredR

» Bouton ''Sélectionner le contenu'', pour les codes
Sam 10 Nov 2018, 05:41 par FredR

» Modifier l'apparence du titre des topics
Sam 10 Nov 2018, 05:28 par FredR

» Début d'un sujet/Fond pour sujet important
Sam 10 Nov 2018, 02:45 par FredR

» Previsualiser le premier message d'un sujet
Ven 09 Nov 2018, 12:49 par FredR


Partagez | 
 

Infos du profil derrière l'avatar (comme CssActif)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2  Suivant
Voir le profil de l'utilisateur
avatar
Ninja Codeur
Ninja Codeur

Masculin Messages : 1179



Infos du profil derrière l'avatar (comme CssActif)


Informations générales

Description :
Ce tutoriel vous montre comment afficher les informations derrière l'avatar comme vous pouvez le voir sur CSSACTIF

Démo :
Exemple indisponible pour le moment, mais c'est le même effet que sur CSSActif

Testé sur :
FF / Chrome / IE v10+

Crédits :
Proposé par Hiro le 29-04-2012 | Tutoriel approuvé par Hiro

Le tutoriel


Premièrement le html


Dans le panneau d'administration, cliquez sur l'onglet Affichage puis dans le menu Templates » Général et cliquez sur viewtopic_body pour l'éditer.
Situez ce code :
Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">

Juste en dessous, collez ceci :
Code:
<div id="englob">
  <div class="imgp">{postrow.displayed.POSTER_AVATAR}</div>
  <div class="infosp">
  {postrow.displayed.PROFILE_IMG} <br/>
  {postrow.displayed.PM_IMG} <br/>
  {postrow.displayed.EMAIL_IMG} <br/>
  {postrow.displayed.contact_field.CONTENT} <br/>
  {postrow.displayed.ONLINE_IMG}
  </div>
</div>

Pour que l'avatar n'apparaisse pas en double, allez plus bas dans le template et retirez l'autre mention de l'avatar :
Code:
{postrow.displayed.POSTER_AVATAR}

Petite description :

Code:
{postrow.displayed.PROFILE_IMG}
Correspond à l'image qui renvoie vers le profil
Code:
{postrow.displayed.PM_IMG}
Correspond à l'image qui permet d'envoyer un mp
Code:
{postrow.displayed.EMAIL_IMG}
Correspond à l'image qui permet d'envoyer un Email
Code:
{postrow.displayed.contact_field.CONTENT}
Correspond aux champs de contact (skype aim etc)
Code:
{postrow.displayed.ONLINE_IMG}
Correspond à l'image qui indique le statut (en ligne/offline)

Maintenant passons au css


Dans le panneau d'administration, cliquez sur l'onglet Affichage, puis dans le menu Images et couleurs » Couleurs et cliquez sur l'onglet Feuille de styles CSS
Collez-y ce code :
Code:
/* Code par Hiro pour CSSACTIF
  Merci de ne pas supprimer cette mention
  (http://www.css-actif.com) */

#englob { /* Encadrement global des 2 divs */
    position:relative;
    width:200px;
    height:200px;
    border:1px solid red; /* La vilaine bordure rouge */
    overflow:hidden; /* Permet de cacher ce qui dépasse */
}

.imgp {
    background:blue; /* le bg  de la div qui contient l'avatar */
    position:absolute; /* Laissez comme ceci */
    top:0;/* Laissez comme ceci */
    left:0;/* Laissez comme ceci */
    width:100%;/* Laissez comme ceci */
    height:100%;/* Laissez comme ceci */
    z-index:1;/* La position par rapport à l'autre div qui contient les infos */
    -webkit-transition:all 0.5s;/* Laissez comme ceci */
    -moz-transition:all 0.5s;/* Laissez comme ceci */
    -o-transition:all 0.5s;/* Laissez comme ceci */
    -ms-transition:all 0.5s;/* Laissez comme ceci */
    transition:all 0.5s;/* Laissez comme ceci */
}

#englob:hover > .imgp {
    margin-top:200px; /* Lorsque la souris passe sur la div #englob, on fait glisser l'image vers le bas de 200px */
}

.infosp {
    background:green; /* le bg  de la div qui contient les infos*/
    position:absolute;/* Laissez comme ceci */
    top:0;/* Laissez comme ceci */
    left:0;/* Laissez comme ceci */
    width:100%;/* Laissez comme ceci */
    height:100%;/* Laissez comme ceci */
    z-index:0;/* La position par rapport à l'autre div qui contient les infos (ici en dessous)*/
    opacity:0;/* on met l'opacité à zero pour un effet stylé ;) */
    margin-left:-200px;/* on décale la div de 200px, elle est invisible grâce a l'overflow:hidden de #englob */
    -webkit-transition:all 0.5s;/* Laissez comme ceci */
    -moz-transition:all 0.5s;/* Laissez comme ceci */
    -o-transition:all 0.5s;/* Laissez comme ceci */
    -ms-transition:all 0.5s;/* Laissez comme ceci */
    transition:all 0.5s;/* Laissez comme ceci */
}

#englob:hover > .infosp {
  opacity:1;/* Lorsque la souris passe sur la div #englob, on augmente l'opacité des infos */
  margin-left:0px;/* et on décale cette div à 0px (position par défaut) */
}

Il est assez commenté, je pense. ^^

Et donc, si vous testez, vous devriez avoir un joli petit effet à la CSSActif !, mais si vous testez sur IE vous verrez qu'il n'y a pas de glissement, normal car les transitions ne marcheront qu'à partir de la prochaine version.


Voilà, j'espère que ce tutoriel vous plaira ; une alternative pour IE viendra sûrement d'ici peu.

Bye Smile




Fuyez, pauvres fous ! [Gandalf]


Dernière édition par Hiro le Jeu 12 Juil 2012, 06:31, édité 1 fois
MessageSujet: Infos du profil derrière l'avatar (comme CssActif)   Dim 29 Avr 2012, 13:10
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5576



FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Sam 02 Juin 2012, 18:52
Revenir en haut Aller en bas
Voir le profil de l'utilisateur https://www.facebook.com/pages/Sabris-gallery/263877590341104
avatar
{ Membre }
{ Membre }

Féminin Messages : 24



Merci c'est super comme tuto !
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Dim 08 Juil 2012, 09:01
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mission-uranie.forumotion.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 20



Merci beaucoup, je trouve ça trop stylé ^^. J'ai essayé seule d'arriver à ce résultat sans succès XD


J'ai une question, j'aimerais savoir si à la place des images, ils est possible de mettre les infos en texte du profil ?
Et si au lieu que l'image descende, elle remonte ?




MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Dim 22 Juil 2012, 12:38
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 14



Génial ce tuto !
Mais au lieu d'avoir une action avec :hover, serait-il possible d'en avoir une lorsque l'on clique sur l'avatar ? Sans pour autant utiliser :active, car il faut maintenir le clic et c'est pas super pratique...
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Dim 22 Juil 2012, 14:10
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://managerpes.forum2ouf.com/forum.htm
avatar
{ Membre }
{ Membre }

Masculin Messages : 53



Merci l'ami Smile
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Mar 24 Juil 2012, 06:43
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://eclipse-forum.guildealliance.com
{ Membre }
{ Membre }

Masculin Messages : 10



Bonjour,

Merci pour ce super tuto seulement j'ai un petit problème. J'ai fais le tuto pour décaler le cadre du profil sur le coté donc je voudrais savoir comment intégrer ce tuto à l'autre car sinon là j'ai deux cadres de profils.

Merci ^^
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Ven 07 Sep 2012, 03:55
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre actif }
{ Membre actif }

Féminin Messages : 1170



Hello Midnight !
Les tutoriels sont ouverts aux commentaires et aux suggestions seulement. En cas de problème ou de question, comme indiqué sur cette page, merci d'ouvrir un sujet dans la section Aide CSS & xHTML.

Merci de ta compréhension. Smile


MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Ven 07 Sep 2012, 06:34
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://eclipse-forum.guildealliance.com
{ Membre }
{ Membre }

Masculin Messages : 10



oups j'avais pas lue jusqu'au bout autant pour moi :/
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Ven 07 Sep 2012, 07:30
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://rockart.forumsactifs.com/forum
avatar
{ Membre }
{ Membre }

Féminin Messages : 86



Merci =)
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Jeu 01 Nov 2012, 21:57
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://rockart.forumsactifs.com/forum
avatar
{ Membre }
{ Membre }

Féminin Messages : 86



J'ai un petit souci, sur google chrome le code marche a merveille mais sur IE, ca fait ceci : https://redcdn.net/hpimg4/pics/503646aide2.png (j'ai modifier un peu le code dans les deux cas)
la partie du dessus change de couleur lorsqu'elle est survolé mais j'aimerais qu'elle disparaisse que qu'il y a que l'avatar.
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Jeu 01 Nov 2012, 23:01
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



Sunn-shiinex, quand tu prendra la peine de lire, on prendra la peine de te répondre (dans la section appropriée si possible). Merci.


MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Ven 02 Nov 2012, 05:57
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Masculin Messages : 55



Salutation, joli tutoriel, merci.
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Ven 02 Nov 2012, 06:03
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 42



Super boulot, j'ai tout de suite compris.
Le CSS est très bien commenté, idéal pour les débutants =D
Merci!


pwët
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Mar 01 Jan 2013, 11:39
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://tokyo-nights.forumactif.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 31



C'est la première fois que je fais un forum...
Et bon sang, mon forum ressemble déjà à quelque chose grâce à CSS !

Et puis, les avatars... C'est la grande classe Razz
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Mer 30 Jan 2013, 18:14
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 9



J'ai une question, est ce qu'on peut mettre en plus derrière l'avatar, la fameuse feuille de personnage ? Si, oui, comment faut-il procéder, merci Smile



▽ DELENA ALWAYS AND FOREVER.
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Sam 20 Avr 2013, 12:30
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 44



Super merci beaucoup.
Ton tutoriel était très bien expliqué I love you
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Lun 06 Mai 2013, 21:01
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 10



merci pour le tutoriel I love you
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Ven 14 Juin 2013, 07:18
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://nightside.forumactif.com
avatar
{ Membre }
{ Membre }

Féminin Messages : 11



Merci!
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Lun 17 Juin 2013, 06:14
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Masculin Messages : 2



Superbe tuto I love you
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Lun 29 Juil 2013, 08:43
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://templelouisnoble.tumblr.com/
avatar
{ Membre }
{ Membre }

Masculin Messages : 11



Merci beaucoup !


MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Dim 20 Oct 2013, 14:43
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://legend-of-hogwarts.forumactif.org
{ Membre }
{ Membre }

Féminin Messages : 12



OMG c'est juste un tuto que je cherches depuis MEGA longtemps !!
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Jeu 31 Oct 2013, 15:04
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://autretemps.forumdefan.com/forum
avatar
{ Membre }
{ Membre }

Féminin Messages : 12



Merci pour ce tuto, mais dans le profil, peut on mettre à la place des images Mp, Profil, qui se trouvent déjà en bas de la page, les informations du profil genre Date d'inscription, nombre de message, etc...
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Ven 06 Juin 2014, 20:53
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://2bspotted.forumactif.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 15



Meric beaucoup. Très utile.
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Lun 16 Juin 2014, 11:20
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://monster-rpg.forumactif.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 13



Magnifique merci *-*
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Lun 07 Juil 2014, 10:34
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   
Revenir en haut Aller en bas
 

Infos du profil derrière l'avatar (comme CssActif)

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 2Aller à la page : 1, 2  Suivant

 Sujets similaires

-
» Infos du profil derrière l'avatar (comme CssActif)
» Avatar transition laissant apparent les infos du profil au survol de la souris
» Info de profil caché derrière l'avatar
» Mettre un fond derrière les infos du profil
» Problème d'affichage du contenu des onglets contenant les infos de profil dans la page d'affichage des sujets

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Le Profil-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit