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

    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
    Izaya Orihara
    FémininAge : 16Messages : 105

    le Sam 23 Mai 2015 - 15:54

    Merci du partage !
    avatar
    Akina-chan
    FémininAge : 24Messages : 138

    le Jeu 28 Mai 2015 - 20:15

    merci :)
    avatar
    GoldenGrams
    FémininAge : 17Messages : 35

    le Lun 13 Juil 2015 - 11:52

    Très joli, merci. ~
    avatar
    Ayame
    FémininAge : 22Messages : 53

    le Mar 14 Juil 2015 - 23:08

    Merci~
    avatar
    Maxine Evans
    FémininAge : 23Messages : 94

    le Ven 24 Juil 2015 - 16:06

    Merci
    avatar
    M.O
    MasculinAge : 28Messages : 51

    le Mar 28 Juil 2015 - 2:01

    Merci!
    avatar
    Sybline
    FémininAge : 31Messages : 22

    le Lun 3 Aoû 2015 - 12:58

    merci du partage ^^
    avatar
    Geci
    FémininAge : 26Messages : 68

    le Jeu 27 Aoû 2015 - 19:14

    Merci à toi ^^



    avatar
    Kelalin
    FémininAge : 25Messages : 1871

    le Jeu 27 Aoû 2015 - 19:17

    Merci du partage ! (/ ̄(エ) ̄)/
    avatar
    Capouccino
    FémininAge : 20Messages : 175

    le Dim 6 Sep 2015 - 12:10

    Merkiiii Very Happy



    "Espérer l'inespérable c'est croire en l'impossible."
    avatar
    v-r0
    FémininAge : 26Messages : 39

    le Dim 6 Sep 2015 - 21:13

    Superbe! :)
    avatar
    Atomixy
    MasculinAge : 21Messages : 28

    le Jeu 10 Sep 2015 - 18:09

    Thank's ^^
    sébastien
    MasculinAge : 35Messages : 635

    le Ven 16 Oct 2015 - 12:49

    Merci



    avatar
    Ifreann
    FémininAge : 24Messages : 48

    le Jeu 22 Oct 2015 - 17:32

    Meurchi !
    avatar
    Loukoum
    FémininAge : 24Messages : 835

    le Dim 8 Nov 2015 - 10:32

    Merci pour le partage =D



    avatar
    Sparryx
    MasculinAge : 16Messages : 71

    le Mar 10 Nov 2015 - 17:55

    Merci
    avatar
    Bouffe Tout
    MasculinAge : 26Messages : 17

    le Ven 13 Nov 2015 - 15:06

    Merci je tente! Very Happy
    avatar
    Luirio
    MasculinAge : 27Messages : 153

    le Mer 18 Nov 2015 - 16:48

    Super merci! ^^
    avatar
    Luirio
    MasculinAge : 27Messages : 153

    le Mer 18 Nov 2015 - 17:03

    Par contre un truc dans ton code: Évite a tout prix de mettre des sauts de ligne inutile dans ton code car on a pas un nombre de ligne infini. Je l'ai appris a mes dépends.
    avatar
    Spring
    FémininAge : 16Messages : 113

    le Ven 20 Nov 2015 - 18:47

    J'adore merci



    avatar
    naah
    MasculinAge : 24Messages : 79

    le Ven 20 Nov 2015 - 21:11

    Super beau !
    avatar
    witm
    FémininAge : 24Messages : 51

    le Sam 12 Déc 2015 - 15:03

    merci :heart:
    avatar
    Shaolan
    MasculinAge : 26Messages : 107

    le Mar 15 Déc 2015 - 19:29

    merci beaucoup
    avatar
    Lulus
    FémininAge : 27Messages : 143

    le Dim 3 Jan 2016 - 12:01

    merci :)
    avatar
    SunshineD
    FémininAge : 28Messages : 113

    le Lun 25 Jan 2016 - 22:40

    Merci du partage <3
    Contenu sponsorisé


      La date/heure actuelle est Sam 26 Mai 2018 - 12:02