# Page d'accueil n°2 ~

Page d'accueil en onglets ♪

Hellooooo ♪
Je propose une page d'accueil en onglet. Je tiens à préciser que le codage est neutre, sobre. Donc si vous vous attendiez à avoir un truc tout coloré avec des bords arrondis ou une police très jolie, ce ne sera pas le cas. Le codage, c'est à vous de le personnalisez ou à la suite de ce message :3 Donc ce codage est noir et blanc et en arial u.u

Avant d'utiliser ce code, il faut remplir les conditions suivantes :
♥. Avoir accès au panneau d'administration
♥. Avoir activé le HTML (Comment l'activer ? Cliquez !)
♥. Etre en PhBB2

Voici le code de base de notre page d'accueil :

Code:: <title>Conception d'onglet</title>
<script type="text/javascript" src="http://illiweb.com/fa/js_16/fr.js"></script>
<style>

/* Début de la feuille de style */
.onglet-content > div {
display : none ; /* permet de spécifier la manière dont un élément est affiché */
border : solid 0px; /* Bordure de la page d’accueil*/
border-radius : 25px 25px 25px 25px ; -moz-border-radius : 25px 25px 25px 25px ; -webkit-border-radius : 25px 25px 25px 25px ; /* l'arrondi de l'encadrement, a retiré selon ce que tu veux */
padding : Xpx ; /* correspond à la marge interne d'une boite, et permet de définir la distance */
margin-bottom : Xpx ; /*correspond à la marge externe d'une boite, et permet de définir la distance */
width : Xpx ; /* définis l'hauteur de la Page d'accueil */
height : Xpx; /* définis la largeur de la Page d'accueil */
background: #ffffff; /* fond de la Page d'accueil */

}
.onglet-content > div.active{ display : block ; }

.onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; }
.onglet-table td {
style : top ;
vertical-align:middle ; /* permet de gérer l'alignement vertical du texte */
border : solid Xpx ; /* Bordure de la page d’accueil */
border-radius : 50px 50px 50px 50px ; -moz-border-radius : 50px 50px 50px 50px ; -webkit-border-radius : 50px 50px 50px 50px ; /* l'arrondi de l'encadrement, a retiré selon ce que tu veux */
padding : Xpx; /* taille en largeur des onglets */
width: Xpx; /* taille en hauteur des onglets */
text-align:center; /* permet de centré le nom des onglets */

opacity : 0.7 ; /* (entre 0,1 et 1) opacité de tes onglets inactifs (que tu n'as pas sélectionné ou que tu ne survole pas) */
font-size: Xpx; /* taille des titres de tes onglets */
background: #ffffff; /* fond de tes onglets */
}
.onglet-table td.active, .onglet-table td:hover {
opacity : 1 ; /* (entre 0,1 et 1) opacité d'un onglet survolé ou que tu as sélectionné */
}
/* Fin de la feuille de style */
</style>
<center>

<script type="text/javascript">
/* Début du script */
jQuery(document).ready(function(){
jQuery(".onglet-table").find("td").click(function(){
/* Suppression des classe .active pour tout les onglets et contenus */
var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */
system.find(".onglet-table").find(".active").removeClass("active");
system.find(".onglet-content").find(".active").removeClass("active");

/* Ajout de la classe active à l'onglet cliqué et au contenu correspondant */
var id = jQuery(this).attr("name"); /* Identification du numéro de l'onglet cliqué */
jQuery(this).addClass("active");
system.find(".onglet-content").find("div[name='"+id+"']").addClass("active");
});
});
/*Fin du script */
</script>
<div class="onglet">
<table><tbody><tr><td colspan="2">
<table class="onglet-table">

/* Noms des onglets */
<tbody><tr><td name="1" class="active">Onglet 1</td>
<td name="2">Onglet 2</td>
<td name="3">Onglet 3</td>
<td name="4">Onglet 4</td>
<td name="5">Onglet 5</td>
</tbody></table></td></tr><tr><td>
<div class="onglet-content">

/* Contenus des onglets */
<div name="1" class="active">contenu de l'onglet 1</div>
<div name="2">contenu de l'onglet 2</div>
<div name="3">contenu de l'onglet 3</div>
<div name="4">contenu de l'onglet 4</div>
<div name="5">contenu de l'onglet 5</div>

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

J'ai mis différents commentaires pour vous guidez pas à pas.
Il est possible qu'ils apparaissent malgré le fait qu'ils soient encadrés par des /* et */. Si c'est le cas, veuillez tout simplement les supprimer et ils ne seront plus visibles !

Sachant que ceci est un code en libre service et non un tutoriel, le reste c'est à vous de le faire, comme dis plus haut ^^

On peut voir ce que ça donne? # Page d'accueil n°2 ~ 266172

Croquis ou autre.

Euh, ben mon forum ^^
>> http://wonder-land.forumactif.fr/

(Il est en Publicité et en Partenariat avec GI, donc j'espère que c'est pas considéré comme une pub frauduleuse xD)

non xD
Merci pour ce don !

C'est superbe j'adore! Je vais surement le prendre, il est simple/rapide, et beau à la fois.

Ca ne marche pas avec moi...

merci