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 avec groupes en onglets

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9752

    le Mer 12 Mar 2014 - 13:06

    Rappel du premier message :

    Plop,

    Suite à une demande voici le LS qui en découle.

    Qui est en ligne ?


    Version  phpBB2 ▬ CSS & HTML ▬ Groupes en onglet

    Aperçu ▬ www


    CSS
    Code:
       /***************************** MISE EN FORME QEEL *****************************/
        .groupeonglet {
          display: inline-block;
        }

        .groupeonglet_0 {
          font-size: 12px;
          text-align: center;
          font-family: 'Carrois Gothic SC', sans-serif;
        }
              
       .groupeonglet_1 {
          color: #57949A;
          font-size: 12px;
          text-align: center;
          font-family: 'Carrois Gothic SC', sans-serif;
        }

        .contenu_groupeonglet {
          display: none;
          background-color: #212121;
          width: 250px;
          height: 100px;
          border-radius: 25px 25px 25px 25px;
          border: 4px solid #57949A;
          padding: 15px;
          text-align: center;
          font-size: 11px;
        }

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

        .les24h {
          background-color: #212121;
          width: 250px;
          height: 100px;
          overflow: auto;
          border-radius: 25px 25px 25px 25px;
          border: 4px solid #57949A;
          padding: 15px;
        }

        /***************************** MISE EN FORME QEEL *****************************/



    Template index_body, supprimer ceci :
    Code:
       <!-- BEGIN disable_viewonline -->
        <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
           <tr>
              <td class="catHead" colspan="2" height="28">
              <!-- BEGIN switch_viewonline_link -->
              <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
              <!-- END switch_viewonline_link -->

              <!-- BEGIN switch_viewonline_nolink -->
              <span class="cattitle">{L_WHO_IS_ONLINE}</span>
              <!-- END switch_viewonline_nolink -->
              </td>
           </tr>
           <tr>
              <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
              <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
              {TOTAL_USERS}<br />
              {NEWEST_USER}</span></td>
           </tr>
           <tr>
              <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
              {RECORD_USERS}<br />
              <br />
              {LOGGED_IN_USER_LIST}</span></td>
           </tr>
           {L_CONNECTED_MEMBERS}
           {L_WHOSBIRTHDAY_TODAY}
           {L_WHOSBIRTHDAY_WEEK}
           <tr>
              <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
           </tr>
           <!-- BEGIN switch_chatbox_activate -->
           <tr>
              <td class="row1">
                 <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
                    <!-- BEGIN switch_chatbox_popup -->
                    <div id="chatbox_popup"></div>
                    <script type="text/javascript">
                    //<![CDATA[
                    insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                    //]]>
                    </script>
                    <!-- END switch_chatbox_popup -->
                 </span>
              </td>
           </tr>
           <!-- END switch_chatbox_activate -->
        </table>
        <!-- END disable_viewonline -->



    Que vous remplacez par
    Code:
       <!-- BEGIN disable_viewonline -->
        <center>     <div style="background-image: url('http://i.imgur.com/X89BfoD.jpg'); height: 300px; width: 800px; border-radius: 25px 25px 25px 25px; border: 4px solid #57949A; padding: 20px;"><center><span class="gensmall">{TOTAL_POSTS}.
              {TOTAL_USERS}.<br />
                          {NEWEST_USER}.<br /><br /><div style="width: 400px; height: 150px; overflow: auto; text-align: justify !important;">{LOGGED_IN_USER_LIST}</div></span></center>
          <center><table style="position: relative; top: -5em;" class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
         <tr><td>
            <div style="background-color: #212121; width: 150px; height: 100px; overflow: auto; border-radius: 25px 25px 25px 25px; border: 4px solid #57949A; padding: 15px; text-align: center; font-size: 11px;"><div class="groupeonglets"><div class="fondgroupe">
                    <center><span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe1" onmouseover="javascript:change_groupeonglet('groupe1');">Groupe 1</span><br />
                      <span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe2" onmouseover="javascript:change_groupeonglet('groupe2');">Groupe 2</span><br />
                      <span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe3" onmouseover="javascript:change_groupeonglet('groupe3');">Groupe 3</span><br />
                      <span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe4" onmouseover="javascript:change_groupeonglet('groupe4');">Groupe 4</span><br />
                      <span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe5" onmouseover="javascript:change_groupeonglet('groupe5');">Groupe 5</span><br />
                      </center></div>

            </div></div><script type="text/javascript">
                    //<!--
                            function change_groupeonglet(name)
                            {
                                    document.getElementById('groupeonglet_'+anc_groupeonglet).className = 'groupeonglet_0 groupeonglet';
                                    document.getElementById('groupeonglet_'+name).className = 'groupeonglet_1 groupeonglet';
                                    document.getElementById('contenu_groupeonglet_'+anc_groupeonglet).style.display = 'none';
                                    document.getElementById('contenu_groupeonglet_'+name).style.display = 'block';
                                    anc_groupeonglet = name;
                            }
                    //-->
                    </script><script type="text/javascript">
                    //<!--
                            var anc_groupeonglet = 'groupe1';
                            change_groupeonglet(anc_groupeonglet);
                    //-->
                    </script></td><td>
                    <div class="contenu_groupeonglets">
                    
                     <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe1"><div style="width: 250px; height: 90px; overflow: auto; text-align: justify;">1 Meminit quorum intendebantur haec perfusus adventu et sunt atque exilium absolutum in actique quorum in Paulus sunt catenis quisquam atque squalorem et maestitiam eculei quorum ubi sunt nec sub sunt adventu adventu eculei maestitiam cruore non cruore quorum et nullos tormenta maestitiam sceleste sub nullos is carnifex principis maestitiam exilium multos sceleste et susurro ita carnifex gladii sceleste deiectos tenus ad paene ubi intendebantur quorum coopertos ad atque carnifex multos Constantio non sceleste tenus uncosque movebantur castra plures alii perfusus et movebantur haec plures sceleste multos Paulus intendebantur parabat patratis eculei movebantur enim gladii enim squalorem non tenus sunt facile.</div></div>
                    
       <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe2"><div style="width: 250px; height: 90px; overflow: auto; text-align: justify;">2 Meminit quorum intendebantur haec perfusus adventu et sunt atque exilium absolutum in actique quorum in Paulus sunt catenis quisquam atque squalorem et maestitiam eculei quorum ubi sunt nec sub sunt adventu adventu eculei maestitiam cruore non cruore quorum et nullos tormenta maestitiam sceleste sub nullos is carnifex principis maestitiam exilium multos sceleste et susurro ita carnifex gladii sceleste deiectos tenus ad paene ubi intendebantur quorum coopertos ad atque carnifex multos Constantio non sceleste tenus uncosque movebantur castra plures alii perfusus et movebantur haec plures sceleste multos Paulus intendebantur parabat patratis eculei movebantur enim gladii enim squalorem non tenus sunt facile.</div></div>
                    
       <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe3"><div style="width: 250px; height: 90px; overflow: auto; text-align: justify;">3 Meminit quorum intendebantur haec perfusus adventu et sunt atque exilium absolutum in actique quorum in Paulus sunt catenis quisquam atque squalorem et maestitiam eculei quorum ubi sunt nec sub sunt adventu adventu eculei maestitiam cruore non cruore quorum et nullos tormenta maestitiam sceleste sub nullos is carnifex principis maestitiam exilium multos sceleste et susurro ita carnifex gladii sceleste deiectos tenus ad paene ubi intendebantur quorum coopertos ad atque carnifex multos Constantio non sceleste tenus uncosque movebantur castra plures alii perfusus et movebantur haec plures sceleste multos Paulus intendebantur parabat patratis eculei movebantur enim gladii enim squalorem non tenus sunt facile.</div></div>
        
       <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe4"><div style="width: 250px; height: 90px; overflow: auto; text-align: justify;">4 Meminit quorum intendebantur haec perfusus adventu et sunt atque exilium absolutum in actique quorum in Paulus sunt catenis quisquam atque squalorem et maestitiam eculei quorum ubi sunt nec sub sunt adventu adventu eculei maestitiam cruore non cruore quorum et nullos tormenta maestitiam sceleste sub nullos is carnifex principis maestitiam exilium multos sceleste et susurro ita carnifex gladii sceleste deiectos tenus ad paene ubi intendebantur quorum coopertos ad atque carnifex multos Constantio non sceleste tenus uncosque movebantur castra plures alii perfusus et movebantur haec plures sceleste multos Paulus intendebantur parabat patratis eculei movebantur enim gladii enim squalorem non tenus sunt facile.</div></div>

        <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe5"><div style="width: 250px; height: 90px; overflow: auto; text-align: justify;">5 Meminit quorum intendebantur haec perfusus adventu et sunt atque exilium absolutum in actique quorum in Paulus sunt catenis quisquam atque squalorem et maestitiam eculei quorum ubi sunt nec sub sunt adventu adventu eculei maestitiam cruore non cruore quorum et nullos tormenta maestitiam sceleste sub nullos is carnifex principis maestitiam exilium multos sceleste et susurro ita carnifex gladii sceleste deiectos tenus ad paene ubi intendebantur quorum coopertos ad atque carnifex multos Constantio non sceleste tenus uncosque movebantur castra plures alii perfusus et movebantur haec plures sceleste multos Paulus intendebantur parabat patratis eculei movebantur enim gladii enim squalorem non tenus sunt facile.</div></div>
                    


                   </div>
            <script type="text/javascript">
                    //<!--
                            function change_groupeonglet(name)
                            {
                                    document.getElementById('groupeonglet_'+anc_groupeonglet).className = 'groupeonglet_0 groupeonglet';
                                    document.getElementById('groupeonglet_'+name).className = 'groupeonglet_1 groupeonglet';
                                    document.getElementById('contenu_groupeonglet_'+anc_groupeonglet).style.display = 'none';
                                    document.getElementById('contenu_groupeonglet_'+name).style.display = 'block';
                                    anc_groupeonglet = name;
                            }
                    //-->
                    </script><script type="text/javascript">
                    //<!--
                            var anc_groupeonglet = 'groupe1';
                            change_groupeonglet(anc_groupeonglet);
                    //-->
                    </script></td>
              
           <td><div class="les24h"><table id="kaboum">{L_CONNECTED_MEMBERS}</table></div>
            </td></tr>
            </table></center></div></center><link href='http://fonts.googleapis.com/css?family=Carrois+Gothic+SC' rel='stylesheet' type='text/css'>
        <!-- END disable_viewonline -->




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




    < / Libre service codage >
    avatar
    Illiade
    FémininAge : 25Messages : 21

    le Mer 23 Juil 2014 - 17:26

    Simple et efficace, pile ce que je cherchais *.* Merci beaucoup pour ce partage !
    avatar
    Madras
    FémininAge : 33Messages : 279

    le Sam 26 Juil 2014 - 6:05

    Merci pour ce partage
    avatar
    NaruChan
    FémininAge : 16Messages : 36

    le Mer 30 Juil 2014 - 17:38

    Merci beaucoup, il est génial!
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Mer 30 Juil 2014 - 17:43

    Merci
    avatar
    Freya Lazare
    FémininAge : 31Messages : 112

    le Jeu 31 Juil 2014 - 15:11

    Encore une c'est super ce que tu fais ^^
    avatar
    Ysamar
    FémininAge : 38Messages : 37

    le Ven 1 Aoû 2014 - 17:34

    merci
    avatar
    Percylove
    FémininAge : 23Messages : 256

    le Mar 5 Aoû 2014 - 3:57

    Comme toujours, j'adore tes codes et celui-ci est aussi sublime que tous les autres. Merci!



    avatar
    PLOIM
    FémininAge : 20Messages : 52

    le Mar 5 Aoû 2014 - 9:59

    Merci o/ !
    avatar
    Miss Houpette
    FémininAge : 21Messages : 76

    le Mar 5 Aoû 2014 - 11:12

    Merci, c'est super ! o/
    avatar
    Zhulan
    FémininAge : 20Messages : 25

    le Ven 8 Aoû 2014 - 14:09

    Merci!
    avatar
    Drill'
    FémininAge : 33Messages : 52

    le Dim 10 Aoû 2014 - 10:32

    Merci du partage !!
    avatar
    Daisy Hardman
    FémininAge : 20Messages : 60

    le Dim 10 Aoû 2014 - 14:34

    merci
    avatar
    Lovehurt
    FémininAge : 21Messages : 36

    le Dim 10 Aoû 2014 - 23:14

    Merci du partage :3
    avatar
    Liberty Grim
    FémininAge : 20Messages : 128

    le Lun 11 Aoû 2014 - 21:26

    La classe ! Merci ^^
    avatar
    Cola
    FémininAge : 19Messages : 81

    le Mar 12 Aoû 2014 - 18:26

    Merci



    avatar
    Mushu
    FémininAge : 20Messages : 68

    le Mer 13 Aoû 2014 - 17:41

    Merci du partage (: !
    avatar
    Demoniall
    FémininAge : 17Messages : 74

    le Ven 15 Aoû 2014 - 11:08

    Merci du partage !
    avatar
    wonderfuling
    FémininAge : 18Messages : 26

    le Ven 15 Aoû 2014 - 18:47

    Très joli, merci.
    avatar
    Narcisse
    FémininAge : 103Messages : 21

    le Dim 17 Aoû 2014 - 17:52

    Merci ! :)
    avatar
    Jull421
    FémininAge : 23Messages : 141

    le Sam 23 Aoû 2014 - 1:50

    Merci ♥



    avatar
    Damned
    FémininAge : 16Messages : 109

    le Dim 24 Aoû 2014 - 16:57

    Thanks
    avatar
    demdre
    FémininAge : 23Messages : 24

    le Jeu 28 Aoû 2014 - 13:59

    merci!
    avatar
    Mr Yo
    MasculinAge : 43Messages : 37

    le Dim 31 Aoû 2014 - 15:54

    Simple et sobre...
    Ca va me plaire Very Happy
    avatar
    Ahila
    FémininAge : 24Messages : 107

    le Dim 31 Aoû 2014 - 18:42

    Merci!
    avatar
    Haniwa
    FémininAge : 23Messages : 206

    le Jeu 11 Sep 2014 - 10:52

    Merci
    Contenu sponsorisé


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