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.


    Qeel en jeu d'onglets

    Partagez
    avatar
    A-Lice
    FémininAge : 24Messages : 4939

    le Mer 22 Avr 2015 - 22:09


    Qeel en jeu d'onglets


    Suite à une demande de Dooh-Nem voici un QEEL avec un système d'onglet pour les statistiques et les groupes.

    Je précise que l'arrière plan rose correspond à mon forum.

    HTML & CSS ~ Voici donc un aperçu : www et au passage de la souris ~ phpBB2


    Et le code :
    Template Index_body

    Chercher ligne 173 et supprimer tout ce qu'il y a entre ces balises :
    Code:
    <!-- BEGIN disable_viewonline -->
    <!-- END disable_viewonline -->

    Puis coller le code à la ligne 173 :
    Code:
    <!-- BEGIN disable_viewonline -->
    <div class="QEEL_fond">
    <script type="text/javascript">
            //<!--
                    function change_onglet(bouya)
                    {
                            document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                            document.getElementById('onglet_'+bouya).className = 'onglet_1 onglet';
                            document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                            document.getElementById('contenu_onglet_'+bouya).style.display = 'block';
                            anc_onglet = bouya;
                    }
            //-->
    </script><div class="onglet_0 onglet" id="onglet_un" onmouseover="javascript:change_onglet('un');">Connectés</div><div class="onglet_0 onglet" id="onglet_deux" onmouseover="javascript:change_onglet('deux');">Statistiques</div><div class="onglet_0 onglet" id="onglet_trois" onmouseover="javascript:change_onglet('trois');">Crédits</div>
    <div class="contenu_onglet" id="contenu_onglet_un">
       {TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}
    </div>
    <div class="contenu_onglet" id="contenu_onglet_deux">
          {TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}<br />
       <table class="transparent">{L_CONNECTED_MEMBERS}
       {L_WHOSBIRTHDAY_TODAY}
       {L_WHOSBIRTHDAY_WEEK}</table>
    </div>
    <div class="contenu_onglet" id="contenu_onglet_trois">
        Contenu du 3ième onglet
    </div><script type="text/javascript">
            //<!--
                    var anc_onglet = 'un';
                    change_onglet(anc_onglet);
            //-->
      </script>
    <div class="QEEL_img"></div>
    <div class="QEEL_titre">Qui est présent dans nos murs ?</div>
    <a href="http://www.never-utopia.com" style="position: absolute; left: 380px; top: 5px; font-size: 11px;">A-Lice | Never-Utopia</a>
    <div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1">DESCRIPTION</div></div><div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1" style="margin-left: -153px;">DESCRIPTION</div></div><div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1" style="margin-left: -306px;">DESCRIPTION</div></div><div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1" style="margin-left: -459px;">DESCRIPTION</div></div><div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1" style="margin-left: -612px;">DESCRIPTION</div></div>

    <div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2">DESCRIPTION</div></div><div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2" style="margin-left: -153px;">DESCRIPTION</div></div><div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2" style="margin-left: -306px;">DESCRIPTION</div></div><div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2" style="margin-left: -459px;">DESCRIPTION</div></div><div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2" style="margin-left: -612px;">DESCRIPTION</div></div>
    </div>
    <!-- END disable_viewonline -->


    CSS :
    Code:
    /************QEEL par A-Lice************/
    .QEEL_fond {
    background: black;
    width: 900px;
    height: 505px;
    position: relative;
    margin: auto;
    }

    .QEEL_img {
    border-radius: 100px;
    width: 180px;
    height: 180px;
    overflow: hidden;
    background: url(http://nsa37.casimages.com/img/2015/04/19/150419065016844471.png);
    position: absolute;
    left: 3em;
    top: 1em;
    }

    .QEEL_titre {
    position: absolute;
    left: 7em;
    top: 3.8em;
    font-family: Arizonia;
    font-size: 40px;
    font-weight: bold;
    color: white;
    }

    .transparent .row1 {
    background-color: transparent;
    }

    .gensmall {
    font-size: 12px;
    }

    /*onglets statistiques*/
    .onglet {
    width: 100px;
    height: 30px;
    padding: 5px;
    }

    .onglet_0 {
    color: silver;
    }

    .onglet_1 {
    color: white;
    }

    #onglet_un {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    transform: rotate(-45deg);
    position: absolute;
    top: 30px;
    }

    #onglet_deux {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    transform: rotate(45deg);
    position: absolute;
    top: 30px;
    left: 170px;
    }

    #onglet_trois {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    position: absolute;
    top: 195px;
    left: 80px;
    }

    .contenu_onglet {
    color: black;
    position: relative;
    width: 380px;
    height: 80px;
    padding: 10px;
    left: 380px;
    top: 3em;
    display: none;
    overflow: auto;
    z-index: 20;
    background: #303030;
    }

    #contenu_onglet_un {
    font-size: 12px;
    text-align: justify;
    }

    #contenu_onglet_deux{
    font-size: 12px;
    text-align: justify;
    }

    #contenu_onglet_trois {
    font-size: 12px;
    text-align: justify;
    }
    /*fin onglets statistiques*/

    /*onglets groupes*/
    .QEEL_groupe1 {
    position: relative;
    height: 80px;
    width: 150px;
    opacity: 0.3;
    display: inline-block;
    top: 130px;
    left: 4em;
    margin-right: 3px;
    }

    .QEEL_groupe1:hover {
    opacity: 1;
    }

    .QEEL_groupe1 .infobulle1 {
    position: absolute;
    left: -2.5em;
    width: 840px;
    height: 90px;
    padding: 5px;
    color: white;
    background: #303030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    top: 84px;
    }

    .QEEL_groupe1:hover .infobulle1 {
    opacity: 1;
    visibility: visible;
    z-index: 100;
    transition: all 0.5s;
    }

    .QEEL_groupe2 {
    position: relative;
    height: 80px;
    width: 150px;
    opacity: 0.3;
    display: inline-block;
    top: 238px;
    left: 4em;
    margin-right: 3px;
    }

    .QEEL_groupe2:hover {
    opacity: 1;
    }

    .QEEL_groupe2 .infobulle2 {
    position: absolute;
    left: -2.5em;
    width: 840px;
    height: 90px;
    padding: 5px;
    color: white;
    background: #303030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    top: -104px;
    }

    .QEEL_groupe2:hover .infobulle2 {
    opacity: 1;
    visibility: visible;
    z-index: 100;
    transition: all 0.5s;
    }
    /*fin onglets groupes*/

    /************Fin QEEL************/

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    S'il y a des problèmes avec ce code, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

    avatar
    Azorus
    MasculinAge : 16Messages : 35

    le Dim 26 Avr 2015 - 21:52

    Merci pour cette belle QEEL



    Seul mon nounours peut me comprendre :cowboy: :gentleman: :bandit:


    GFX by Aleph'
    Hane
    FémininAge : 19Messages : 58

    le Mar 23 Juin 2015 - 22:31

    merci beaucoup pour votre bon travail!
    avatar
    Rimaï J. Godwin
    MasculinAge : 22Messages : 78

    le Sam 27 Juin 2015 - 16:16

    Merci pour le partage A-lice ^^
    avatar
    Anselm
    MasculinAge : 27Messages : 151

    le Mar 7 Juil 2015 - 23:55

    Merci !
    avatar
    Argy
    FémininAge : 19Messages : 98

    le Mar 14 Juil 2015 - 12:59

    Merci beaucoup pour tes codes toujours plus beaux ! ♥ ^w^
    avatar
    Katia Akane
    FémininAge : 27Messages : 37

    le Mer 22 Juil 2015 - 16:51

    Merci =)
    avatar
    Celuna
    FémininAge : 27Messages : 130

    le Sam 1 Aoû 2015 - 12:29

    Merci pour ce magnifique partage... Il a de l'originalité.
    avatar
    Zoé
    FémininAge : 19Messages : 185

    le Ven 18 Sep 2015 - 11:45

    merci :3



    avatar
    Madras
    FémininAge : 33Messages : 279

    le Sam 19 Sep 2015 - 7:54

    Merci
    avatar
    Sylfaen
    FémininAge : 20Messages : 69

    le Sam 19 Sep 2015 - 21:47

    Merci ^-^
    En ligne
    avatar
    Kelalin
    FémininAge : 25Messages : 1871

    le Dim 20 Sep 2015 - 22:33

    Merci (*≧▽≦)
    avatar
    Whit
    FémininAge : 20Messages : 154

    le Jeu 24 Sep 2015 - 20:32

    Merci ! >w<
    avatar
    Louchita
    FémininAge : 25Messages : 131

    le Ven 25 Sep 2015 - 21:20

    Merci à toi :)



    avatar
    Moro-PM
    FémininAge : 15Messages : 149

    le Sam 26 Sep 2015 - 18:32

    Merci !
    avatar
    Kraiyz
    MasculinAge : 21Messages : 29

    le Dim 27 Sep 2015 - 15:56

    Jolie travail !
    avatar
    Neyokan
    FémininAge : 21Messages : 43

    le Mer 30 Sep 2015 - 17:55

    Merci!
    avatar
    Tanchi
    Age : 26Messages : 373

    le Jeu 1 Oct 2015 - 21:29

    Merci du partage x)



    avatar
    Loukoum
    FémininAge : 24Messages : 835

    le Dim 8 Nov 2015 - 10:26

    Merci pour le partage =D



    avatar
    Yumi-chan
    FémininAge : 25Messages : 67

    le Dim 29 Nov 2015 - 21:37

    Merci. ♥ Very Happy
    avatar
    Sparryx
    MasculinAge : 16Messages : 71

    le Lun 30 Nov 2015 - 7:50

    Merci =)
    avatar
    Pelezinho
    MasculinAge : 18Messages : 86

    le Dim 6 Déc 2015 - 21:58

    Merci jack1



    [MERCI D'INTRODUIRE SIGNATURE ORIGINALE ICI]
    avatar
    Yamamura
    FémininAge : 21Messages : 72

    le Dim 20 Déc 2015 - 11:53

    Un très joli QEEL, merci beaucoup pour ton travail !
    avatar
    Lust Caution
    FémininAge : 23Messages : 79

    le Sam 26 Déc 2015 - 15:02

    Merci.
    avatar
    VincentWeever
    MasculinAge : 20Messages : 57

    le Sam 23 Jan 2016 - 15:14

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 24 Mai 2018 - 19:09