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.

-29%
Le deal à ne pas rater :
PC portable Gamer ERAZER DEPUTY P60 – 15,6” FHD 144Hz – i7-12è ...
999.99 € 1399.99 €
Voir le deal

    Signature à onglet avec transition

    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 1 Sep 2015 - 1:34

    Bonjour :)

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

    Aperçu


    Onglet simple
    Signature à onglet avec transition 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

    Anonymous
    Invité

    Mar 1 Sep 2015 - 13:54

    Merci (●´∀`●)
    Nyx Sombrelune
    Nyx Sombrelune
    FémininAge : 29Messages : 24

    Dim 6 Mar 2016 - 1:21

    merci



    Signature à onglet avec transition Alice_10
    Anonymous
    Invité

    Lun 7 Mar 2016 - 2:11

    Owww.
    Merci du partage Very Happy
    Jay-89
    Jay-89
    FémininAge : 35Messages : 93

    Mar 8 Mar 2016 - 12:17

    Merci
    Pythia
    Pythia
    FémininAge : 35Messages : 183

    Mar 15 Mar 2016 - 23:30

    J'aime beaucoup :)
    Merci du partage



    Signature à onglet avec transition Neo10
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 55Messages : 167

    Ven 18 Mar 2016 - 14:25

    J'aime beaucoup
    et
    Merci du partage
    eulalie°
    eulalie°
    FémininAge : 30Messages : 3

    Ven 8 Avr 2016 - 9:03

    Merci beaucoup du partage, je vais tester et tu l'emprunter, merci ! :heart:
    Leila
    Leila
    FémininAge : 34Messages : 30

    Dim 10 Avr 2016 - 14:00

    Génial ! Merci ♥
    Foxy'S
    Foxy'S
    FémininAge : 21Messages : 9

    Ven 15 Avr 2016 - 16:05

    Merci beaucoup Wink
    AuRas
    AuRas
    FémininAge : 23Messages : 53

    Lun 25 Avr 2016 - 17:49

    Magnifique :3 merci beaucoup x)
    Miikan
    Miikan
    FémininAge : 30Messages : 23

    Jeu 12 Mai 2016 - 22:26

    Merci :)
    Nyroc
    Nyroc
    MasculinAge : 21Messages : 58

    Jeu 2 Juin 2016 - 19:39

    Merci ^^



    Signature à onglet avec transition 1-3_mi10
    Discorde
    Discorde
    FémininAge : 23Messages : 63

    Sam 11 Juin 2016 - 9:48

    Merci ! Very Happy



    Recherche d'avatar ! Ça se passe ici : www
    Lessien
    Lessien
    FémininAge : 41Messages : 163

    Dim 12 Juin 2016 - 11:16

    Merci :)
    Yoyami Shinosuke
    Yoyami Shinosuke
    FémininAge : 26Messages : 22

    Mar 14 Juin 2016 - 14:37

    Merci ♥



    Signature à onglet avec transition Sans_t29
    AustinWolf
    AustinWolf
    MasculinAge : 29Messages : 67

    Jeu 16 Juin 2016 - 2:42

    Merciiiii !
    stubbornEmpire
    stubbornEmpire
    FémininAge : 24Messages : 38

    Mer 22 Juin 2016 - 16:26

    Merci !
    Lakia
    Lakia
    FémininAge : 25Messages : 138

    Lun 29 Aoû 2016 - 10:38

    Merci !
    Kinst.MP
    Kinst.MP
    FémininAge : 25Messages : 53

    Dim 4 Sep 2016 - 11:36

    J'essaye différentes signa en ce moment pour voir, alors ça me sera utile x) merci ^^
    Froufy
    Froufy
    FémininAge : 23Messages : 59

    Dim 4 Sep 2016 - 14:14

    Super merci!



    1+1= 4
          2
    3
    Elilith
    Elilith
    FémininAge : 26Messages : 94

    Mar 13 Sep 2016 - 4:16

    Merci beaucoup !
    Rimaï J. Godwin
    Rimaï J. Godwin
    MasculinAge : 28Messages : 93

    Dim 2 Oct 2016 - 16:12

    :wantsleep: <3
    Domori
    Domori
    MasculinAge : 31Messages : 32

    Ven 21 Oct 2016 - 15:50

    Merci
    PrincesseÔ
    PrincesseÔ
    FémininAge : 26Messages : 220

    Lun 21 Nov 2016 - 9:45

    Merci *w*
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 8:58