Infos  du profil derrière l'avatar (comme CssActif) Bouton_activeInfos  du profil derrière l'avatar (comme CssActif) Bouton_hoverInfos  du profil derrière l'avatar (comme CssActif) Fb-hoverInfos  du profil derrière l'avatar (comme CssActif) Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
Infos  du profil derrière l'avatar (comme CssActif) EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Infos  du profil derrière l'avatar (comme CssActif) EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Infos  du profil derrière l'avatar (comme CssActif) EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Infos  du profil derrière l'avatar (comme CssActif) EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Infos  du profil derrière l'avatar (comme CssActif) EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Infos  du profil derrière l'avatar (comme CssActif) EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Infos  du profil derrière l'avatar (comme CssActif) EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Infos  du profil derrière l'avatar (comme CssActif) EmptyVen 03 Fév 2023, 17:22 par Krager


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
Hiro
Hiro
Ninja Codeur
Ninja Codeur

Masculin Messages : 1179



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

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



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)   Infos  du profil derrière l'avatar (comme CssActif) EmptyDim 29 Avr 2012, 13:10
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



Infos  du profil derrière l'avatar (comme CssActif) Empty
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
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Infos  du profil derrière l'avatar (comme CssActif) EmptySam 02 Juin 2012, 18:52
Revenir en haut Aller en bas
https://www.facebook.com/pages/Sabris-gallery/263877590341104
sabritheducks_79
sabritheducks_79
{ Membre }
{ Membre }

Féminin Messages : 24



Infos  du profil derrière l'avatar (comme CssActif) Empty
Merci c'est super comme tuto !
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Infos  du profil derrière l'avatar (comme CssActif) EmptyDim 08 Juil 2012, 09:01
Revenir en haut Aller en bas
http://mission-uranie.forumsrpg.com/
Alÿnea
Alÿnea
{ Membre }
{ Membre }

Féminin Messages : 20



Infos  du profil derrière l'avatar (comme CssActif) Empty
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)   Infos  du profil derrière l'avatar (comme CssActif) EmptyDim 22 Juil 2012, 12:38
Revenir en haut Aller en bas
Hyacinthe
Hyacinthe
{ Membre }
{ Membre }

Féminin Messages : 14



Infos  du profil derrière l'avatar (comme CssActif) Empty
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)   Infos  du profil derrière l'avatar (comme CssActif) EmptyDim 22 Juil 2012, 14:10
Revenir en haut Aller en bas
http://managerpes.forum2ouf.com/forum.htm
kun
kun
{ Membre }
{ Membre }

Masculin Messages : 53



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

Masculin Messages : 10



Infos  du profil derrière l'avatar (comme CssActif) Empty
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)   Infos  du profil derrière l'avatar (comme CssActif) EmptyVen 07 Sep 2012, 03:55
Revenir en haut Aller en bas
pamina
pamina
{ Membre actif }
{ Membre actif }

Féminin Messages : 1170



Infos  du profil derrière l'avatar (comme CssActif) Empty
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)   Infos  du profil derrière l'avatar (comme CssActif) EmptyVen 07 Sep 2012, 06:34
Revenir en haut Aller en bas
http://eclipse-forum.guildealliance.com
midnight477
{ Membre }
{ Membre }

Masculin Messages : 10



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

Féminin Messages : 86



Infos  du profil derrière l'avatar (comme CssActif) Empty
Merci =)
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Infos  du profil derrière l'avatar (comme CssActif) EmptyJeu 01 Nov 2012, 21:57
Revenir en haut Aller en bas
http://rockart.forumsactifs.com/forum
sunn-shiinex
sunn-shiinex
{ Membre }
{ Membre }

Féminin Messages : 86



Infos  du profil derrière l'avatar (comme CssActif) Empty
J'ai un petit souci, sur google chrome le code marche a merveille mais sur IE, ca fait ceci : https://2img.net/r/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)   Infos  du profil derrière l'avatar (comme CssActif) EmptyJeu 01 Nov 2012, 23:01
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Infos  du profil derrière l'avatar (comme CssActif) Empty
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)   Infos  du profil derrière l'avatar (comme CssActif) EmptyVen 02 Nov 2012, 05:57
Revenir en haut Aller en bas
Smoke shroom
Smoke shroom
{ Membre }
{ Membre }

Masculin Messages : 55



Infos  du profil derrière l'avatar (comme CssActif) Empty
Salutation, joli tutoriel, merci.
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Infos  du profil derrière l'avatar (comme CssActif) EmptyVen 02 Nov 2012, 06:03
Revenir en haut Aller en bas
La Poulette Masquée
La Poulette Masquée
{ Membre }
{ Membre }

Féminin Messages : 42



Infos  du profil derrière l'avatar (comme CssActif) Empty
Super boulot, j'ai tout de suite compris.
Le CSS est très bien commenté, idéal pour les débutants =D
Merci!
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Infos  du profil derrière l'avatar (comme CssActif) EmptyMar 01 Jan 2013, 11:39
Revenir en haut Aller en bas
http://tokyo-nights.forumactif.org/
aknot
aknot
{ Membre }
{ Membre }

Féminin Messages : 32



Infos  du profil derrière l'avatar (comme CssActif) Empty
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)   Infos  du profil derrière l'avatar (comme CssActif) EmptyMer 30 Jan 2013, 18:14
Revenir en haut Aller en bas
Delena*
Delena*
{ Membre }
{ Membre }

Féminin Messages : 9



Infos  du profil derrière l'avatar (comme CssActif) Empty
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
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Infos  du profil derrière l'avatar (comme CssActif) EmptySam 20 Avr 2013, 12:30
Revenir en haut Aller en bas
Farewell
Farewell
{ Membre }
{ Membre }

Féminin Messages : 44



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

Féminin Messages : 10



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

Féminin Messages : 11



Infos  du profil derrière l'avatar (comme CssActif) Empty
Merci!
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Infos  du profil derrière l'avatar (comme CssActif) EmptyLun 17 Juin 2013, 06:14
Revenir en haut Aller en bas
Tussanus Postea
Tussanus Postea
{ Membre }
{ Membre }

Masculin Messages : 2



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

Masculin Messages : 11



Infos  du profil derrière l'avatar (comme CssActif) Empty
Merci beaucoup !
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Infos  du profil derrière l'avatar (comme CssActif) EmptyDim 20 Oct 2013, 14:43
Revenir en haut Aller en bas
http://legend-of-hogwarts.forumactif.org
BloodyMoony
{ Membre }
{ Membre }

Féminin Messages : 12



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

Féminin Messages : 12



Infos  du profil derrière l'avatar (comme CssActif) Empty
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)   Infos  du profil derrière l'avatar (comme CssActif) EmptyVen 06 Juin 2014, 20:53
Revenir en haut Aller en bas
http://2bspotted.forumactif.org/
hollfeather
hollfeather
{ Membre }
{ Membre }

Féminin Messages : 15



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

Féminin Messages : 13



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




Infos  du profil derrière l'avatar (comme CssActif) Empty
MessageSujet: Re: Infos du profil derrière l'avatar (comme CssActif)   Infos  du profil derrière l'avatar (comme CssActif) Empty
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

-
» Question sur les infos du profil derrière l'avatar RESOLU
» [Résolue] Infos du profil derrière l'avatar (probleme)
» Problème infos de profil derrière l'avatar (suite au tutoriel d'Hiro)
» Problème avec codes pour l'effet: infos du profil derrière l'avatar.
» merci infos derrière l'avatar

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