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 : 9757

    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
    Invité

    le Sam 28 Jan 2017 - 19:32

    Merci
    avatar
    Giovale
    MasculinAge : 27Messages : 16

    le Sam 4 Fév 2017 - 15:44

    Merci Very Happy
    avatar
    Envola
    FémininAge : 27Messages : 56

    le Lun 13 Fév 2017 - 19:26

    Merci pour ce qeel !
    avatar
    Doo
    FémininAge : 27Messages : 42

    le Dim 19 Fév 2017 - 2:31

    merci!
    avatar
    Ailla
    FémininAge : 19Messages : 30

    le Mar 21 Fév 2017 - 22:17

    Merci pour le partage ! Very Happy
    avatar
    Necrolythia
    FémininAge : 31Messages : 547

    le Dim 5 Mar 2017 - 20:01

    Merci :) je l'adore



    avatar
    Ghost of Darkness
    FémininAge : 24Messages : 43

    le Lun 6 Mar 2017 - 18:43

    tellement beau ♥



    Ghost of Darkness
    All my friends are heathens, take it slow. Wait for them to ask you who you know. Please dont make any sudden moves. You don't know the half od the abuse.


    avatar
    Lilandrile
    FémininAge : 32Messages : 58

    le Lun 10 Avr 2017 - 18:54

    Merci pour le partage :)
    avatar
    Toxinou
    FémininAge : 27Messages : 39

    le Sam 15 Avr 2017 - 14:51

    Merci pour le partage :)
    avatar
    Carasama
    FémininAge : 23Messages : 95

    le Sam 6 Mai 2017 - 6:21

    merci
    avatar
    John:
    MasculinAge : 25Messages : 56

    le Mar 30 Mai 2017 - 8:49

    mrc
    avatar
    Gieve
    FémininAge : 29Messages : 104

    le Mar 4 Juil 2017 - 15:43

    Merci du partage **
    avatar
    Joshua Upshur
    MasculinAge : 16Messages : 42

    le Sam 22 Juil 2017 - 2:37

    Pas mal !



           
    avatar
    abysean
    MasculinAge : 23Messages : 33

    le Lun 21 Aoû 2017 - 0:47

    Merci
    avatar
    Doriand
    MasculinAge : 27Messages : 90

    le Mar 3 Oct 2017 - 23:44

    merci
    avatar
    Lexucio
    MasculinAge : 24Messages : 33

    le Mer 18 Oct 2017 - 20:23

    Merci beaucoup
    avatar
    Plumy
    FémininAge : 27Messages : 33

    le Jeu 23 Nov 2017 - 22:48

    Merci
    avatar
    2BME
    MasculinAge : 30Messages : 8

    le Dim 14 Jan 2018 - 7:44

    Merci! Super!
    avatar
    Cigale30
    FémininAge : 19Messages : 55

    le Mer 24 Jan 2018 - 16:33

    merci ! :-D
    avatar
    Miikan
    FémininAge : 24Messages : 23

    le Jeu 8 Fév 2018 - 20:28

    merci du partage :)
    avatar
    Utahime
    FémininAge : 25Messages : 76

    le Sam 10 Fév 2018 - 23:04

    Merci! :)
    avatar
    TWISTY.RAIN
    FémininAge : 22Messages : 63

    le Lun 19 Mar 2018 - 16:01

    Merci :) !



    avatar
    Ylkhana
    FémininAge : 25Messages : 319

    le Jeu 22 Mar 2018 - 9:07

    Merci !
    avatar
    LizzieWeir
    FémininAge : 28Messages : 14

    le Dim 15 Avr 2018 - 18:48

    Encore merci Halloween :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 16 Déc 2018 - 17:59