[Html & CSS] Page d'accueil en onglet

|!| Droits du tutoriel réservés.





Nous allons commencer par mettre le code Html dans la page d'accueil, pour cela accéder à votre Panneau d'administration -> Affichage -> Généralité et coller le code qui suit:

Spoiler:

Validé et voila vous avez la structure de votre page d'accueil, c'était simple hein x) mais pour le moment c'est un peu moche aussi donc on va décorer tout sa grâce au CSS du moins après l'explication du code.

Pour changer le nom des onglets, il vous suffit de modifier les mots qui se situe avant le "/span" dans ces lignes:

Code:

<span class="paonglet_0 paonglet" id="paonglet_accueil" onclick="javascript:change_paonglet('accueil');">Accueil</span>
            <span class="paonglet_0 paonglet" id="paonglet_effectif" onclick="javascript:change_paonglet('effectif');">Effectif</span>
            <span class="paonglet_0 paonglet" id="paonglet_autre" onclick="javascript:change_paonglet('autre');">Autre</span>

Pour remplir le contenu de vos onglet il vous suffit de placez vos code entre sa: (la sa concerne le contenu onglet "Accueil" bien sur)

Code:

<div class="contenu_paonglet" id="contenu_paonglet_accueil">
...
</div>

Si vous désirez rajouter un onglet, il vous suffit de rajouter par exemple ceci:

Code:

<span class="paonglet_0 paonglet" id="news" onclick="javascript:change_paonglet('news');"> News</span>

après cet ligne:

Code:

<span class="paonglet_0 paonglet" id="paonglet_autre" onclick="javascript:change_paonglet('autre');">Autre</span>

mais ce n'est pas tout il vous faut rajouter le contenu de ce nouvel onglet pour cela rajouter ceci:

Code:

<div class="contenu_paonglet" id="contenu_paonglet_news">Contenu de l'onglet "News"</div>

après ce code:

Code:

<div class="contenu_paonglet" id="contenu_paonglet_autrei">

Contenu autre

            </div>

Je pense que cela devrait suffire pour la création d'un nouvel onglet, on passe à la suite?





Comme je vous les dit pour le moment c'est moche x) alors nous allons décorer le tout avec le CSS, pour cela allez dans Affichage -> Couleur -> Feuille de style CSS et collez ce code à la fin:

Spoiler:

Pensez toujours à valider et c'est régler .

Comme pour le Html je vais vous expliquer le code CSS.
Explication:

Code:

.paonglet

Cet classe concerne seulement les onglets (les boutons "Accueil", "Effectif" ect). C'est dans cet classe que vous pourrez modifier les boutons.

Code:

.paonglet_0

Cet classe concerne également les bouton mais seulement les bouton "inactif", sur vos 3 onglets il y en aura toujours un qui s'affiche mais les deux autres non, par exemple l'onglet actif aura le texte rouge alors que les inactif auront le texte blanc, c'est donc dans cet classe que vous régler les différences entre l'onglet actif et les inactif, il peux y avoir aucune différence bien entendu ^^.

Code:

.paonglet_1

Vous l'aurez surement compris, cet classe concerne l'onglet actif donc pas besoin de vous expliquez en quoi sa consiste c'est dit jsute au dessus x).

Code:

.contenu_paonglet

Cet classe comme son nom l'indique concerne le contenu de tout les onglets.


Voila j'espère donc que le tutoriel sera compréhensible et qu'il vous aidera, n'hésitez pas à poser des questions si vous avez un problème ou si j'ai oublier quelque chose.


Autre tutoriel utile:

[Template & CSS] Personnalisé le style de la page d'accueil sans toucher au catégorie.