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.

-16%
Le deal à ne pas rater :
Friteuse sans huile NINJA Foodi Dual Zone 7,6 L 2400W à 135€
135.01 € 159.99 €
Voir le deal

    Qeel avec onglets pour les groupes

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

    Dim 15 Mar 2015 - 18:58

    Rappel du premier message :


    Qeel avec onglets pour les groupes


    Suite à une demande d'Airore voici un Qeel.

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

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


    Et le code :
    Dans Template index-body, remplacer ça (ligne 42 du template de base) :
    Code:
    <!-- BEGIN disable_viewonline -->

       <!-- BEGIN switch_viewonline_link -->
       <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
       <!-- END switch_viewonline_link -->

       <!-- BEGIN switch_viewonline_nolink -->
       <div class="h3">{L_WHO_IS_ONLINE}</div>
       <!-- END switch_viewonline_nolink -->

    <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
    <p>{TOTAL_USERS_ONLINE}<br />
    {RECORD_USERS}

    <br />
    {LOGGED_IN_USER_LIST}

    {L_ONLINE_USERS}
    {L_CONNECTED_MEMBERS}<br />
    {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

    <br />
    <em>{LEGEND} : {GROUP_LEGEND}</em>

    </p>
    <div class="clear"></div>

       <!-- BEGIN switch_statistics_link -->
       <div class="h3"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
       <!-- END switch_statistics_link -->

       <!-- BEGIN switch_statistics_nolink -->
       <div class="h3">{L_STATISTICS}</div>
       <!-- END switch_statistics_nolink -->

    <p class="page-bottom">
    {TOTAL_POSTS}
    </p>
    <p class="page-bottom">
    {TOTAL_USERS}
    </p>
    <p class="page-bottom">
    {NEWEST_USER}
    </p>
       <!-- BEGIN switch_chatbox_activate -->
       <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
       <div class="page-bottom">
       {TOTAL_CHATTERS_ONLINE} :&nbsp;
       {CHATTERS_LIST}<br />
       </div>
          <!-- BEGIN switch_chatbox_popup -->
          <div id="chatbox_popup"></div>
          <script type="text/javascript">
          insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
          </script>
          <!-- END switch_chatbox_popup -->
       <!-- END switch_chatbox_activate -->
    <!-- END disable_viewonline -->

    Par :
    Code:
    <!-- BEGIN disable_viewonline -->
    <div class="qeel_fond">
       <!-- BEGIN switch_viewonline_link -->
       <div class="qeel_titre"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="https://i.imgur.com/izIhHns.jpg" /></a></div>
       <!-- END switch_viewonline_link -->

       <!-- BEGIN switch_viewonline_nolink -->
       <div class="qeel_titre"><img src="https://i.imgur.com/izIhHns.jpg" /></div>
       <!-- END switch_viewonline_nolink -->

    <div class="qeel_bloc01">
    {TOTAL_USERS_ONLINE} <br />
    {RECORD_USERS}
    <br />
    {L_ONLINE_USERS}
    <br />
    {TOTAL_POSTS} <br />
    {TOTAL_USERS} <br />
    {NEWEST_USER} <br />
    {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
    </div><div class="qeel_bloc04">
    <div class="qeel_groupe1"><div class="infobulle1">DESCRIPTION DU GROUPE</div></div>
    <div class="qeel_groupe1"><div class="infobulle1" style="top: -25px;">DESCRIPTION DU GROUPE</div></div>
    <div class="qeel_groupe1"><div class="infobulle1" style="top: -70px;">DESCRIPTION DU GROUPE</div></div>
    </div><div class="qeel_bloc02"><div class="qeel_case_grp">
    </div>
    <div class="qeel_bloc03"><div class="qeel_credit"><a href="http://www.never-utopia.com">A-Lice | Never-Utopia</a> pour le QEEL</div><img src="https://i.imgur.com/izIhHns.jpg" alt="crédit" /></div>
    </div><div class="qeel_bloc04">
    <div class="qeel_groupe2"><div class="infobulle2">DESCRIPTION DU GROUPE</div></div>
    <div class="qeel_groupe2"><div class="infobulle2" style="top: -25px;">DESCRIPTION DU GROUPE</div></div>
    <div class="qeel_groupe2"><div class="infobulle2" style="top: -70px;">DESCRIPTION DU GROUPE</div></div>
    </div><div class="qeel_bloc01" style="top: -245px";>
    {L_CONNECTED_MEMBERS}
    </div>

    </div>
    <!-- END disable_viewonline -->


    CSS :
    Code:
    /************QEEL par A-Lice*************/
    .qeel_titre {
    font-size: 40px;
    font-family: XX;
    color: black;
    text-align: center;
    height: 60px;
    }

    .qeel_fond {
    width: 790px;
    height: 340px;
    background: silver;
    margin: auto;
    padding: 5px;
    }

    .qeel_bloc01 {
    width: 180px;
    height: 260px;
    background: dimgray;
    padding: 10px;
    display: inline-block;
    color: white;
    font-size: 12px;
    position: relative;
    z-index: 20;
    top: -105px;
    }

    .qeel_bloc02 {
    /*infobulle*/
    display: inline-block;
    width: 330px;
    }

    div.qeel_bloc03 {
    width: 320px;
    height: 150px;
    overflow: hidden;
    margin: auto;
    background: dimgray;
    }

    .qeel_bloc03 img {
    width: 320px;
    height: 150px;
    position: relative;
    bottom: 150px;
    display: inline-block;
    transition: all 0.5s;
    }

    .qeel_bloc03:hover img {
    bottom: 300px;
    transition: all 0.5s;
    }

    .qeel_credit {
    width: 300px;
    height: 130px;
    padding: 10px;
    text-align: justify;
    color: white;
    font-size: 11px;
    }

    .qeel_bloc04 {
    width: 30px;
    height: 260px;
    display: inline-block;
    }

    .qeel_case_grp {
    width: 310px;
    height: 120px;
    padding: 5px;
    margin-left: 5px;
    }

    /**onglets**/

    .qeel_groupe1 {
    position: relative;
    height: 40px;
    width: 40px;
    border-radius: 50px;
    overflow: visible;
    margin-left: -20px;
    background: black;
    margin-bottom: 5px;
    top: -15px;
    }

    .qeel_groupe1 .infobulle1 {
    position: absolute;
    left: 60px;
    width: 310px;
    height: 100px;
    color: white;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    top: 20px;
    }

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

    .qeel_groupe2 {
    position: relative;
    height: 40px;
    width: 40px;
    border-radius: 50px;
    overflow: visible;
    margin-left: 10px;
    background: black;
    margin-bottom: 5px;
    top: -15px;
    }

    .qeel_groupe2 .infobulle2 {
    position: absolute;
    left: -330px;
    width: 310px;
    height: 100px;
    color: white;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    top: 20px;
    }

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

    /**fin onglets**/

    /************Fin QEEL par A-Lice************/

    Remarques : -Image pour le titre de 300px de largeur pour 80px de hauteur.
    -Image pour les crédits de 320px de largeur pour 150px de hauteur.

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

    Yukie
    Yukie
    FémininAge : 25Messages : 30

    Jeu 13 Aoû 2015 - 13:31

    Merci !
    Anonymous
    Invité

    Jeu 13 Aoû 2015 - 21:23

    Merci ! (☆^O^☆)
    Romann
    Romann
    FémininAge : 30Messages : 183

    Dim 16 Aoû 2015 - 15:54

    Merci ^^



    Qeel avec onglets pour les groupes - Page 2 Unicor11
    Zibeline
    Zibeline
    FémininAge : 39Messages : 84

    Ven 28 Aoû 2015 - 19:12

    joli :friends:
    Toby P. Nolan
    Toby P. Nolan
    FémininAge : 25Messages : 38

    Dim 30 Aoû 2015 - 14:25

    Merci !
    Maxine Evans
    Maxine Evans
    FémininAge : 30Messages : 94

    Dim 30 Aoû 2015 - 14:51

    merci
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Sam 12 Sep 2015 - 13:36

    Merci pour voir :) très bon week-end a vous tous :)
    Patricia



    Patricia :)
    Missy 26
    Missy 26
    FémininAge : 35Messages : 60

    Lun 28 Sep 2015 - 15:11

    thanks
    Toxic Babylone
    Toxic Babylone
    FémininAge : 34Messages : 16

    Lun 28 Sep 2015 - 18:51

    Un grand merci à toi !!! ♥
    Kovu
    Kovu
    FémininAge : 23Messages : 257

    Mar 27 Oct 2015 - 9:32

    Merci !
    Devil.
    Devil.
    FémininAge : 27Messages : 58

    Jeu 29 Oct 2015 - 11:30

    Merci !
    .sapphire
    .sapphire
    FémininAge : 30Messages : 39

    Mer 11 Nov 2015 - 14:32

    Merci!
    AlexeB
    AlexeB
    FémininAge : 29Messages : 165

    Mer 11 Nov 2015 - 22:28

    Merci pour le partage, c'est simple, mais très joli!
    avatar
    Nal Souclade
    MasculinAge : 25Messages : 167

    Sam 21 Nov 2015 - 19:39

    Magnifique ! Merci beaucoup !
    Mushu
    Mushu
    FémininAge : 27Messages : 68

    Jeu 26 Nov 2015 - 21:23

    Merci !
    ChupabracaRope
    ChupabracaRope
    FémininAge : 22Messages : 40

    Ven 4 Déc 2015 - 21:38

    Merci ♥
    Shide
    Shide
    FémininAge : 35Messages : 60

    Mar 23 Fév 2016 - 16:42

    merci
    LegendsOfToday
    LegendsOfToday
    FémininAge : 28Messages : 78

    Mer 23 Mar 2016 - 21:27

    Merci! :)
    Madras
    Madras
    FémininAge : 39Messages : 285

    Mar 26 Avr 2016 - 8:06

    Merci du partage
    damon w salvatore
    damon w salvatore
    FémininAge : 36Messages : 109

    Sam 21 Mai 2016 - 21:44

    merci
    Deed01
    Deed01
    MasculinAge : 47Messages : 343

    Dim 29 Mai 2016 - 8:48

    thanks
    Priss.
    Priss.
    FémininAge : 31Messages : 22

    Lun 1 Aoû 2016 - 19:14

    Merci du partage :)



    Qeel avec onglets pour les groupes - Page 2 BElMac3
    Anonymous
    Invité

    Mer 17 Aoû 2016 - 21:53

    Merci pour ce magnifique QEEL !
    Yasashi
    Yasashi
    FémininAge : 29Messages : 77

    Dim 4 Sep 2016 - 14:40

    Joli, merci :)
    Likau
    Likau
    MasculinAge : 30Messages : 353

    Sam 22 Oct 2016 - 18:13

    Merci A-Lice :)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 9:34