PA à onglets sans passer par template ?

[Ilsé]

Bonjour,

Via un tutoriel trouvé je ne sais plus trop où (ici, sûrement), j'ai réalisé une page d'accueil à onglets. Malheureusement, une chose à laquelle je n'avais pas pensé, c'est que le fondateur du forum où cette PA doit être appliquée n'est plus là; donc, pas moyen de modifier les templates.

Dans mon code, j'ai ajouté une page HTML dont le lien est dans le template overall_header.
Voici cette page HTML :



Code:

//<!--
                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;
                }
        //-->


Ma question est : où puis-je placer ce code (ou un similaire) sans passer par les templates (si cela est possible; si ce n'est pas le cas, tant pis) ?

Voici le code de ma PA :



Code:

<br><div class="systeme_onglets"><div class="onglets"><span class="onglet_0 onglet" id="onglet_dn" onclick="javascript:change_onglet('dn');">Death Note RPG</span>
            <span class="onglet_0 onglet" id="onglet_scenarios" onclick="javascript:change_onglet('scenarios');">Scenarios</span>
            <span class="onglet_0 onglet" id="onglet_partenaires" onclick="javascript:change_onglet('partenaires');">Popularité</span>
        </div>

        <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_dn"><table style="width: 100%; border-collapse: collapse;">
    <tbody><tr>
        <td style="width: 205px"><center>


 <!--STAFF-->
      <h1>STAFF</h1>
<br>
    <a id="info_bulle" class="info_bulle" href="URL CONTACT"><img src="http://i.imgur.com/7ADS4.png">
          <span>
            <center><br><b>Pseudo</b><br>
<img src="http://i.imgur.com/0t9xn.png"><br><br>
 <b>Rang.</b><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac lacus sem. Donec vel tellus enim, eu vestibulum quam. Vivamus sed sapien nisl. Phasellus neque. <br>
<a href="URL CONTACT">Contact</a><br>
<br><br>
</center><br>
          </span>
        </a>
 <a id="info_bulle" class="info_bulle" href="URL CONTACT"><img src="http://i.imgur.com/7ADS4.png">
          <span>
            <center><br><b>Pseudo</b><br>
<img src="http://i.imgur.com/0t9xn.png"><br><br>
 <b>Rang.</b><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac lacus sem. Donec vel tellus enim, eu vestibulum quam. Vivamus sed sapien nisl. Phasellus neque. <br>
<a href="URL CONTACT">Contact</a><br>
<br><br>
</center><br>
          </span>
        </a>
 <a id="info_bulle" class="info_bulle" href="URL CONTACT"><img src="http://i.imgur.com/7ADS4.png">
          <span>
            <center><br><b>Pseudo</b><br>
<img src="http://i.imgur.com/0t9xn.png"><br><br>
 <b>Rang.</b><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac lacus sem. Donec vel tellus enim, eu vestibulum quam. Vivamus sed sapien nisl. Phasellus neque. <br>
<a href="URL CONTACT">Contact</a><br>
<br><br>
</center><br>
          </span>
        </a>
 <a id="info_bulle" class="info_bulle" href="URL CONTACT"><img src="http://i.imgur.com/7ADS4.png">
          <span>
            <center><br><b>Pseudo</b><br>
<img src="http://i.imgur.com/0t9xn.png"><br><br>
 <b>Rang.</b><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac lacus sem. Donec vel tellus enim, eu vestibulum quam. Vivamus sed sapien nisl. Phasellus neque. <br>
<a href="URL CONTACT">Contact</a><br>
<br><br>
</center><br>
          </span>
        </a>
 <a id="info_bulle" class="info_bulle" href="URL CONTACT"><img src="http://i.imgur.com/7ADS4.png">
          <span>
            <center><br><b>Pseudo</b><br>
<img src="http://i.imgur.com/0t9xn.png"><br><br>
 <b>Rang.</b><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac lacus sem. Donec vel tellus enim, eu vestibulum quam. Vivamus sed sapien nisl. Phasellus neque. <br>
<a href="URL CONTACT">Contact</a><br>
<br><br>
</center><br>
          </span>
        </a>
 <a id="info_bulle" class="info_bulle" href="URL CONTACT"><img src="http://i.imgur.com/7ADS4.png">
          <span>
            <center><br><b>Pseudo</b><br>
<img src="http://i.imgur.com/0t9xn.png"><br><br>
 <b>Rang.</b><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac lacus sem. Donec vel tellus enim, eu vestibulum quam. Vivamus sed sapien nisl. Phasellus neque. <br>
<a href="URL CONTACT">Contact</a><br>
<br><br>
</center><br>
          </span>
        </a>
      <!--FIN STAFF-->


</center></td>
        <td style="width: 400px"><font size="2">2011<br>
L a mystérieusement disparu, Light a pris son pseudonyme et sa place. Désormais, Kira règne sur le monde. Mikami et Rester sont morts, souvenirs de la bataille qui a vu l'affront entre les deux camps. Les criminels se cachent, plus ou moins et les rares détectives restants...complotent en secret. Bienvenue, l'enfer se trouve à Tokyô.<br><br>
</font>
<font size="2"><font align="right"><br>
</font></font><form>
<select style="width: 200px;" onchange="location = this.options
[this.selectedIndex].value">
<option selected="selected">
Bondir vers ...
</option>
<option value="URL">
Informations
</option>
<option value="URL">
Parler aux Admins
</option>
<option value="URL">
Présentations
</option>
</select>
</form><br>
<br>
 <!--RAGOTS-->
      <h1>RAGOTS</h1>
<br>
 <font size="2">  * Noël noël, il neige à verse, vous n'oublierez pas vos cache-nez, au risque de grosses grippes ou autres maladies sympathiques dans le genre.<br>
    * De nombreux postes prédéfinis sont libres, n'hésitez pas ! Un peu plus bas, vous aurez un aperçu de tous les postes importants disponibles ! N'hésitez pas !<br>
    * Le forum a fait une remise à zéro, au cas où vous ne l'auriez pas remarqué. Chacun reprend son personnage comme si celui-ci n'avait jamais existé.<br>
</font>
 <!--FIN RAGOTS-->
</td>
    </tr>
</tbody></table><br></div>

       
            <div class="contenu_onglet" id="contenu_onglet_scenarios">
<table style="width: 100%; border-collapse: collapse;">
    <tbody><tr>
        <td style="width: 250px">
 <!--WAITING--><center>
      <h1>WE'RE WAITING</h1>
<br>
<img src="http://illiweb.com/fa/pbucket.gif"> <img src="http://pics.livejournal.com/richter3456/pic/0000gxdb"><br>
<img src="http://illiweb.com/fa/pbucket.gif"> <img src="http://pics.livejournal.com/richter3456/pic/0000w106"><br>
<img src="http://i.imgur.com/7ADS4.png"> <img src="http://i.imgur.com/7ADS4.png">
 <!--FIN WAITING--></center>
</td>
   

<td>
<ul>SCÉNARIO</ul></font><font size="3"></font><ul>

<br><font size="2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id enim a lorem malesuada tempus eget at urna. In cursus accumsan felis eu gravida. Aenean pretium sodales nulla sed tempor. In hac habitasse platea dictumst. Sed eget diam nisl, vitae viverra ipsum. Praesent sagittis cursus posuere. Etiam sollicitudin rhoncus tincidunt. Morbi bibendum congue purus, non elementum arcu tincidunt sit amet. Nunc eros nisi, vulputate a imperdiet at, consequat et libero. Nulla facilisi. Pellentesque ut urna a urna euismod fringilla. Nam diam mi, varius vitae pulvinar et, volutpat nec justo. Aenean adipiscing dapibus orci, vel bibendum libero ullamcorper in. Sed vel fermentum tellus. Sed turpis lectus, ultricies convallis dapibus at, suscipit non augue.

Integer imperdiet urna at turpis posuere convallis. Ut vel odio metus, id molestie felis. Ut laoreet lectus quis erat iaculis volutpat. Etiam ornare, libero eget auctor malesuada, felis mi dictum mauris, vel faucibus mi eros non mauris. Etiam interdum mattis elit vitae dapibus. Ut nec nisi erat. Ut in ultrices justo. Maecenas sit amet nunc ut ante porta lacinia. Maecenas iaculis ipsum at massa egestas molestie. Mauris quis nibh elementum metus feugiat volutpat. Nullam sagittis fermentum erat, a porttitor quam eleifend at. Suspendisse id lacus sapien, vel iaculis libero. </font>
</font><br>
</td>
    </tr>
</tbody></table><br></div>






       




            <div class="contenu_onglet" id="contenu_onglet_partenaires"><table style="width: 100%; border-collapse: collapse;">
    <tbody><tr><td style="width: 205px"><center>
 <!--TOPSITE--><center>
      <h1>TOP SITE</h1>
<br><font size=2>
♥ ♥ ♥ ♥ ♥ ♥<br>
♥ ♥ ♥ ♥ ♥ ♥<br>
♥ ♥ ♥ ♥ ♥ ♥</font><br>
<br>
<font size="2">Notre bannière :</font><br><br>
<img src="http://i.imgur.com/9Evd9.gif">

</center></td>
        <td style="width: 400px"><font size="2">Nos Partenaires.</font><br><marquee scrollamount="2" direction="left"><a href="URL"><img src="http://i.imgur.com/9Evd9.gif"></a><a href="URL"><img src="http://i.imgur.com/9Evd9.gif"></a><a href="URL"><img src="http://i.imgur.com/9Evd9.gif"></a><a href="URL"><img src="http://i.imgur.com/9Evd9.gif"></a><a href="URL"><img src="http://i.imgur.com/9Evd9.gif"></a></marquee>
<br><br>
<font size="2">Forums du staff.</font><br>
<a href="URL"><img src="http://i.imgur.com/9Evd9.gif"></a><a href="URL"><img src="http://i.imgur.com/9Evd9.gif"></a><a href="URL"><img src="http://i.imgur.com/9Evd9.gif"></a><a href="URL"><img src="http://i.imgur.com/9Evd9.gif"></a><a href="URL"><img src="http://i.imgur.com/9Evd9.gif"></a><br>
</td>






    </tr>
</tbody></table></div>

        </div>
    </div>
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'dn';
                change_onglet(anc_onglet);
        //-->
        </script>
<br><br>
Forum optimisé pour Firefox.<br>
<i>Crédits à faire, mais je n'ai pas trop d'idées,<br>
un peu la flemme aussi. Oui, je suis une<br>
flemmarde, et alors ?</i>


Et le code CSS des onglets :



Code:

.onglet
        {
                display:inline-block;
-moz-border-radius: 5px;
                margin-left:3px;
                margin-right:3px;
                padding:3px;
                border:1px solid black;
                cursor:pointer;
        }
        .onglet_0
        {
                background:#422020;
                border-bottom:1px solid black;
font-size:15px;
        }
        .onglet_1
        {
                background:#422020;
                border-bottom:0px solid black;
                padding-bottom:4px;
font-size:15px;
        }
        .contenu_onglet
        {         
background-color:#000000;
                border:1px solid black;
                margin-top:-1px;
                padding:5px;
                display:none;
        }



Merci à ceux qui me répondront

[Invité]

Bonjour,

Le code que vous placiez dans une page HTML, peut être mis dans la gestion des codes javascript. Panneau d'admin' > Modules > gestion des codes javascript. Choisissez le nom que vous voulez, cochez "Sur l'index" et collez le code. Validez. Le code javascript s'appliquera automatiquement au message d'accueil de votre forum.

Cordialement.

[Ilsé]

Bonjour,

Merci beaucoup pour votre réponse si rapide =D

Problème résolu !