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.

Le Deal du moment : -34%
Ventilateur ROWENTA VU5640 TURBO SILENCE EXTRÊME
Voir le deal
66 €

    Signature personnalisée avec des liens

    Loranis
    Loranis
    FémininAge : 35Messages : 22

    le Lun 2 Aoû - 13: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:
    Signature personnalisée avec des liens 849457screen_tuto_sign
    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:
    Signature personnalisée avec des liens 962834screen_tuto_sign2

    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 - 19:37, édité 2 fois



    Grif
    Grif
    MasculinAge : 26Messages : 37

    le Sam 28 Aoû - 17:27

    Bonjour,

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

    Signature personnalisée avec des liens 16w

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

    le Sam 28 Aoû - 19: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
    Secret-Boy
    MasculinAge : 30Messages : 20

    le Lun 30 Aoû - 12:37

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

    le Lun 30 Aoû - 14: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 ^^




    Signature personnalisée avec des liens Raichu_loupay-3edc2d8276
    Merci Didi-senpai ! :)
    Loranis
    Loranis
    FémininAge : 35Messages : 22

    le Mar 31 Aoû - 19: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
    Grif
    MasculinAge : 26Messages : 37

    le Mar 31 Aoû - 22:29

    Merci beaucoup, ça fonctionne! GG le tuto en tout cas ;-)
    Sparrow-style
    Sparrow-style
    FémininAge : 35Messages : 32051

    le Mar 31 Aoû - 23: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^^



    sign
    Loranis
    Loranis
    FémininAge : 35Messages : 22

    le Mer 1 Sep - 12: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
    LB670
    MasculinAge : 42Messages : 22

    le Ven 31 Déc - 19: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.



    Signature personnalisée avec des liens Sans_t11
    avatar
    DiAnOs
    MasculinAge : 20Messages : 390

    le Mar 27 Déc - 17:53

    Merci du partage ! Very Happy



    Signature personnalisée avec des liens Comman27
    Romee
    Romee
    FémininAge : 24Messages : 40

    le Sam 7 Jan - 18: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



    Signature personnalisée avec des liens Tumblr_nno4a4w5gs1riczrxo4_500
    CN.June
    CN.June
    FémininAge : 20Messages : 315

    le Ven 20 Jan - 8:23

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

    le Ven 20 Jan - 10:57

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



    Signature personnalisée avec des liens Banbalmunglynren
    overwhelming
    overwhelming
    FémininAge : 22Messages : 40

    le Mer 18 Avr - 13: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
    Célestine
    FémininAge : 22Messages : 51

    le Mer 2 Oct - 20:13

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


      La date/heure actuelle est Jeu 4 Juin - 16:43