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.

-25%
Le deal à ne pas rater :
-100€ Barre de son Hisense Dolby Atmos 5.1.2
299.99 € 399.99 €
Voir le deal

    Signature à onglets

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 25 Sep 2014 - 2:56

    Rappel du premier message :




    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



    cosmos-chann
    cosmos-chann
    FémininAge : 27Messages : 115

    Sam 5 Sep 2015 - 21:13

    merci !
    Slown
    Slown
    FémininAge : 29Messages : 62

    Dim 6 Sep 2015 - 18:17

    merci :)
    kodesh
    kodesh
    FémininAge : 33Messages : 8

    Lun 7 Sep 2015 - 14:14

    Je veux !! Merci beaucoup !
    Yuuki Emna
    Yuuki Emna
    FémininAge : 28Messages : 38

    Mer 9 Sep 2015 - 23:36

    merci! ^^
    Fantôma
    Fantôma
    MasculinAge : 22Messages : 67

    Ven 18 Sep 2015 - 21:04

    Je ne la prendrais pas, mais je viens féliciter, elle est magnifique ! *o*



    Signature à onglets - Page 6 1438369110-fantoma
    Sun.
    Sun.
    FémininAge : 25Messages : 15

    Dim 20 Sep 2015 - 18:31

    Merci beaucoup!
    Reliane
    Reliane
    MasculinAge : 31Messages : 31

    Dim 27 Sep 2015 - 15:33

    Oh :o , j'aime beaucoup , un grand merci !
    Zomega
    Zomega
    FémininAge : 33Messages : 31

    Lun 28 Sep 2015 - 20:22

    Sankyu affraid
    Neverose
    Neverose
    FémininAge : 33Messages : 93

    Lun 5 Oct 2015 - 15:23

    Merci <3



    Signature à onglets - Page 6 E9SQItc
    Aile
    Aile
    FémininAge : 36Messages : 134

    Lun 5 Oct 2015 - 18:42

    J'ai très envie d'essayer. Merci.



    Signature à onglets - Page 6 799284Sanstitre1
    RainboWolf
    RainboWolf
    FémininAge : 27Messages : 102

    Jeu 8 Oct 2015 - 15:08

    Super, merci. <3
    Chesham
    Chesham
    FémininAge : 25Messages : 45

    Ven 9 Oct 2015 - 23:38

    Merci : D
    Mystigri
    Mystigri
    FémininAge : 21Messages : 97

    Jeu 5 Nov 2015 - 18:03

    Cool, merci !



    Coccinelle
    Coccinelle
    FémininAge : 28Messages : 47

    Jeu 19 Nov 2015 - 22:19

    J'aime trop ! Merci !
    Okalem
    Okalem
    FémininAge : 24Messages : 63

    Lun 23 Nov 2015 - 18:29

    mrci
    Nianh
    Nianh
    FémininAge : 25Messages : 11

    Mer 25 Nov 2015 - 23:21

    Merci !
    Alexielios
    Alexielios
    FémininAge : 33Messages : 62

    Lun 30 Nov 2015 - 23:37

    Thanks pour le tuto.



    Signature à onglets - Page 6 Slytherin-House-member

    Signature à onglets - Page 6 Tales-of-Phantasia-Fan
    Signature à onglets - Page 6 Suikoden%2BII%2BFan
    Signature à onglets - Page 6 Star-Wars-Fan
    Signature à onglets - Page 6 Dominion%2BFan

    "People live their lives bound by what they accept as correct and true. That's how they define reality.
    But what does it mean to be correct or true?"
    Kortyx
    Kortyx
    MasculinAge : 34Messages : 81

    Jeu 3 Déc 2015 - 16:16

    Super jolie !
    Tria
    Tria
    FémininAge : 27Messages : 127

    Mer 16 Déc 2015 - 18:19

    Super joli ! Merci :3



    "Tomber est permis, se relever est ordonné."
    Signature à onglets - Page 6 Hv62
    Smikyou
    Smikyou
    FémininAge : 30Messages : 85

    Sam 19 Déc 2015 - 8:51

    Merci ♥
    Doo
    Doo
    FémininAge : 33Messages : 42

    Mer 6 Jan 2016 - 23:44

    merci pour ce partage!
    Romaiin
    Romaiin
    MasculinAge : 22Messages : 12

    Dim 10 Jan 2016 - 12:25

    Mercii Very Happy
    Rimaï J. Godwin
    Rimaï J. Godwin
    MasculinAge : 28Messages : 93

    Lun 11 Jan 2016 - 19:46

    Merci
    Anonymous
    Invité

    Mar 12 Jan 2016 - 10:40

    Merci du partage.
    dean winchester
    dean winchester
    MasculinAge : 30Messages : 85

    Lun 18 Jan 2016 - 23:57

    merci :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 13 Oct 2024 - 11:35