Eklablog
Editer l'article Suivre ce blog Administration + Créer mon blog

Signature codée

contenu, div, html, onglet, text
16.06.2012 …

Par Nagalia

Après une demande, voilà un tuto pour faire une signature en css et html à mettre sur les forum. 
/! Vérifiez que le forum accepte que les membres utilisent le html. 



C'est joli, certes, mais comment on fait ça? Pour les EklaBloger, nous avons la chance de pouvoir créer une page html et de l'héberger directement:
"Contenu => Gérer les fichier => Nouveau fichier" et nommez le "signature.html"
/! Javascript activé!
Pour les autres, sortez votre bloc note, notepad, ou un quelconque autre logiciel d'édition de texte. N'oubliez pas d'enregistrer en .html

Nous allons créer une page html de A à Z voici donc la structure de base:

<!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"/>

  <script type="text/javascript">
CONTENU JS
  </script>
       
  <style type="text/css">
CONTENU CSS
  </style>
</head>

    <body>
       
CONTENU HTML     
        
    </body>
</html>
 

On va commencer par le javascript

<!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"/>

  <script type="text/javascript">

//<!--
                function change_onglet(name)
                {
document.getElementById('onglet_'+anc_onglet)
.className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).
className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet)
.style.display = 'none';
document.getElementById('contenu_onglet_'+name).
style.display = 'block';
                        anc_onglet = name;
                }
        //-->   </script>
       
  <style type="text/css">
CONTENU CSS
  </style>
</head>

    <body>
       
CONTENU HTML     
        
    </body>
</html>
 

Et on ne touche à rien!
Ensuite, CSS:

<!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"/>

<script type="text/javascript">

        //<!--
                function change_onglet(name)
                {
document.getElementById('onglet_'+anc_onglet)
.className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).
className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet)
.style.display = 'none';
document.getElementById('contenu_onglet_'+name).
style.display = 'block';
                        anc_onglet = name;
                }
        //-->
               </script>

       
  <style type="text/css">
.onglet,
.onglet_0 {display:inline-block;
          PROPRIETE: VALEUR; }

 .contenu_onglet{display:none;
          height : Xpx; /* HAUTEUR */
          width : Xpx; /*LARGEUR*/
          overflow : auto;
          PROPRIETE: VALEUR;
}

</style>

</head>

    <body>

CONTENU HTML 

</body>

</html>

 

Modifiez ce qui est en rouge pour personnaliser votre signature.
Enfin, le HTML:

<!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"/>

<script type="text/javascript">

        //<!--
                function change_onglet(name)
                {
document.getElementById('onglet_'+anc_onglet)
.className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).
className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet)
.style.display = 'none';
document.getElementById('contenu_onglet_'+name).
style.display = 'block';
                        anc_onglet = name;
                }
        //-->
               </script>

  <style type="text/css">

.onglet,
.onglet_0 {display:inline-block;
          PROPRIETE: VALEUR; }

.contenu_onglet{display:none;
          height : Xpx; /* HAUTEUR */
          width : Xpx; /*LARGEUR*/
          overflow : auto;
          PROPRIETE: VALEUR;}

</style>

</head>

    <body>

        <div class="onglets">
<span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">ONGLET 1</span>
<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">ONGLET 2</span>
<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">ONGLET 3</span>
        </div>

          <div class="contenu_onglet" id="contenu_onglet_1er">
          CONTENU DU 1ER ONGLET
          </div>

          <div class="contenu_onglet" id="contenu_onglet_2eme">
          CONTENU DU 2EME ONGLET
          </div>

          <div class="contenu_onglet" id="contenu_onglet_3eme">
          CONTENU DU 3EME ONGLET
          </div>

        <script type="text/javascript">
        //<!--
                var anc_onglet = '1er';
                change_onglet(anc_onglet);
        //-->
        </script> 

</body>

</html> 

Modifiez "ONGLET 1" "ONGLET 2" et "ONGLET 3" par les titre de vos onglet. Si vous voulez rajouter des onglet, il suffit de rajouter cette ligne:

