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 :
Xiaomi Mi Smart Camera 2K Standard Edition (design ...
Voir le deal
11.39 €

    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
    Nocturne
    Nocturne
    FémininAge : 33Messages : 24

    Jeu 10 Oct 2013 - 17:06

    Merci bien =)
    Sorako
    Sorako
    FémininAge : 26Messages : 94

    Ven 11 Oct 2013 - 21:14

    Merci :)
    Hybris
    Hybris
    MasculinAge : 36Messages : 308

    Mer 16 Oct 2013 - 21:30

    merci
    Lunara
    Lunara
    FémininAge : 37Messages : 95

    Jeu 17 Oct 2013 - 21:58

    merci du partage!
    Fox.andBlue
    Fox.andBlue
    FémininAge : 30Messages : 105

    Lun 21 Oct 2013 - 4:32

    Merci pour le tutoriel ^^



    Dévoiler la feuille de personnage cachée, avec un effet déroulant. - Page 11 681640signafoxandblue
    Mezou
    Mezou
    FémininAge : 24Messages : 56

    Lun 21 Oct 2013 - 20:51

    Merci pour ce tutoriel (:
    Kassou
    Kassou
    FémininAge : 24Messages : 43

    Sam 26 Oct 2013 - 13:21

    Merci :3
    Amelys_Destroy
    Amelys_Destroy
    MasculinAge : 30Messages : 37

    Mer 30 Oct 2013 - 22:56

    Merci pour le tuto o/
    tchapalow
    tchapalow
    FémininAge : 34Messages : 33

    Jeu 31 Oct 2013 - 11:57

    Merci pour le partage!
    Nathouille
    Nathouille
    FémininAge : 32Messages : 70

    Ven 1 Nov 2013 - 12:44

    Merci ^^

    (Même si j'aurais voulu un exemple avant de tenter...)
    Neva
    Neva
    FémininAge : 32Messages : 18565

    Ven 1 Nov 2013 - 16:14

    Nathouille a écrit:Merci ^^

    (Même si j'aurais voulu un exemple avant de tenter...)
    Salut,

    C'est rajouté :)



     
    Anonymous
    Invité

    Ven 1 Nov 2013 - 18:46

    Oh merci, Neva ! :o

    Je comptais faire un site exprès pour mes exemples de codage mais je n'ai pas eu le temps alors j'ai un peu laissé de côté ce détail. C'est très gentil à toi d'en avoir rajouté un. :)
    Kellen
    Kellen
    FémininAge : 31Messages : 13

    Sam 2 Nov 2013 - 16:27

    merci
    Siloë
    Siloë
    FémininAge : 35Messages : 59

    Mar 12 Nov 2013 - 12:52

    Merci pour le partage !
    NathanaelSane
    NathanaelSane
    FémininAge : 30Messages : 73

    Sam 16 Nov 2013 - 15:15

    Merci !
    Kathee
    Kathee
    FémininAge : 30Messages : 680

    Sam 16 Nov 2013 - 21:35

    Merciiiiii
    =3





    Forum dérivé ouat
    dans un univers steampunk :heart:
    Shannon{sweetie}
    Shannon{sweetie}
    FémininAge : 28Messages : 24

    Ven 6 Déc 2013 - 14:46

    Merci beaucoup *^*
    BloodyMoony
    BloodyMoony
    FémininAge : 31Messages : 76

    Sam 14 Déc 2013 - 22:10

    Très sympa Wink
    Titia
    Titia
    FémininAge : 32Messages : 63

    Dim 12 Jan 2014 - 11:47

    Merci pour le partage



    Dévoiler la feuille de personnage cachée, avec un effet déroulant. - Page 11 Pica1ctmp
    Akasha
    Akasha
    FémininAge : 33Messages : 9

    Mar 14 Jan 2014 - 15:34

    Merci beaucoup pour le tuto il est juste parfait ! <3
    Capt'ain Hook
    Capt'ain Hook
    FémininAge : 31Messages : 30

    Mar 14 Jan 2014 - 16:33

    Super !!! Ça fait trop plombe que je cherche ce code ! Merci beaucoup du partage
    Babiroussa
    Babiroussa
    MasculinAge : 34Messages : 33

    Mer 15 Jan 2014 - 16:47

    Thanks :)
    Doupi
    Doupi
    FémininAge : 35Messages : 63

    Ven 24 Jan 2014 - 22:30

    Astuce sympa, je vais l'utiliser pour mes signatures. Merci
    ketchup
    ketchup
    FémininAge : 26Messages : 11

    Jeu 30 Jan 2014 - 21:55

    merci du partage :heart:
    Percylove
    Percylove
    FémininAge : 28Messages : 259

    Lun 24 Fév 2014 - 0:13

    Oh merci du partage, c'est très pratique!



    Dévoiler la feuille de personnage cachée, avec un effet déroulant. - Page 11 9a6v
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 22:18