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 :
Code promo Nike : -25% dès 50€ ...
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 ^^

    lorenzo27
    lorenzo27
    MasculinAge : 50Messages : 5

    Mer 26 Oct 2016 - 13:51

    merci
    Darouine Lius
    Darouine Lius
    MasculinAge : 35Messages : 77

    Jeu 3 Nov 2016 - 14:22

    merci
    Bryan1997
    Bryan1997
    MasculinAge : 27Messages : 51

    Ven 4 Nov 2016 - 1:29

    merci
    Yelonia
    Yelonia
    FémininAge : 30Messages : 46

    Jeu 17 Nov 2016 - 9:05

    Merciiii :)
    Evil Queen 4ever
    Evil Queen 4ever
    FémininAge : 32Messages : 64

    Dim 27 Nov 2016 - 4:48

    Merci du partage Very Happy




    Qeel avec onglets pour les groupes - Page 3 478753Chantal
    Likilou
    Likilou
    MasculinAge : 31Messages : 309

    Ven 3 Fév 2017 - 22:21

    les liens ne marchent plus :3



    Qeel avec onglets pour les groupes - Page 3 707828SignArthur2
    Momiji-chan
    Momiji-chan
    FémininAge : 26Messages : 38

    Ven 10 Mar 2017 - 13:54

    Merci miss :)
    Mimbulus Mimbletonia
    Mimbulus Mimbletonia
    FémininAge : 33Messages : 14

    Mar 18 Avr 2017 - 18:05

    Merci cheers
    luxury67
    luxury67
    FémininAge : 32Messages : 20

    Mar 18 Avr 2017 - 20:25

    Merci :aww:
    Suna
    Suna
    FémininAge : 19Messages : 33

    Mer 3 Mai 2017 - 20:17

    Merci beaucoup du partage



    Salut à tous, mon nom est Suna en rapport avec Suna (un village de Ninja dans Naruto)
    Mes surnoms son Gaga, Erza et Gaara. j'aime beaucoup les mangas et en particulier Fairy Tail. Je suis fort en rpg, mnof e, codage et nulle à chier en graphisme.

    Qeel avec onglets pour les groupes - Page 3 Url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwi90cbPor_SAhXHiRoKHe5MAGIQjRwIBw&url=https%3A%2F%2Ffr.pinterest.com%2Fpin%2F286049013812562888%2F&bvm=bv.148747831,d
    Tatia38
    Tatia38
    FémininAge : 35Messages : 318

    Mer 17 Mai 2017 - 14:19

    Merci ♥
    Wonderwall
    Wonderwall
    FémininAge : 30Messages : 20

    Jeu 18 Mai 2017 - 20:28

    Merci ! :)
    Raynold
    Raynold
    MasculinAge : 25Messages : 39

    Dim 28 Mai 2017 - 20:51

    Mrc
    John:
    John:
    MasculinAge : 31Messages : 56

    Mar 30 Mai 2017 - 8:32

    mrc
    Gieve
    Gieve
    FémininAge : 35Messages : 123

    Mar 4 Juil 2017 - 15:49

    Merci beaucoup **
    Gieve
    Gieve
    FémininAge : 35Messages : 123

    Mar 4 Juil 2017 - 15:50

    Merci beaucoup **
    Gieve
    Gieve
    FémininAge : 35Messages : 123

    Mar 4 Juil 2017 - 15:51

    Merci beaucoup **
    Gieve
    Gieve
    FémininAge : 35Messages : 123

    Mar 4 Juil 2017 - 15:52

    Merci beaucoup **
    Kaushui
    Kaushui
    FémininAge : 26Messages : 19

    Mar 11 Juil 2017 - 15:03

    Bonjour !
    Les liens vers les aperçus ne fonctionnent plus... :/
    Plumy
    Plumy
    FémininAge : 33Messages : 35

    Jeu 13 Juil 2017 - 22:34

    Merci beaucoup pour le partage Very Happy
    Lilice
    Lilice
    FémininAge : 32Messages : 115

    Lun 2 Oct 2017 - 18:51

    Merci
    Mirony
    Mirony
    FémininAge : 37Messages : 44

    Mer 25 Oct 2017 - 21:48

    C'est très jolie j'adore merci pour le partage! Wink
    Anonymous
    Invité

    Jeu 23 Nov 2017 - 1:33

    Merci du partage Very Happy
    Nyls
    Nyls
    MasculinAge : 23Messages : 28

    Dim 28 Jan 2018 - 21:37

    MERCI !
    Destan
    Destan
    MasculinAge : 46Messages : 38

    Jeu 15 Mar 2018 - 13:45

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 10:15