<span class="onglet_0 onglet" id="onglet_4eme" onmouseover="javascript:change_onglet('4eme');">ONGLET 4</span>

sous

<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">ONGLET 3</span>

et cette ligne

<div class="contenu_onglet" id="contenu_onglet_4eme">
          CONTENU DU 4EME ONGLET
          </div>

sous

<div class="contenu_onglet" id="contenu_onglet_3eme">
          CONTENU DU 3EME ONGLET
          </div>

Si c'est votre 5eme onglet, remplacez 4 par 5 etc...

Tout à la fin du code, il y a un petit passage de js en plus qui nous permet d'afficher la signature. "1er" indique que l'onglet visible par défaut est le premier. Si vous voulez qu'on voit d'abord le 2eme onglet, remplacez "1er" par "2eme"

C'est bien beau tout ça, mais comme j'y met en signature? Au moyen d'une iframe ;)
Enregister votre signature et hébergez là et récupérez l'adresse. Collez l'adresse dans ce code, puis mettez le dans votre signature:

<iframe style="width: LARGEURpx; height: HAUTEURpx; display: block; margin-left: auto; margin-right: auto;" src="URL" frameborder="no" scrolling="no" width="320" height="240"></iframe>

<!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"/>

<script type="text/javascript">

        //<!--

                function change_onglet(name)

                {

document.getElementById('onglet_'+anc_onglet)

.className = 'onglet_0 onglet';

document.getElementById('onglet_'+name).

className = 'onglet_1 onglet';

document.getElementById('contenu_onglet_'+anc_onglet)

.style.display = 'none';

document.getElementById('contenu_onglet_'+name).

style.display = 'block';

                        anc_onglet = name;

                }

        //-->

               </script>

       

  <style type="text/css">

.onglet,

.onglet_0 {display:inline-block;

          width: 150px;

          background: #a34626; 

          margin:auto;

          margin-bottom: -1px;

          padding:3px;

          border:1px solid black;

          border-top: 4px solid black;

          border-radius: 10px 10px 0 0;

          font-family : Impact;

          letter-spacing: 3px;

          text-align: center;

          -webkit-transition: 300ms;

          -moz-transition: 300ms;

          transition: 300ms;

}

 

.onglet:hover {background: #bd5f2b

      }

 .contenu_onglet{ font-size : 14px ; 

          background: #a34626;

          border-radius : 20px;

          border: 1px solid #000000;

          border-left: 6px solid black;

          border-right: 6px solid black;

          box-shadow: 0 0 10px black, inset 0 0 10px black;

          padding: 10px;                

          display:none;

          height : 200px;

          width : 600px; 

          overflow : auto;

          color: #e7c3b7;

          text-shadow : 1px 1px 0px black; 

}

      .cadre { border-radius: 10px;

          background: rgba(0, 0, 0, 0.3);

          width: 400px;

          height: 187px;

          float: right;

          text-align: left;

          padding: 5px;

          box-shadow: 0 0 10px #ee7837, inset 0 0 5px black;

          overflow : auto; 

}

.contact {border: 1px solid black;

          border-left: 3px solid black;

          border-right: 3px solid black;

          background: rgba(238, 120, 55, 0.6);

          padding: 5px;

          margin-top: 10px;

          color: black

}

      a {color: black;

          text-decoration: none;

          text-shadow: none;

          font-weight:bold;

      }

</style>

</head>

    <body>

        <div class="onglets">

<center><span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">SIGNATURE</span>

<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">ANCIENS KITS</span>

<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">MOI</span>

</center>

        </div>

          <center> <div class="contenu_onglet" id="contenu_onglet_1er">

<img src="https://ekladata.com/LL_FFgnJyGMVWv_TAg6rnfpIIhk.png" alt=""><br/></div>

          <center> <div class="contenu_onglet" id="contenu_onglet_2eme">

              <img src="https://ekladata.com/1RsvO8ELdqRX3DnRps1urL-MPSI.jpg"/><br/>

              <img src="https://ekladata.com/qEqY2wyUKiY7IpIDa6ZhyGWFwJQ.png"/>

