Dévoiler la feuille de personnage cachée, avec un effet déroulant.

Bonjour, bonsoir !

Alors je m'essaye à mon premier tuto ! Je vais vous proposer quelque chose qui, il me semble, n'a pas encore été soumis, à savoir cacher votre feuille de personnage pour ensuite la dévoiler avec un effet de déroulement fluide au passage de la souris sur une image.

Cette astuce peut bien sûr être utilisée pour cacher également tout le profil sous l'avatar et bien d'autres choses ! Mais comme on trouve assez souvent des feuilles de personnage cachées grâce à un bouton et qui s'affiche d'un coup en cliquant dessus, j'ai voulu quelque chose de plus progressif.

Exemple (l'image est animée, elle peut mettre un peu de temps à charger) : https://2img.net/r/ihimizer/img30/7453/5v8.gif


Tout d'abord il faut que vous ayez un compte fondateur sur votre forum forumactif et accès aux templates.

Rendez-vous ici : Panneau d'admin -> Affichage -> Templates -> Général -> viewtopic_body

Chercher la variable :

Code:

{postrow.displayed.POSTER_RPG}

Elle correspond à votre feuille de personnage dans les messages.

Ensuite, remplacez-la par ce code :

Code:

<div class="montrerfeuilleperso"><img src="URL DE VOTRE IMAGE">{postrow.displayed.POSTER_RPG}</div>

N'oubliez pas de mettre l'adresse de votre image là où c'est indiqué dans le code. Pour que la suite du code fonctionne sans couper l'image, préférez une hauteur de 50px.

Maintenant, enregistrez votre template et publiez-la.

Rendez-vous ensuite dans Affichage -> Couleurs -> Onglet "Feuille de style CSS" et placez-y ce code :

Code:

.montrerfeuilleperso
{ height: 55px;
  text-align: center;
  overflow: hidden;
  transition: 2s;
}
.montrerfeuilleperso:hover
{ height: 310px;
  transition: 1s;
}

Et validez. Allez vérifier dans un message si l'effet escompté se produit bien. Passez votre souris sur l'image que vous avez choisie et normalement votre feuille de personnage (si active) doit s'afficher progressivement avec un effet de déroulement vers le bas sous l'image.

N.B. : Vous pouvez ajuster tout ça via le CSS, à savoir si vous voulez une image plus haute que 50px ou moins grande, il suffit de changer ceci dans le CSS :

Code:

height: 55px;

Pour réduire ou agrandir la zone qui se découvre au passage de la souris (si votre feuille de perso est coupée ou que le déroulement va beaucoup trop loin), c'est cette ligne qu'il faut changer :

Code:

height: 310px;

Et puis, pour changer le temps que met le déroulement à s'effectuer, jouez avec les valeurs des transitions, dans mon exemple il s'agit des 2s et 1s mais vous pouvez mettre plus ou moins comme 4s (ce qui rend le déroulement plus long), par exemple.

Enfin, vous pouvez encadrer votre feuille de personnage, simplement en retournant dans votre template et en y ajouter une classe que vous personnaliserez via le CSS. Placez votre classe là où c'est indiqué dans le code suivant et nommez-la (exemple: "contourfeuille")

Code:

<div class="montrerfeuilleperso"><img src="URL DE VOTRE IMAGE"><div class="NOM DE LA CLASSE POUR ENCADRER VOTRE FEUILLE">{postrow.displayed.POSTER_RPG}</div></div>

Puis dans votre CSS, mettez par exemple :

Code:

.NOM DE LA CLASSE
{border: 2px solid #000000; /* taille, style et couleur de la bordure du cadre */
  background-color: #000010; /* Couleur du fond du cadre */
  border-radius: 10px; /* Pour arrondir les angles */
}

Et c'est terminé !

Voilà, j'espère que cette astuce vous sera utile et vous plaira, si vous avez des questions ou des problèmes avec le code, n'hésitez pas !  
N'oubliez pas de créditer Never-Utopia si vous utilisez ce codage, merci.

Salut !

Merci pour le partage de ce tutoriel . C'est dommage que tu n'aies pas mis d'image-exemple, les gens aiment bien visualiser ce que ça donne concrètement... J'ai moi-même du lire le code car je n'avais pas saisi quelle était l'image, si tu utilisais l'avatar pour masquer le profil ou si c'était autre chose.
C'est une bonne idée en tout cas et c'est gentil de ta part de le mettre à disposition, je t'en remercie x).

Je vais rajouter un lien d'ici ce soir pour qu'on puisse mieux visualiser, j'ai fais des petites manip sur mon forum test qui ont rendu ce code assez instable xD Donc, une fois que j'aurais corrigé cela, je pourrai proposer un exemple concret. =)

Parfait, je te remercie x).

Comme promis, j'ai édité le tuto pour y mettre un lien afin de mieux visualiser le résultat.

C'est nickel ! Je pense que les gens visualiseront mieux ainsi, c'est plus attrayant également. Merci beaucoup

Ce n'est pas grand chose ^^ Après tout, si j'ai réussi à faire ça, c'est en partie grâce à ce que j'ai appris ici via les tutos des membres donc si je peux rendre un peu l'appareil, hein =)

N'empêche que peu de personnes prennent la peine de le faire, donc les remerciements sont largement mérités, ça fait plaisir x)

merci

trop cool *-* je cherchais ce code depuis des jouuuuurs!

Edit : c'est normal que ça ne marche pas du tout chez moi ? ^^' J'ai tout fait comme tu avais dit, et mon image (même si elle fait 50px de hauteur) est toute grande ? et on ne voit pas les infos de la feuille de personnage ^^''

Ah, ça me l'a fait aussi une fois pour l'image qui grossie, j'avais limité les images du profil à 200px de largeur et ça avait donc élargie l'image pour la feuille. Pour régler ça, j'ai tout simplement édité ma template, là où tu places ton image et j'ai ajusté la largeur, comme ceci :

Code:

<img src="URL DE VOTRE IMAGE" style="width: largeur de l'image en pixel;">

Le pb était réglé. Pour t'aider pour le reste, j'ai besoin de plus d'infos, car je ne vois pas quel peut être le soucis =/ Normalement, en suivant bien les étapes du tuto, il n'y a aucun pb, je l'ai reproduis moi-même sur un forum tout neuf, qui est d'ailleurs en exemple =)

Merci beaucoup ! Je cherchais cet effet depuis quand même pas mal de temps

Merci du partage, cela risque de m'être utile ^^

Merci beaucoup (:

Sa va .. Peut être me servir si un jour je comprends les feuilles de personnages xD Merci du partage !

Formidableeeeee ** Merci d'avoir partagé ce code **

A vot' service. :)

merci

Merci beaucoup ! J'adore l'effet progressif comme celui là

j'adore je vais surement l'utiliser sur mon forum

Han, c'est super Ö, merci c:

merchiiiiiiiiiiiiiiiiiiiiiiiiiiii

Super ! arigato ♥

Merci

merci ^^