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

Rappel du premier message :

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.

Oh oui je veux bien, merci beaucoup de te donner tant de mal !
Effectivement, vu qu'il est en construction il est... très blanc ! :)
Et bien envois moi un MP que je te passe administrateur le temps que tu règle mon problème ! :) (Merciiii)

Problème résolu Bonne continuation à toi ♥

(Ne pas oublier de rendre les champs de votre feuille de personnage visibles sur vos forums en cochant la case adéquate )

Merci du partage =)

Hanw, merci de nous partager ton grand savoir :3

lol De rien, c'est vraiment pas compliqué =P

Pile poil ce que je cherchais e.e Merci du partage =D

Merci pour ce tuto ♥

Merci beaucoup =)

Merci :3

merci

Merci pour ce tuto, il est génial.

Merci bien :)

Merci :3

Merci !

Merci du partage :)

Super merci !

Merci ! ^_^ Je recherchais ce code haha !

Merci pour ce partage. ^^

No problemo

interessant !

Merci :)

Cela promet de se révéler intéressant <3

J'avais une simple question, peut-on également mettre les infos sur le membre comme le nombre de messages à l'intérieur du déroulant?

Merci

Aurore13 : Oui, c'est possible =) Il suffit de rajouter les variables correspondantes avec celle de la feuille

Code:

{postrow.displayed.POSTER_RPG}

Et d'adapter le CSS évidement car il aura plus de choses à découvrir donc il devra être plus long et ça se contrôle avec la valeur "height" x)

Post