</div>

          <center> <div class="contenu_onglet" id="contenu_onglet_3eme">

              <div style="float:left"><img src="https://ekladata.com/d1b3rsARkHy-JOObf5r016zv8Ok.png"/><div class="contact"><a href="http://fanstasy-graph.eklablog.net">Blog</a> | <a href="http://nagalia.deviantart.com/">Deviantart</a></div></div>

              <div class="cadre"><p>Je suis Nagalia!<br/>

                  16 ans, terminale S et voulant devenir web-designeuse ^^

                  <br/><br/>

                  J'adore dessiner, des personnages de manga ou fantastique genre des elfes. En fait, je dessine beaucoup des personnages sortant tout droit de mon imagination de folle XD Genre Nagalia, une elfe noire complètement sadique :P Bref voilà pour la petite histoire sur l'origine de mon pseudo. Vous l'aurez deviné, je suis fan d'héroïque fantasy!<br/>

                  Il faut également préciser que je suis une veritable accro au graph!<br/><br/>

                  Bref, vous voyez qu'on peut mettre vraiment ce qu'on veut dans cette signature, et sans aucune limite de caractère ;)</p> </div></div>

         <script type="text/javascript">

        //<!--

                var anc_onglet = '3eme';

                change_onglet(anc_onglet);

        //-->

        </script>             

</body>

</html>

 

 

Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Vous aimerez aussi :
Onglets coulissant
Onglets coulissant
Contenu hors des articles
Contenu hors des articles
Spoiler
Spoiler
Propriété de texte
Propriété de texte
Commenter cet article
M
Mint.
21/10/2017 16:48
Super code :)
Répondre
A
A Cats Life
24/01/2017 18:27
Merci pour ce tuto très clair et bien expliqué ! :)<br /> Je suis plutôt contente de mon résultat:<br />
Répondre
Y
Yuurei.
21/02/2016 21:56
Coucou ! ^^<br /> J'ai essayé une signature codée avec ton tuto (j'ai même réussi, c'était plutôt pas mal #fierté) et j'ai deux question : <br /> 1- Comment faire pour passer d'un contenu à un autre en cliquant sur l'onglet au lieu de le survoler ? (j'espère que je suis assez claire, en gros, Je suis sur la signature et je veux passer aux kits en cliquant sur l'onglet "kits" et pas en le survolant)<br /> 2- Quand je suis sur un contenu (prenons par exemple celui de la signature) comment faire pour que l'onglet concerné (donc celui ou il y a marqué "signature") soit d'une couleur plus, par exemple? (Mais il reste clair tant que je suis sur le contenu de la signature, et par exemple, si je vais sur le contenu des anciens kits, l'onglet "signature" redeviens foncé et l'onglet "anciens kit" devient clair). <br />  Merci d'avance ! :)<br /> EDIT : J'ai trouvé pour ma première question, mais je reste toujours bloquée pour la 2e :)
Répondre
N
Nagalia
19/10/2015 18:33
Pour l'utiliser sur forumactif, il faut que l'administrateur autorise ses membres à mettre du html dans les articles / signatures. Je ne sais pas comment ça fonctionne sur les autres plateforme, donc renseigne toi auprès de l'admin.<br /> Tel que le tuto est écrit, le JS et le CSS se trouvent dans la page HTML, tu n'as donc qu'un seul fichier à enregistrer.
Répondre
P
P'tite Aby
19/10/2015 16:53
Merci pour ce tuto, il est super bien fait *-*<br /> par contre, comme le demande Lisy Nila, j'aurais aimé savoir si ça marchait sur un forum du groupe forumactif ^^<br /> et, si on peut héberger la page en html, est-ce qu'il faut héberger la partie en JavaScript autre part ou ça marche en la laissant dans le doc html?<br /> Merci d'avance ^^<br /> ~Une Serdaigle~
Répondre

Thème Magazine © -  Hébergé par Eklablog