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.

-50%
Le deal à ne pas rater :
-50% sur les sacs à dos pour ordinateur portable Urban Factory ...
19.99 € 39.99 €
Voir le deal

    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
    Azaral
    Azaral
    FémininAge : 27Messages : 69

    Mar 25 Fév 2014 - 13:31

    C'est peut être ce que je cherche o_O
    Merci dans tout les cas ! ^^
    Narialys
    Narialys
    FémininAge : 28Messages : 29

    Dim 2 Mar 2014 - 23:14

    Thank you !



    Dévoiler la feuille de personnage cachée, avec un effet déroulant. - Page 12 B79556058132607996b3de7317d36
    Anonymous
    Invité

    Lun 3 Mar 2014 - 10:28

    Merci du partage Wink
    pixelman
    pixelman
    FémininAge : 43Messages : 241

    Lun 3 Mar 2014 - 18:36

    Merci beaucoup pour le partage




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    Féréole
    Féréole
    FémininAge : 36Messages : 55

    Ven 7 Mar 2014 - 10:10

    merci beaucoup!
    Alinoé
    Alinoé
    FémininAge : 32Messages : 35

    Sam 8 Mar 2014 - 15:19

    Merci pour le partage ! Very Happy
    QueenDancing13
    QueenDancing13
    FémininAge : 27Messages : 106

    Dim 9 Mar 2014 - 0:34

    Merci ^^



    Dévoiler la feuille de personnage cachée, avec un effet déroulant. - Page 12 Christina_Aguilera_Signature_by_Sitic
    Féhéla
    Féhéla
    FémininAge : 50Messages : 238

    Lun 17 Mar 2014 - 22:17

    excellent merci :)
    Yesterday
    Yesterday
    FémininAge : 28Messages : 57

    Lun 24 Mar 2014 - 15:59

    Merci! :)
    Naemerys
    Naemerys
    FémininAge : 27Messages : 13

    Dim 30 Mar 2014 - 18:19

    Merci :)
    Amaliiah
    Amaliiah
    FémininAge : 25Messages : 50

    Sam 5 Avr 2014 - 15:05

    Merci Very Happy
    l'intruse
    l'intruse
    FémininAge : 29Messages : 46

    Mar 29 Avr 2014 - 22:44

    Merciiii Very Happy
    Zorume
    Zorume
    FémininAge : 27Messages : 84

    Ven 2 Mai 2014 - 17:32

    AH j'aime cet effet aussi =D Il me semble qu'un forum où j'étais utilisait un effet de ce style ^.^) Pratique pour éviter les profils de trente pages de long !
    Neycha
    Neycha
    FémininAge : 30Messages : 58

    Mar 6 Mai 2014 - 1:36

    Pile ce que je cherchais Very Happy Merci beaucoup !!!
    Allison01
    Allison01
    FémininAge : 39Messages : 225

    Mer 28 Mai 2014 - 22:03

    merci
    MaryChou
    MaryChou
    FémininAge : 27Messages : 16

    Sam 31 Mai 2014 - 13:37

    merci du partage ! (:
    Lilise
    Lilise
    FémininAge : 25Messages : 22

    Mar 3 Juin 2014 - 21:40

    Cet effet est superbe ! Merci
    avatar
    TATACARO13
    FémininAge : 49Messages : 80

    Jeu 5 Juin 2014 - 23:43

    merci



    Dévoiler la feuille de personnage cachée, avec un effet déroulant. - Page 12 967953logodusite

    Dévoiler la feuille de personnage cachée, avec un effet déroulant. - Page 12 381658signatureBAU
    Natsumi13
    Natsumi13
    FémininAge : 28Messages : 64

    Sam 7 Juin 2014 - 18:43

    merchi
    Insane paper-plane
    Insane paper-plane
    FémininAge : 27Messages : 140

    Sam 28 Juin 2014 - 23:19

    thanks !
    Leelo
    Leelo
    FémininAge : 32Messages : 157

    Mer 2 Juil 2014 - 14:34

    c'est pas mal.
    ☮ mistletoe
    ☮ mistletoe
    FémininAge : 25Messages : 28

    Mer 9 Juil 2014 - 5:00

    merci
    Chaussette
    Chaussette
    FémininAge : 31Messages : 59

    Dim 13 Juil 2014 - 21:38

    Très beau codage !! Merci beaucoup ! =D
    Azzuen
    Azzuen
    FémininAge : 25Messages : 61

    Mar 15 Juil 2014 - 2:23

    Merci!
    Fyraliel
    Fyraliel
    FémininAge : 33Messages : 1424

    Dim 20 Juil 2014 - 17:21

    Merci



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


      La date/heure actuelle est Ven 29 Mar 2024 - 0:27