AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


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

    Anonymous
    Invité

    le Ven 23 Nov 2012 - 16:50

    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 !  :friends:
    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
    Neya
    Neya
    FémininAge : 21Messages : 164

    le Dim 31 Jan 2016 - 12:02

    Merci
    abitbol
    abitbol
    FémininAge : 32Messages : 15

    le Lun 1 Fév 2016 - 22:35

    merci !! :cow:
    Magico
    Magico
    MasculinAge : 28Messages : 41

    le Mer 3 Fév 2016 - 16:15

    Merci beaucoup
    Patdrue
    Patdrue
    FémininAge : 31Messages : 157

    le Sam 13 Fév 2016 - 23:50

    Un merci pour voir, le lien d'exemple étant mort TT
    megb59
    megb59
    FémininAge : 26Messages : 111

    le Mer 17 Fév 2016 - 15:54

    Come je suis une curieuse j'aimerai bien voir le code pour voir ce que ça donne! Merci à toi d'avoir pris le tmps de le faire :)
    miss69
    miss69
    FémininAge : 37Messages : 40

    le Dim 6 Mar 2016 - 2:49

    L'image n'est plus visible mais le tuto m'interesse :p

    Merciiii
    Zelena
    Zelena
    FémininAge : 33Messages : 59

    le Dim 13 Mar 2016 - 15:18

    Merci!
    Raela
    Raela
    FémininAge : 25Messages : 45

    le Dim 13 Mar 2016 - 18:34

    Merci beaucoup pour le partage ! :hug:
    Kitket
    Kitket
    FémininAge : 37Messages : 106

    le Sam 19 Mar 2016 - 9:33

    MErci
    Ykhar
    Ykhar
    FémininAge : 24Messages : 23

    le Mer 6 Avr 2016 - 0:34

    Merci ♥
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 52Messages : 167

    le Dim 10 Avr 2016 - 10:41

    Merci
    Madness of Wonderland
    Madness of Wonderland
    FémininAge : 21Messages : 59

    le Dim 10 Avr 2016 - 13:56

    merci
    Manwin
    Manwin
    MasculinAge : 22Messages : 25

    le Ven 29 Avr 2016 - 15:44

    Merci beaucoup !
    Hopefox
    Hopefox
    FémininAge : 23Messages : 36

    le Ven 29 Avr 2016 - 16:49

    merci bien pour le partage ! Juste, l'image montrant l'exemple ne marche pas/ plus ^^'
    Iyokan
    Iyokan
    FémininAge : 21Messages : 15

    le Ven 29 Avr 2016 - 18:55

    Merci!^^
    Rebekaah
    Rebekaah
    FémininAge : 26Messages : 51

    le Ven 29 Avr 2016 - 19:16

    Merchiii
    Heartfilia
    Heartfilia
    FémininAge : 20Messages : 98

    le Sam 7 Mai 2016 - 17:16

    merci



    YOU HELLA SAVED MY LIFE
    - chloe price
    Nyroc
    Nyroc
    MasculinAge : 18Messages : 58

    le Dim 22 Mai 2016 - 10:21

    merci ^^



    Dévoiler la feuille de personnage cachée, avec un effet déroulant. - Page 15 1-3_mi10
    Tria
    Tria
    FémininAge : 23Messages : 127

    le Jeu 2 Juin 2016 - 17:51

    Merci !



    "Tomber est permis, se relever est ordonné."
    Dévoiler la feuille de personnage cachée, avec un effet déroulant. - Page 15 Hv62
    Isalia
    Isalia
    FémininAge : 21Messages : 125

    le Mer 15 Juin 2016 - 13:22

    Merci ♥
    witm
    witm
    FémininAge : 26Messages : 51

    le Mer 15 Juin 2016 - 22:52

    merci :)
    Précyounette
    Précyounette
    FémininAge : 22Messages : 39

    le Dim 19 Juin 2016 - 3:06

    Thanks
    Pelezinho
    Pelezinho
    MasculinAge : 21Messages : 91

    le Mer 22 Juin 2016 - 2:41

    merciiii !!



    [MERCI D'INTRODUIRE SIGNATURE ORIGINALE ICI]
    Anonymous
    Invité

    le Mer 13 Juil 2016 - 21:44

    Merci pour ce code c:
    Anonymous
    Invité

    le Mer 13 Juil 2016 - 21:44

    Merci pour ce code c:
    Contenu sponsorisé


      La date/heure actuelle est Sam 16 Jan 2021 - 15:08