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
» Compte à Rebours
Mar 19 Fév 2019, 11:51 par TiGraou

» [RPG] Fiche personnage avec bannière latérale
Mar 19 Fév 2019, 11:42 par TiGraou

» Mettre la ChatBox en spoiler
Dim 17 Fév 2019, 18:47 par Backflip

» Effet de volet glissant sur un bloc
Ven 15 Fév 2019, 10:43 par Kanala

» Barre(s) Hitskinienne
Lun 11 Fév 2019, 23:00 par wildheart.

» Fond de message
Ven 08 Fév 2019, 19:55 par Scratpub

» [PA] Message d'Accueil Simple
Ven 08 Fév 2019, 16:34 par Scratpub

» [Plugin] Effet rollover sur une image
Dim 03 Fév 2019, 07:48 par .lysaivin


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
Hiro
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/
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5577



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
sabritheducks_79
{ 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.forumsrpg.com/
Alÿnea
{ 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
Hyacinthe
{ 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
kun
{ 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
pamina
{ 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
sunn-shiinex
{ 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
sunn-shiinex
{ 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
Espeon
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
Smoke shroom
{ 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
La Poulette Masquée
{ 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/
aknot
{ 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
Delena*
{ 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
Farewell
{ 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
MindSpace.
{ 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
Eden Memories
{ 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
Tussanus Postea
{ 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/
Blaiseodrôme
{ 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
Shanyme Thibolt
{ 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/
hollfeather
{ 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/
Catalane
{ 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

-
» 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
» Avatar décalé à l'affichage du profil [résolu]
» "L'URL de l'avatar est invalide" à la modification de l'avatar du profil

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