AccueilFAQRechercherMembresGroupesS'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 à onglets

    Partagez
    avatar
    Onyx
    FémininAge : 23Messages : 2936

    le Jeu 25 Sep 2014 - 2:56




    LS - Signature à onglets


    Voici un petit LS de signature à onglets j'ai fait pour la demande de Madii-x.

    Pour voir l'aperçu de l'onglet "Signature" : cliquez ici.
    Pour voir l'aperçu de l'onglet "Cadeaux" : cliquez ici.
    Pour voir l'aperçu de l'onglet "Moi" : cliquez ici.

    Ce LS est en deux parties.
    • Tout d'abord, nous allons créer notre signature dans une page html.
    • Puis, nous allons mettre l'iframe qui contient la page html dans notre signature.

    • Puisqu'on se sert d'une page html, il que vous ayez votre propre forum pour héberger la page html ou que votre administrateur accepte de le faire sur son propre forum.

    • Il ne faudrait pas que l'image de l'onglet "signature" dépasse 500x200 pixels.

    • L'image dans l'onglet "moi" a une hauteur de 180 pixels.
    Merci de ne pas enlever le crédit vers Never-Utopia.



    1. Le corps de la signature (Page HTML)


    Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre signature.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > MODULES
    > > > HTML & JAVASCRIPT
    > > > > GESTION DES PAGES HTML

    Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)"
    On choisit un nom, comme "Signature de NOM" par exemple.
    Enfin, on met le code suivant et on enregistre :
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Signature</title>
    <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />
    <script type="text/javascript">
            //<!--
                    function change_ongletii(name)
                    {
    document.getElementById('ongletii_'+anc_ongletii)
    .className = 'ongletii_0 ongletii';
    document.getElementById('ongletii_'+name).
    className = 'ongletii_1 ongletii';
    document.getElementById('contenu_ongletii_'+anc_ongletii)
    .style.display = 'none';
    document.getElementById('contenu_ongletii_'+name).
    style.display = 'block';
                            anc_ongletii = name;
                    }
            //-->
    </script>
    <style type="text/css">
    /*Fond par HTML*/
    body {
      margin: 0px;
    }

    /*Tableau qui entoure la sign*/
    .signii {
      border: 1px solid #fe285a;
      width: 502px;
      height: 218px;
    }
     
    /*Onglets*/
    .ongletii {
      background: #fe285a;
      height: 20px;
      font-size: 16px;
      color: white;
      font-family: abel;
      text-transform: uppercase;
      text-align: center;
      border-bottom: 1px solid #fe285a;
    }
    /*Onglet au survol*/
    .ongletii_0:hover {
      cursor: pointer;
    }
    /*Onglet actif*/
    .ongletii_1 {
      background: #c8254b;
    }
     
    /*Contenu des onglets*/
    .contenu_ongletii {
      background: url('http://i39.servimg.com/u/f39/18/85/39/07/transi10.jpg');
      display: none;
      font-family: abel;
      color: #fe285a;
      font-size: 14px;
    }
     
    /*Contenu onglet SIGNATURE*/
    .inside_1 {
      height: 200px;
    }

    /*Contenu onglet CADEAUX*/
    .inside_2 {
      overflow: auto;
      height: 200px;
    }

    /*Contenu onglet MOI*/
    .inside_3 {
      padding: 9px;
      padding-right: 0px;
      height: 182px;
    }

    /*Image dans contenu onglet MOI*/
    .imgii {
      float: left;
      height: 180px;
      border: 1px solid #fe285a;
      margin-right: 10px;
    }
     
    /*Texte dans contenu onglet MOI*/
    .textii {
      height: 172px;
      padding-right: 10px;
      text-align: justify;
      overflow: auto;
    }

    /*Liens dans contenu onglet MOI en bas*/
    .linksii a {
      display: inline-block;
      color: #fe285a;
      font-size: 14px;
      font-weight: bold;
      text-decoration: none!important;
      margin-right: 20px;
      margin-bottom: -8px;
    }
    /*Liens au survol dans contenu onglet MOI en bas*/
    .linksii a:hover {
      color: #7a162d;
      font-size: 14px;
    }
    </style>
    </head>
    <body>
      <table align="center" border="0" cellpadding="0" cellspacing="0" class="signii"><tr>
        <td width="33%">
          <div onmouseover="javascript:change_ongletii('1er');" id="ongletii_1er" class="ongletii_1 ongletii">
            Signature
          </div>
        </td>
        <td width="34%">
          <div onmouseover="javascript:change_ongletii('2eme');" id="ongletii_2eme" class="ongletii_0 ongletii">
            Cadeaux
          </div>
        </td>
        <td width="33%">
          <div onmouseover="javascript:change_ongletii('3eme');" id="ongletii_3eme" class="ongletii_0 ongletii">
            Moi
          </div>
        </td></tr><tr>
        <td colspan="3">
          <div id="contenu_ongletii_1er" class="contenu_ongletii">
            <div align="center" class="inside_1">
              Contenu de l'onglet "Signature"
            </div>
          </div>
          <div id="contenu_ongletii_2eme" class="contenu_ongletii">
            <div align="center" class="inside_2">
              Contenu de l'onglet "Cadeaux"
            </div>
          </div>
          <div id="contenu_ongletii_3eme" class="contenu_ongletii">
            <div class="inside_3">
              <img src="URL DE L'IMAGE DE L'ONGLET MOI" alt=" " class="imgii" />
              <div class="textii">
                Texte de l'onglet moi.
              </div>
              <div align="right" class="linksii">
                <a href="LIEN VERS LE PROFIL" target="_blank">Profil</a>
                <a href="LIEN VERS LES MP" target="_blank">MP</a>
                <a href="http://www.never-utopia.com/t51249-signature-a-onglets" target="_blank">N-U</a>
              </div>
            </div>
          </div>
        </td></tr>
      </table>
    <script type="text/javascript">
            //<!--
                    var anc_ongletii = '1er';
                    change_ongletii(anc_ongletii);
            //-->
    </script>
    </body>
    </html>

    Changer les images/texte
    Si jamais vous voulez changer ce qu'il y a dans les onglets, c'est indiqué par "contenu de l'onglet signature", "contenu de l'onglet cadeaux", "URL DE L'IMAGE DE L'ONGLET MOI", "texte de l'onglet moi", etc... Je vous fais confiance pour vous y retrouver Wink

    Modifier les onglets pour qu'ils changent au clic
    Il vous suffit de trouver tous les endroits où il est indiqué "onmouseover" et de le remplacer par "onclick".

    Comment modifier le style ou la mise en forme
    Dans ce code, il y a aussi du CSS qui met en forme la signature. Si vous voulez modifier la police, les couleurs ou autres éléments de mise en forme, c'est là qu'il faudra le faire. Le CSS est entre les balises suivantes :
    Code:
    <style type="text/css">
    VOTRE CSS EST ICI
    </style>

    Lorsque vous modifiez votre signature, il faut cliquer sur l'engrenage où c'est inscrit "HTML", pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.



    1. Mettre l'iframe (espace signature)


    Maintenant que la page HTML est créée avec votre signature à l'intérieur, on va aller la mettre dans votre profil à l'aide d'un iframe.

    Pour cela, nous allons aller dans :
    > PROFIL
    > > SIGNATURE

    Puis, nous allons mettre le code suivant :
    Code:
    <iframe src="LIEN DE LA PAGE HTML" style="display: block; margin: auto; height: 230px; width: 510px; border: none;"></iframe>

    Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

    Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, notre signature), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec un tutoriel".

    À plus !


    Dernière édition par Onyx le Ven 14 Juil 2017 - 21:13, édité 2 fois



    avatar
    Hollyx
    FémininAge : 25Messages : 76

    le Sam 27 Sep 2014 - 8:39

    Elle est vraiment bien. J'aime beaucoup la typo!
    avatar
    elsa2607
    FémininAge : 19Messages : 81

    le Mar 30 Sep 2014 - 22:55

    Magnifique merci du partage



    avatar
    Anviree
    FémininAge : 20Messages : 49

    le Jeu 2 Oct 2014 - 23:55

    Superbe ! Merci beaucoup !
    avatar
    CaraDelevngnie
    FémininAge : 17Messages : 320

    le Ven 3 Oct 2014 - 19:07

    J'adore ! *O*



    avatar
    Jeff`22
    MasculinAge : 16Messages : 34

    le Ven 3 Oct 2014 - 19:45

    Merci :!
    avatar
    Grande
    FémininAge : 29Messages : 206

    le Ven 3 Oct 2014 - 19:52

    Merci =D



    avatar
    Klemmeria
    FémininAge : 17Messages : 147

    le Ven 3 Oct 2014 - 21:57

    Thanks



    avatar
    Angie H.-Carter
    FémininAge : 33Messages : 691

    le Ven 3 Oct 2014 - 22:31

    j'adore depuis le temps que je cherche ce genre de signature merci ^^



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    Elzeir
    FémininAge : 21Messages : 22

    le Ven 10 Oct 2014 - 19:53

    Merci !
    avatar
    Halloween
    FémininAge : 23Messages : 9741

    le Dim 12 Oct 2014 - 13:28

    Comme d'habitude, c'est génial et super clair !
    Merci Onyx ♥



    Je déménage sur NMD o/
    avatar
    Rozenbrez
    FémininAge : 26Messages : 1320

    le Sam 18 Oct 2014 - 15:06

    Merci Madii-x et Onyx pour ce codage :) Je vous l'emprunte pour mon forum. Il me sera bien utile <3





    Merci au lutin anonyme de cette année. <3

    avatar
    Neymar
    MasculinAge : 19Messages : 138

    le Sam 18 Oct 2014 - 15:30

    Amazing. o_o
    avatar
    Pinkie
    FémininAge : 17Messages : 31

    le Dim 19 Oct 2014 - 12:43

    Aw j'aime bien c'est simple mais c'est vraiment sympa =D
    avatar
    Adèle
    FémininAge : 25Messages : 96

    le Dim 19 Oct 2014 - 13:34

    Merci ♥
    avatar
    BlueBerry ♪
    FémininAge : 19Messages : 128

    le Dim 19 Oct 2014 - 16:51

    Super je te l'emprunte Wink



    avatar
    Cruelly
    FémininAge : 24Messages : 2543

    le Mar 21 Oct 2014 - 5:03

    Magnifique merci :)




    avatar
    Layla4
    FémininAge : 18Messages : 149

    le Jeu 23 Oct 2014 - 15:00

    Merci, super utile ! :DDD
    avatar
    Daydream
    FémininAge : 19Messages : 44

    le Jeu 23 Oct 2014 - 17:18

    Merci ! :3
    avatar
    Kovu
    FémininAge : 16Messages : 251

    le Ven 24 Oct 2014 - 10:29

    Merci §



    avatar
    shala
    FémininAge : 25Messages : 213

    le Ven 24 Oct 2014 - 19:42

    merci^^



    avatar
    Celuna
    FémininAge : 26Messages : 123

    le Ven 24 Oct 2014 - 19:52

    Justement je l'ai vu hier.. et sincèrement j'ai trouvé ce petit bijou magnifique comme signature. Merci infiniment pour ce partage
    avatar
    SweetGumiho
    FémininAge : 26Messages : 146

    le Sam 25 Oct 2014 - 23:20

    Merci ♥



    미쳐버리지 않으려면 때때로 미친 짓을 조금씩 해 주어야만 한다.

    — On doit faire des choses folles parfois pour éviter de devenir complètement cinglé.
    avatar
    ♪ Extasy ♪
    FémininAge : 27Messages : 104

    le Dim 26 Oct 2014 - 20:15

    Merci pour le partage !
    Depuis le temps que je cherche un code comme celui-là tu me sauves la mise Very Happy
    avatar
    Pelezinho
    MasculinAge : 18Messages : 76

    le Mer 29 Oct 2014 - 3:01

    Parfait ! ham3



    [MERCI D'INTRODUIRE SIGNATURE ORIGINALE ICI]
    Contenu sponsorisé


      La date/heure actuelle est Dim 23 Juil 2017 - 6:55