[Template & CSS] Qeel (=Qui est en ligne) en onglet.

|!| U petit merci est le bienvenue !



|!| Ne pas utiliser ce même code pour la page d'accueil sinon des bug apparaîtront.



Pour commencer nous allons procédé différemment pour la modification du template, allez dans votre Panneau d'administration -> Affichage -> Template : Général -> Index_body.
Ouvrez sur votre pc le bloc note et vous couper/coller dedans le code concernant le QEEL, c'est à dire celui qui se trouve entre:

Code:

<!-- BEGIN disable_viewonline -->

et

Code:

<!-- END disable_viewonline -->

Maintenant allez sur ce site -> Ici et copier le premier code qui commence par "doctype" et fini par "html".
Mettez ce code entre les deux balises cité juste au dessus du tuto à la place du code mis dans votre bloc note.

Si vous valider et publier votre template vous devriez obtenir ceci -> Ceci

Bien entendu maintenant il faut remettre le Qeel :o, mais le procéder ne donnera pas le même résultat que sur mon exemple, pourquoi? Car c'est à vous de faire votre QEEL à votre guise, j'expliquerais le code après afin de vous faciliter les modifications tout simplement ^^.

Donc prenez votre code dans le bloc note et mettez le à la place de sa:

Code:

<h1>Quoi?</h1>
                Un simple système d'onglet utilisant les technologies:

                <ul>
                    <li>(X)html</li>
                    <li>CSS</li>
                    <li>Javascript</li>
                </ul>

Vous obtenez normalement -> Ceci

Je m'arrêterais la pour le remplissage des onglets mais comme je les dit je vais vous expliquer le code.
]Explication:

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="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Quoi</span>
            <span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui</span>
            <span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>

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

Code:

<div class="contenu_onglet" id="contenu_onglet_quoi">
...
</div>

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

Code:

<span class="onglet_0 onglet" id="comment" onclick="javascript:change_onglet('comment');"> Comment?</span>

après cet ligne:

Code:

<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</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_onglet" id="contenu_onglet_comment">Contenu de l'onglet "Comment?"</div>

après ce code:

Code:

<div class="contenu_onglet" id="contenu_onglet_pourquoi">
                <h1>Pourquoi?</h1>
                Pour simplifier la navigation et la diviser en parties
            </div>

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





Qui dit (X)Html dit aussi CSS bah oui c'est toujours comme ça ^^, et pour ceux qui on quelque connaissance vous aurez surement remarquer que le CSS à été directement inséré dans le code entre les balise "head" mais on va le retiré et le placer directement dans notre feuille de style CSS du forum.
Donc faites un couper/coller ou un copier/coller (mais penser toujours à retire le code sinon il apparaîtra deux fois et sa peut tout fausser) du css:

Code:

.onglet
        {
                display:inline-block;
                margin-left:3px;
                margin-right:3px;
                padding:3px;
                border:1px solid black;
                cursor:pointer;
        }
        .onglet_0
        {
                background:#bbbbbb;
                border-bottom:1px solid black;
        }
        .onglet_1
        {
                background:#dddddd;
                border-bottom:0px solid black;
                padding-bottom:4px;
        }
        .contenu_onglet
        {
                background-color:#dddddd;
                border:1px solid black;
                margin-top:-1px;
                padding:5px;
                display:none;
        }
        ul
        {
                margin-top:0px;
                margin-bottom:0px;
                margin-left:-10px
        }
        h1
        {
                margin:0px;
                padding:0px;
        }

Et placer le dans Affichage -> Couleur -> Feuille de style CSS.

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

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

Code:

.onglet

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

Code:

.onglet_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:

.onglet_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_onglet

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

Concernant les deux dernières classe si vous avez retirer les balise "ul" et "h1" du code de base, vous pouvez aussi retirer le CSS.


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.
On se revoit donc pour un prochain tutoriel qui ne devrait tarder... è_é


Autre tutoriel utile:

Qui est en ligne (groupe)