AccueilDernières imagesRechercherS'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.

Le Deal du moment : -50%
-50% Baskets Nike Air Huarache
Voir le deal
64.99 €

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

    Anonymous
    Invité

    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
    Koyangi
    Koyangi
    FémininAge : 26Messages : 15

    Lun 21 Juil 2014 - 23:50

    Merci beaucoup, c'est ce que j'avais besoin ! Very Happy
    Mephitis.
    Mephitis.
    FémininAge : 26Messages : 46

    Mar 22 Juil 2014 - 16:19

    Merci je vais m'en servir. 8D
    Mitsu'ki
    Mitsu'ki
    FémininAge : 34Messages : 31

    Ven 25 Juil 2014 - 22:55

    merciiii



    Dévoiler la feuille de personnage cachée, avec un effet déroulant. - Page 13 1o27SvUHjU
    Fayzl4D
    Fayzl4D
    MasculinAge : 27Messages : 84

    Jeu 31 Juil 2014 - 8:01

    merci
    crushed love
    crushed love
    FémininAge : 32Messages : 27

    Dim 10 Aoû 2014 - 13:55

    merci (:
    Mello
    Mello
    FémininAge : 26Messages : 52

    Sam 23 Aoû 2014 - 3:18

    Mercii
    CN.June
    CN.June
    FémininAge : 24Messages : 315

    Lun 25 Aoû 2014 - 0:44

    Merciii **
    missphan
    missphan
    FémininAge : 41Messages : 156

    Ven 29 Aoû 2014 - 20:07

    merci
    Mr Yo
    Mr Yo
    MasculinAge : 49Messages : 37

    Dim 31 Aoû 2014 - 20:08

    Trop bien cheers
    Ca va servir Very Happy
    Likilou
    Likilou
    MasculinAge : 30Messages : 307

    Lun 1 Sep 2014 - 13:29

    merci



    Dévoiler la feuille de personnage cachée, avec un effet déroulant. - Page 13 707828SignArthur2
    Shaolan
    Shaolan
    MasculinAge : 32Messages : 121

    Sam 4 Oct 2014 - 14:29

    Merci !
    Sachikou
    Sachikou
    FémininAge : 24Messages : 48

    Mar 28 Oct 2014 - 10:31

    Justement ce que j'avais besoin... Merci !



    Dévoiler la feuille de personnage cachée, avec un effet déroulant. - Page 13 Signa111
    Chocolakato
    Chocolakato
    FémininAge : 33Messages : 837

    Mer 29 Oct 2014 - 12:27

    Hey, merci!



    Kimouko
    Kimouko
    FémininAge : 28Messages : 19

    Jeu 30 Oct 2014 - 21:24

    Merci du partage, ça me sera très utile! ^-^
    Castielle
    Castielle
    FémininAge : 28Messages : 33

    Mer 5 Nov 2014 - 3:30

    Merci beaucoup :friends:
    Crépuscule de Lune
    Crépuscule de Lune
    FémininAge : 35Messages : 95

    Jeu 6 Nov 2014 - 17:33

    Merci du partage ^^




    louha
    louha
    FémininAge : 36Messages : 219

    Jeu 6 Nov 2014 - 22:19

    merci <3
    sica3
    sica3
    MasculinAge : 50Messages : 135

    Mar 2 Déc 2014 - 6:54

    thank's
    Avallon
    Avallon
    FémininAge : 31Messages : 48

    Jeu 4 Déc 2014 - 17:37

    Merci :)
    Daydream
    Daydream
    FémininAge : 26Messages : 44

    Dim 7 Déc 2014 - 19:16

    Merci !
    KimmyKinder
    KimmyKinder
    FémininAge : 22Messages : 181

    Lun 8 Déc 2014 - 20:37

    Merciiii
    Callisto
    Callisto
    FémininAge : 27Messages : 45

    Sam 13 Déc 2014 - 17:46

    Merci pour ce tutoriel !
    Scare Leonheart
    Scare Leonheart
    MasculinAge : 30Messages : 202

    Lun 15 Déc 2014 - 0:45

    Merci



    Dévoiler la feuille de personnage cachée, avec un effet déroulant. - Page 13 Scare_10
    Abby Reever
    Abby Reever
    FémininAge : 32Messages : 146

    Mar 16 Déc 2014 - 22:54

    merci!
    Kaamee
    Kaamee
    FémininAge : 28Messages : 110

    Lun 29 Déc 2014 - 21:11

    Merci o/



    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 13:30