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 :
Ensuite, remplacez-la par ce code :
Maintenant, enregistrez votre template et publiez-la.
Rendez-vous ensuite dans Affichage -> Couleurs -> Onglet "Feuille de style CSS" et placez-y ce code :
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 :
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")
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.
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}
Ensuite, remplacez-la par ce code :
- Code:
<div class="montrerfeuilleperso"><img src="URL DE VOTRE IMAGE">{postrow.displayed.POSTER_RPG}</div>
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;
}
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;
- Code:
height: 310px;
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>
- 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 */
}
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.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
Si vous avez des problèmes avec ce LS, venez poster ici.
Dernière édition par Sycophante le Lun 9 Fév 2015 - 22:17, édité 9 fois
C'est plaisant de voir que ça aide ^^
