AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


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

    Partagez
    avatar
    Sui'
    MasculinAge : 26Messages : 1865

    le Mar 21 Sep 2010 - 18:54

    #html #css #qeel #onglets #phpBB2 #auteur_Sui


    Bouh à vous !!!

    Enfin sur vos écran!! Le tutoriel du QEEL (= Qui est en ligne) en onglet, ayant chercher pendant un moment ce moyen que je voyais sur des forum et ne trouvant pas de tutoriel dessus, bah je le partage :p.
    Bonne lecture Wink.

    Niveau: ]Moyen]Aperçu: IciTuto by Sui'

    Avant de vous lancez dans ce tutoriel, il vous est conseillez de connaitre les base du CSS et XHTML sans ça vous risquerez d'avoir du mal dans la modification de votre code, je vous conseil de faire un petit passage sur le site de Riku -> ICI et de prendre un peu de votre temps à lire ces cours, merci Wink.
    |!| U petit merci est le bienvenue !



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


    Partie 1
    Template


    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?




    Partie 2
    Le CSS


    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 Wink.

    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)
    A bientôt Wink.

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Sui' le Mer 15 Juin 2011 - 13:30, édité 5 fois



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    avatar
    ●Yosumi●
    MasculinAge : 22Messages : 3810

    le Mar 21 Sep 2010 - 20:14

    Yess !!
    Le tuto que je voulait ! Very Happy

    J'allais te le demander et le voila

    Merciiiiiii !!



    » ● l'Art de l'imagination ... «

    « Signature By Me' »
    ~ ♥ Mes Créations ! ♥ ~
    ♪ Fan de : Bang
    ♣ Navigateur du Phenix ! ♣
    avatar
    Kuro'
    MasculinAge : 24Messages : 438

    le Jeu 23 Sep 2010 - 7:30

    Merkiii.

    Je l'attendais, mais j'ai pas été patient, tant pis è_é




    Merci Didi-senpai ! :)
    avatar
    Bang
    MasculinAge : 22Messages : 2434

    le Jeu 23 Sep 2010 - 17:44

    Je connais déjà, mais je veux voir *p*






    OHANA
    KanyeWest
    MasculinAge : 27Messages : 137

    le Jeu 23 Sep 2010 - 17:53

    merciii
    avatar
    Lys Draw
    FémininAge : 24Messages : 1992

    le Sam 25 Sep 2010 - 15:28

    Merci, ça a l'air intéressant^^




    Merci Narja pour cette belle sign'! :)
    avatar
    Hiruma Yoichi
    MasculinAge : 20Messages : 110

    le Sam 25 Sep 2010 - 16:46

    Merci Beaucoup Sui'
    avatar
    Mitsuomi Takayanagi
    Age : 26Messages : 76

    le Sam 25 Sep 2010 - 18:39

    Merci pour le tuto =)



    avatar
    tintin2605
    MasculinAge : 24Messages : 2

    le Dim 26 Sep 2010 - 13:30

      Merci pour le tutoriel =D
    avatar
    Mohican
    FémininAge : 21Messages : 89

    le Dim 26 Sep 2010 - 15:37

    Waaaaaa !
    Veux voir !
    *o* Meuchiiii
    avatar
    Potteresque
    FémininAge : 23Messages : 23

    le Dim 26 Sep 2010 - 21:41

    Je veux voir Very Happy
    avatar
    Pab
    MasculinAge : 25Messages : 286

    le Lun 27 Sep 2010 - 16:18

    MMh, intéressant !
    avatar
    ZN ~ Anko
    MasculinAge : 28Messages : 357

    le Mer 29 Sep 2010 - 14:47

    (Curieux) Merci pour le partage Wink.




    Thanks to Sui'

    avatar
    Edwin
    FémininAge : 19Messages : 103

    le Mer 29 Sep 2010 - 19:46

    Oh, super! *$_$
    avatar
    lola10
    FémininAge : 29Messages : 11

    le Jeu 30 Sep 2010 - 7:00

    Merci, ça a l'air intéressant^^
    avatar
    Sui'
    MasculinAge : 26Messages : 1865

    le Jeu 30 Sep 2010 - 10:47

    N'hésiter pas à poser des questions si des problèmes surviennent Wink.

    Je précise également qu'il est déconseiller d'utiliser le code de base des onglets pour sa page d'accueil, des bug subviendront entre la page d'accueil et le QEEL.

    Un tutoriel arrive avec un autre script pour la page d'accueil.

    Merci



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    avatar
    Vertige
    FémininAge : 25Messages : 37

    le Sam 2 Oct 2010 - 15:23

    Je veux voir !
    avatar
    Mugi'
    MasculinAge : 28Messages : 26

    le Sam 2 Oct 2010 - 18:34

    Je veux voir aussi !!!
    avatar
    Ziktaon
    MasculinAge : 25Messages : 843

    le Lun 4 Oct 2010 - 11:47

    Hey merci sui', je cherchais justement un code comme ca Very Happy






    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    avatar
    Death the Kid
    MasculinAge : 24Messages : 3

    le Lun 4 Oct 2010 - 16:35

    Shocked intéressant !
    avatar
    Sui'
    MasculinAge : 26Messages : 1865

    le Lun 4 Oct 2010 - 16:45

    Death the Kid -> Go présentation x).

    Zik -> De rien ^^



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    avatar
    Ziktaon
    MasculinAge : 25Messages : 843

    le Lun 4 Oct 2010 - 19:10

    Mais j'ai un problème, mdr je rentre de cours 3 h d'informatique peut être a cause de ca. Mais j'essaie de faire un truc du genre comme ca :

    http://narutosensouv3.createforum.eu/

    Voir QEEL, j'essaie et je ré-essaie mais j'arrive pas, tu peux m'aider ? Ou peut être quelqu'un d'autre. Merci encore.






    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    avatar
    Sui'
    MasculinAge : 26Messages : 1865

    le Lun 4 Oct 2010 - 19:23

    J'évite d'aider pour avoir la même chose que certain forum, cependant je peux t'y guider.

    Pour mettre les groupes dans le troisième onglets il te suffit de suivre le tutoriel de Yujoba et de mettre le code dans la partie qui concerne le troisième onglet bien sur x).

    Pour les onglets un et deux il te suffit de trouver les variables du QEEL que tu pourrais trouver ici:

    -> Clik' <-




    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    avatar
    Ziktaon
    MasculinAge : 25Messages : 843

    le Lun 4 Oct 2010 - 19:36

    Ah merci tout d'abord, je voulais juste dire l'onglet deuxième. Enfin ou il y avait juste les personnes connecter.
    Mais merci quand même ^^.






    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    avatar
    Sugar Boy
    MasculinAge : 26Messages : 616

    le Mar 5 Oct 2010 - 17:25

    Merci (:



    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 7:04