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 personnalisée avec des liens

    Partagez
    Loranis
    FémininAge : 31Messages : 22

    le Lun 2 Aoû 2010 - 15:52

    Je vous présente mon premier tutoriel afin de vous apprendre à réaliser une signature personnalisée avec des liens cliquables, comme celle ci.

    Pour suivre ces démarches, il ne vous est pas nécessaire d'être le fondateur du forum, il vous faut juste avoir accès au panneau d'administration. Si vous ne possédez pas de forum, vous pouvez notez votre code avec NotePad+ ou même le Bloc notes de votre pc, en enregistrant bien la page en .htm. Vous hébergez ensuite votre page, soit chez votre Fournisseur d'accès à Internet si vous avez un espace de stockage, ou sur des sites d'hébergement gratuit (Pmsc, I-France).

    Vous devez commencer par créer une page html. Donc Panneau d'administration -> Modules -> Html (gestion des pages html). Cliquez sur 'Créer une nouvelle page HTML'.
    Nommez votre page, ici je l'ai appelé 'sign_code_myr'.
    Spoiler:
    Veillez à bien cocher non aux 2 questions, puis insérez le code suivant:

    Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--

    .header-sign /*Barre en haut de la signature */
    {  background-color: #000000;
      -moz-border-radius:5px 5px 0px 0px; /
      padding-left: 10px;
      padding-right: 10px;
    }

     .footer-sign  /* Barre au bas de la signature */
    {  background-color: #000000;
      -moz-border-radius:0px 0px 5px 5px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .header-link  /* Liens du haut*/
    {  color:     #FFFF00;
      font-variant: small-caps;
      text-decoration: none ;
      font-size: 12px;
    }

    .header-link:hover  /* Liens du haut survolés */
    {  color:     #FF0000;
      text-transform: uppercase;
    }

    .header-link:before  /* Ajout du symbole avant le lien */
    {  content: " ♥ ";   
      margin-left: 3px;
      margin-right: 3px;
    }

    .header-link:hover:before  /* Modification du symbole avant le lien survolé */
    {  content: " ♦ ";   
      margin-left: 3px;
      margin-right: 3px;
    }

    .header-link:after  /*  Ajout du symbole après le lien */
    {  content: " ♥ ";   
      margin-left: 3px;
      margin-right: 3px;
    }

    .header-link:hover:after  /* Modification du symbole après le lien survolé */
    {  content: " ♦ ";   
      margin-left: 3px;
      margin-right: 3px;
    }

    .footer-link  /* Liens du bas*/
    {  color:     #00FF00;
      font-variant: small-caps;
      text-decoration: none;
      font-size: 12px;
    }

    .footer-link:hover  /* Liens du bas survolés */
    {  color: #0000FF;
      text-transform: uppercase;
    }

    .footer-link:before  /* Ajout du symbole avant le lien */
    {  content: " ♣ ";   
      margin-left: 2px;
      margin-right: 2px;
    }

    .footer-link:hover:before  /* Modification du symbole avant le lien survolé */
    {  content: " ♠ ";   
      margin-left: 2px;
      margin-right: 2px;
    }

    .footer-link:after  /*  Ajout du symbole après le lien */
    {  content: " ♣ ";   
      margin-left: 2px;
      margin-right: 2px;
    }

    .footer-link:hover:after  /* Modification du symbole après le lien survolé */
    {  content: " ♠ ";   
      margin-left: 2px;
      margin-right: 2px;
    }

    -->
    </style></head>
    <body>
    <table width="450" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><div class="header-sign"><center>
    <a href=" URL LIEN 1" target="_blank" class="header-link"> NOM DU LIEN 1</a>
    <a href=" URL LIEN 2" target="_blank" class="header-link"> NOM DU LIEN 2</a>
    </center></div></td>
      </tr>
      <tr>
        <td width="450"><img src=" http://img7.hostingpics.net/pics/110799ange.jpg" width="450" height="100" /></td> /* taille de l'image de votre signature */
      </tr>
      <tr>
        <td><div class="footer-sign"><center>
    <a href=" URL LIEN 3" target="_blank" class="footer-link"> NOM DU LIEN 3</a>
    <a href=" URL LIEN 4" target="_blank" class="footer-link"> NOM DU LIEN 4</a>
    </center></div></td>
      </tr>
    </table>
    </body>
    </html>

    Je n'expliquerai pas le code css qui est inclut, vous devez avoir le niveau nécessaire pour le comprendre.
    N'oubliez pas de valider votre page, avant de retourner à 'l'administration des pages Html'. Vous verrez l'url de la page que vous venez de créer (ici encadrée en rouge), notez la.
    Spoiler:

    Sortez du panneau d'administration, et allez ensuite dans la page de gestion de votre profil, pour modifier votre signature.
    Insérer ce code, en remplaçant les données URL et TAILLE.
    Code:
    <iframe src="ADRESSE URL DE VOTRE PAGE" style="height: TAILLEpx; width: TAILLEpx; background:transparent;" frameborder="no"; scrolling="no"></iframe>
    Valider et le tour est joué.

    N'hésitez pas si vous avez des questions.




    Dernière édition par Loranis le Jeu 2 Sep 2010 - 21:37, édité 2 fois



    Grif
    MasculinAge : 22Messages : 37

    le Sam 28 Aoû 2010 - 19:27

    Bonjour,

    J'ai un problème avec le code. Ma signature n'apparaît pas en entier:



    J'ai essayé de modifié certaines parties du codes du coups, mais rien ne change :/ Que faire SVP?
    vic_le_faucheur
    MasculinAge : 22Messages : 764

    le Sam 28 Aoû 2010 - 21:09

    joli tuto, mais je trouve qu'il est un petit peut compliquer pour ce que tu veux réaliser.

    il te suffirait de créer trois div, dans la première tu place les liens, dans la deuxième tu place l'image et dans la troisième ta dernière série de liens. de plus il pourrait fonctionner pour toutes les personnes du forum et non seulement pour les admin.

    après voilà c'est mon avis, mais c'est très bien de ta part de te lancer comme ça, continue !
    Secret-Boy
    MasculinAge : 26Messages : 20

    le Lun 30 Aoû 2010 - 14:37

    Ca fait pareil.
    Ma signature n'apparait pas en entier !
    Kuro'
    MasculinAge : 22Messages : 436

    le Lun 30 Aoû 2010 - 16:57

    C'est vrai que c'est un peu compliqué pour un petit effet dans ce style, mais merci quand même.

    Grif & Secret-Boy > Cherchez dans le CSS, doit y avoir un moyen d'augmenter la hauteur ( height ) j'ai pas suivi le tuto donc je peux pas vous dire ou ^^




    Merci Didi-senpai ! :)
    Loranis
    FémininAge : 31Messages : 22

    le Mar 31 Aoû 2010 - 21:19

    Vic, ce tuto est accessible à tous les membres et pas seulement aux admins:

    Pour suivre ces démarches, il ne vous est pas nécessaire d'être le fondateur du forum, il vous faut juste avoir accès au panneau d'administration. Si vous ne possédez pas de forum, vous pouvez notez votre code avec NotePad+ ou même le Bloc notes de votre pc, en enregistrant bien la page en .htm. Vous hébergez ensuite votre page, soit chez votre Fournisseur d'accès à Internet si vous avez un espace de stockage, ou sur des sites d'hébergement gratuit (Pmsc, I-France).


    Pour ce qui est de la taille de la signature, elle se modifie à 2 endroits :

    Dans le premier code, vers la fin :

    Code:
    <td width="450"><img src=" http://img7.hostingpics.net/pics/110799ange.jpg" width="450" height="100" /></td> /* taille de l'image de votre signature */

    Ainsi que dans le code mis dans votre profil :

    Code:
    <iframe src="ADRESSE URL DE VOTRE PAGE" style="height: TAILLEpx; width: TAILLEpx; background:transparent;" frameborder="no"; scrolling="no"></iframe>



    Grif
    MasculinAge : 22Messages : 37

    le Mer 1 Sep 2010 - 0:29

    Merci beaucoup, ça fonctionne! GG le tuto en tout cas ;-)
    En ligne
    Okhmhaka
    FémininAge : 31Messages : 31712

    le Mer 1 Sep 2010 - 1:47

    C'est pas mal comme idée je trouve^^ J'estime ça un peu complexe pour le résultat, mais finalement ça permet d'avoir des signatures uniformisées assez facilement. C'est une bonne astuce, merci du partage^^



    Loranis
    FémininAge : 31Messages : 22

    le Mer 1 Sep 2010 - 14:29

    De rien, quad j'aurais le temps je ferai d'autres tutos sympas. Et j'avoue que ça peut paraitre difficile au premier abord, mais au final c'est plutôt simple je trouve.



    LB670
    MasculinAge : 39Messages : 22

    le Ven 31 Déc 2010 - 20:03

    Bonsoir désolé mais moi j'ai un soucis, ma signature ne s'affiche pas du tout. Aurais-je fais une erreur? Je vais bien dans mon profil et je rentre le code et là, rien. Pourtant lorsque je fais une visualisation de ma page, ma signature apparait.



    DiAnOs
    MasculinAge : 16Messages : 390

    le Mar 27 Déc 2011 - 18:53

    Merci du partage ! Very Happy



    Romee
    FémininAge : 21Messages : 40

    le Sam 7 Jan 2012 - 19:28

    Trés bon tuto Very Happy je le cherchais et je voyais cette signature partout mais je ne trouvais pas son code Very Happy



    CN.June
    FémininAge : 53Messages : 306

    le Ven 20 Jan 2012 - 9:23

    Merci pour ce tutoriel qui est en effet bien pratique 8D !
    Balmung Lynren
    MasculinAge : 28Messages : 133

    le Ven 20 Jan 2012 - 11:57

    C'est assez sympa ce tuto' :) Je te remercie du partage



    overwhelming
    FémininAge : 19Messages : 40

    le Mer 18 Avr 2012 - 15:53

    @LB670 a écrit:Bonsoir désolé mais moi j'ai un soucis, ma signature ne s'affiche pas du tout. Aurais-je fais une erreur? Je vais bien dans mon profil et je rentre le code et là, rien. Pourtant lorsque je fais une visualisation de ma page, ma signature apparait.

    J'ai le même soucis. En prévisualisation la signature, s'affiche mais pas sur le forum
    Célestine
    FémininAge : 18Messages : 51

    le Mer 2 Oct 2013 - 22:13

    Merci beaucoup !
    Je me demandais depuis longtemps comment faire :toto: 
    Contenu sponsorisé

    Aujourd'hui à 9:08


      La date/heure actuelle est Mar 6 Déc 2016 - 9:08