AccueilDernières imagesRechercherS'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.

Le Deal du moment : -67%
Carte Fnac+ à 4,99€ au lieu de 14,99€ ...
Voir le deal
4.99 €

    Qeel en jeu d'onglets

    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    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 ^^

    Azorus
    Azorus
    MasculinAge : 23Messages : 35

    Dim 26 Avr 2015 - 21:52

    Merci pour cette belle QEEL



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


    GFX by Aleph'
    avatar
    Hane
    FémininAge : 26Messages : 70

    Mar 23 Juin 2015 - 22:31

    merci beaucoup pour votre bon travail!
    Rimaï J. Godwin
    Rimaï J. Godwin
    MasculinAge : 28Messages : 93

    Sam 27 Juin 2015 - 16:16

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

    Mar 7 Juil 2015 - 23:55

    Merci !
    Argy
    Argy
    FémininAge : 26Messages : 98

    Mar 14 Juil 2015 - 12:59

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

    Mer 22 Juil 2015 - 16:51

    Merci =)
    Celuna
    Celuna
    FémininAge : 34Messages : 133

    Sam 1 Aoû 2015 - 12:29

    Merci pour ce magnifique partage... Il a de l'originalité.
    Zoé
    Zoé
    FémininAge : 25Messages : 189

    Ven 18 Sep 2015 - 11:45

    merci :3



    Qeel en jeu d'onglets 274643signaaaa
    Madras
    Madras
    FémininAge : 39Messages : 285

    Sam 19 Sep 2015 - 7:54

    Merci
    Sylfaen
    Sylfaen
    FémininAge : 26Messages : 70

    Sam 19 Sep 2015 - 21:47

    Merci ^-^
    Anonymous
    Invité

    Dim 20 Sep 2015 - 22:33

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

    Jeu 24 Sep 2015 - 20:32

    Merci ! >w<
    Louchita
    Louchita
    FémininAge : 31Messages : 132

    Ven 25 Sep 2015 - 21:20

    Merci à toi :)



    Qeel en jeu d'onglets 1466018025-loulousign
    Moro-PM
    Moro-PM
    FémininAge : 22Messages : 149

    Sam 26 Sep 2015 - 18:32

    Merci !
    Kraiyz
    Kraiyz
    MasculinAge : 27Messages : 29

    Dim 27 Sep 2015 - 15:56

    Jolie travail !
    Neyokan
    Neyokan
    FémininAge : 27Messages : 43

    Mer 30 Sep 2015 - 17:55

    Merci!
    Tanchi
    Tanchi
    Age : 33Messages : 373

    Jeu 1 Oct 2015 - 21:29

    Merci du partage x)



    Qeel en jeu d'onglets 335854plop
    Loukoum
    Loukoum
    FémininAge : 30Messages : 1502

    Dim 8 Nov 2015 - 10:26

    Merci pour le partage =D



    Yumi-chan
    Yumi-chan
    FémininAge : 31Messages : 67

    Dim 29 Nov 2015 - 21:37

    Merci. ♥ Very Happy
    Sparryx
    Sparryx
    MasculinAge : 22Messages : 71

    Lun 30 Nov 2015 - 7:50

    Merci =)
    Pelezinho
    Pelezinho
    MasculinAge : 25Messages : 91

    Dim 6 Déc 2015 - 21:58

    Merci jack1



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

    Dim 20 Déc 2015 - 11:53

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

    Sam 26 Déc 2015 - 15:02

    Merci.
    VincentWeever
    VincentWeever
    MasculinAge : 27Messages : 57

    Sam 23 Jan 2016 - 15:14

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 11:40