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.


    Signature à onglet avec transition

    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 1 Sep 2015 - 1:34

    Rappel du premier message :

    Bonjour :)

    Voici le libre service d'une signature à onglet pour la demande d'AustinWolf.

    Aperçu


    Onglet simple
    Signature à onglet avec transition - Page 3 DSkj7ea

    Les autres onglets:

    • On utilise une page HTML, il vous faudra donc un forum pour héberger la page HTML ou bien demander à quelqu'un de l'héberger pour vous.

    • Les images se redimensionnent automatiquement :)
    Pour l'onglet "simple", je vous conseille des images de maximum 450px * 200px.
    Pour l'onglet "fiche d'identité", le mieux est 150px * 75px.

    • Il y a une petite transition entre chaque changement onglet (opacité et léger déplacement).

    • Le changement d'onglet se fait au click sur un onglet, mais vous pouvez la mettre survol.

    Merci de laisser le crédit vers Never Utopia (le petit coeur avec l'infobulle en bas à droite). Vous pouvez bien évidemment changer la couleur ou le symbole, mais attention à ce qu'il reste visible Wink


    Page HTML


    On commence par créer une page HTML. Je vous invite à regarder le tutoriel Créer une page HTML par NyoTheNeko si vous ne savez pas comment faire.

    Panneau D'administration > Modules > Html & Javascript > Gestion des pages HTML

    Voici le HTML à mettre à l'intérieur :


    Installation


    Nous utiliser une iframe pour afficher notre code dans la signature. Une fois encore, n'hésitez pas à lire le tutoriel pour Créer une page HTML par NyoTheNeko (il y a une explication tout à la fin).

    On récupère l'adresse de notre page HTML et on va éditer la signature. Dedans, on met ce code là :
    Code:
    <iframe src="URL_DE_LA_PAGE" width="520px" height="320px" style="display: block; margin: auto;" frameBorder="0"></iframe>

    Vous devez remplacer "URL_DE_LA_PAGE" par l'adresse de votre propre page HTML.
    Si des barres de scroll apparaissent, essayez d'augmenter les valeurs pour la largeur (width) et pour la hauteur (height).

    Personnalisations


    Pour le premier onglet, l'image se change ici :
    Code:
    <img src="http://placehold.it/400x200" alt="Une petite signature"/>

    Il suffit de remplacer http://placehold.it/400x200 par le lien de votre image.

    Pour la fiche d'identité, l'image se change ici :
    Code:
    <div class="fiche-image" style="background-image: url('http://i.imgur.com/qkrNnPO.png')"></div>
    En remplaçant https://i.imgur.com/qkrNnPO.png par le lien de votre image :)

    Les onglets se changent au click. Si on veut les changer au survol, on remplace cette ligne là :
    Code:
    $onglets.on("click", function (e) {

    Par ceci :
    Code:
    $onglets.on("mouseenter", function (e) {

    En cas de problème, merci d'aller dans la section "Problème avec mon code", ou "Personnalisation" :)


    Dernière édition par Nihil Scar Winspeare le Ven 4 Mar 2016 - 20:11, édité 4 fois

    Phoenie
    Phoenie
    FémininAge : 35Messages : 2

    Dim 3 Sep 2017 - 9:42

    Un grand merci à toi!
    Ningarou
    Ningarou
    MasculinAge : 24Messages : 8

    Sam 9 Sep 2017 - 10:03

    merci
    Saia
    Saia
    FémininAge : 29Messages : 195

    Dim 10 Sep 2017 - 13:56

    Merci pour se tutoriel :)



    Signature à onglet avec transition - Page 3 Finit10
    Laura.W
    Laura.W
    FémininAge : 28Messages : 45

    Dim 17 Sep 2017 - 14:35

    Merciiiiiiii c'est super beau !
    Kreazen
    Kreazen
    FémininAge : 27Messages : 46

    Jeu 28 Sep 2017 - 23:48

    merci



    Arrow
    Aetherya
    Aetherya
    FémininAge : 38Messages : 24

    Jeu 5 Oct 2017 - 8:45

    C'est exactement ce que je recherchais depuis un bon moment déjà, merci beaucoup pour ce partage !

    Je t'offre un cookie en remerciement ! Very Happy
    beza
    beza
    FémininAge : 28Messages : 47

    Dim 29 Oct 2017 - 15:07

    Merci <3
    QuickLittleBastard
    QuickLittleBastard
    MasculinAge : 30Messages : 10

    Sam 4 Nov 2017 - 21:48

    Merci! ♥
    SokoMinami
    SokoMinami
    FémininAge : 33Messages : 16

    Mer 15 Nov 2017 - 12:03

    J'adore, merci du partage :)
    SonVick
    SonVick
    MasculinAge : 28Messages : 12

    Jeu 7 Déc 2017 - 20:53

    Merci!
    A.A
    A.A
    FémininAge : 30Messages : 9

    Mer 27 Déc 2017 - 23:01

    J'adore!
    Odahviing
    Odahviing
    FémininAge : 27Messages : 24

    Jeu 28 Déc 2017 - 12:28

    merci *^*
    LadyErria
    LadyErria
    FémininAge : 40Messages : 2

    Sam 20 Jan 2018 - 21:18

    merci



    Signature à onglet avec transition - Page 3 995579lukasignkit
    Yukiru
    Yukiru
    FémininAge : 20Messages : 27

    Mer 7 Mar 2018 - 16:05

    Merci!
    Delnuyn
    Delnuyn
    FémininAge : 23Messages : 22

    Sam 10 Mar 2018 - 16:58

    Merci beaucoup ! :)
    TimeToSmile
    TimeToSmile
    FémininAge : 26Messages : 49

    Lun 19 Mar 2018 - 14:35

    Merci !
    Shakumiro
    Shakumiro
    MasculinAge : 26Messages : 8

    Jeu 5 Avr 2018 - 14:45

    merci
    Illiana
    Illiana
    FémininAge : 28Messages : 98

    Sam 12 Mai 2018 - 12:12

    Merci =)



    Signature à onglet avec transition - Page 3 2z7g2dv
    InfiniKey
    InfiniKey
    FémininAge : 37Messages : 58

    Mer 6 Juin 2018 - 20:34

    Merci ♥
    Coldness
    Coldness
    FémininAge : 20Messages : 54

    Mar 4 Sep 2018 - 21:43

    Merci !
    Fairytale
    Fairytale
    FémininAge : 26Messages : 22

    Lun 17 Sep 2018 - 3:29

    Merci beaucoup pour le libre service ♥
    Arzhaelig
    Arzhaelig
    MasculinAge : 29Messages : 28

    Dim 18 Nov 2018 - 15:42

    Merci
    Fanel
    Fanel
    FémininAge : 34Messages : 23

    Ven 11 Jan 2019 - 17:44

    Merci.
    Zéphyr Moreas
    Zéphyr Moreas
    MasculinAge : 25Messages : 6

    Ven 25 Jan 2019 - 21:34

    Merci beaucoup !
    Sadja
    Sadja
    MasculinAge : 26Messages : 79

    Mar 29 Jan 2019 - 10:42

    MErci beaucoup **
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 6:49