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.


    Signature à onglet avec transition

    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5113

    le 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 2 DSkj7ea

    Les autres onglets:

    Signature à onglet avec transition - Page 2 9xTFW3s
    Signature à onglet avec transition - Page 2 Zs7DLvK

    • 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



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Heathen Hammer
    Heathen Hammer
    MasculinAge : 31Messages : 43

    le Jeu 1 Déc 2016 - 13:40

    merci du partage
    Omys
    Omys
    FémininAge : 24Messages : 63

    le Dim 4 Déc 2016 - 16:19

    merci ! :3
    Ishiro
    Ishiro
    FémininAge : 25Messages : 87

    le Sam 10 Déc 2016 - 18:57

    Merci =)




    Signature à onglet avec transition - Page 2 09041711320918177
    Kiowa
    Kiowa
    FémininAge : 30Messages : 220

    le Mar 13 Déc 2016 - 22:20

    Merci
    Drakylla
    Drakylla
    MasculinAge : 28Messages : 32

    le Ven 13 Jan 2017 - 1:15

    Bonsoir et merci beaucoup du partage !
    Love_RPG
    Love_RPG
    FémininAge : 25Messages : 32

    le Mar 24 Jan 2017 - 16:43

    merci ♥
    LS
    LS
    FémininAge : 22Messages : 2

    le Sam 25 Fév 2017 - 4:11

    Merci !
    Mimbulus Mimbletonia
    Mimbulus Mimbletonia
    FémininAge : 28Messages : 14

    le Mar 18 Avr 2017 - 17:56

    Merci (*w*)/
    anouk
    anouk
    FémininAge : 28Messages : 21

    le Sam 22 Avr 2017 - 6:45

    Merci !
    Krysalism
    Krysalism
    FémininAge : 21Messages : 3

    le Dim 23 Avr 2017 - 8:57

    merci bien !
    Ikkaku
    Ikkaku
    MasculinAge : 19Messages : 56

    le Mer 26 Avr 2017 - 17:07

    Merci
    Yukimura Esuki
    Yukimura Esuki
    MasculinAge : 23Messages : 131

    le Dim 14 Mai 2017 - 12:01

    Merci pour ce tuto !
    Mymyy
    Mymyy
    FémininAge : 20Messages : 55

    le Sam 20 Mai 2017 - 13:20

    Merci
    avatar
    Alysanne
    FémininAge : 33Messages : 49

    le Dim 11 Juin 2017 - 1:43

    Merci!
    November
    November
    MasculinAge : 19Messages : 50

    le Dim 18 Juin 2017 - 18:22

    Merci beaucoup!
    Birds
    Birds
    FémininAge : 24Messages : 3

    le Jeu 13 Juil 2017 - 22:11

    Merci pour le partage :aww:
    Kingdom.
    Kingdom.
    FémininAge : 19Messages : 54

    le Dim 23 Juil 2017 - 1:56

    merchii!
    Neilia
    Neilia
    FémininAge : 28Messages : 101

    le Mar 1 Aoû 2017 - 20:30

    merci ! c est superbe !! ^^
    Tork
    Tork
    MasculinAge : 32Messages : 192

    le Ven 11 Aoû 2017 - 18:16

    Vraiment classe ! Merci^^
    PATAGON
    PATAGON
    FémininAge : 20Messages : 6

    le Lun 14 Aoû 2017 - 10:12

    merci!
    Louna Luna
    Louna Luna
    FémininAge : 24Messages : 147

    le Jeu 24 Aoû 2017 - 12:18

    Merci du partage !
    Nyls
    Nyls
    MasculinAge : 18Messages : 28

    le Dim 27 Aoû 2017 - 19:28

    merchiii
    Utauko
    Utauko
    FémininAge : 23Messages : 42

    le Jeu 31 Aoû 2017 - 14:31

    Merci Very Happy
    Chacal
    Chacal
    FémininAge : 22Messages : 16

    le Ven 1 Sep 2017 - 18:44

    Merci!
    Phoenie
    Phoenie
    FémininAge : 30Messages : 2

    le Dim 3 Sep 2017 - 9:42

    Un grand merci à toi!
    Contenu sponsorisé


      La date/heure actuelle est Jeu 14 Nov 2019 - 8:32