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
    Priss.
    FémininAge : 25Messages : 18

    le Sam 21 Juin 2014 - 15:47

    Il est simple et beau (a)



    Crépuscule
    FémininAge : 19Messages : 9

    le Sam 21 Juin 2014 - 18:20

    Merci :3
    avatar
    isKeiko
    FémininAge : 23Messages : 29

    le Sam 21 Juin 2014 - 19:08

    Merci beaucoup Very Happy
    avatar
    Kokoro Korou
    MasculinAge : 22Messages : 70

    le Mar 24 Juin 2014 - 0:14

    Merci beaucoup ! <3
    avatar
    Insane paper-plane
    FémininAge : 21Messages : 136

    le Mar 24 Juin 2014 - 7:26

    merci !
    avatar
    Ayane Jun
    FémininAge : 25Messages : 81

    le Ven 27 Juin 2014 - 16:26

    Merci du partage ! =)
    avatar
    artic marteen
    FémininAge : 25Messages : 22

    le Mar 1 Juil 2014 - 12:00

    MERCII



    Words are flying out like endless rain into a paper cup, they slither while they pass, they slip away across the universe. Pools of sorrow, waves of joy are drifting through my open mind, possessing and caressing me.   SEE YOU AT THE BITTER END. ytb
    avatar
    Bzzzz
    FémininAge : 33Messages : 86

    le Sam 5 Juil 2014 - 14:52

    Merci du partage ^^
    avatar
    Lilynufare
    FémininAge : 27Messages : 341

    le Sam 5 Juil 2014 - 16:04

    Merci du partage
    avatar
    Oxalyde
    FémininAge : 22Messages : 68

    le Lun 7 Juil 2014 - 16:10

    Merci du partage (:



    "Nous travestissons nos faiblesses en force. Nos frêles corps sont nos armures"
    avatar
    Invité

    le Lun 7 Juil 2014 - 16:46

    Merci
    avatar
    Equestria
    FémininAge : 20Messages : 118

    le Jeu 10 Juil 2014 - 12:24

    merci
    avatar
    Wrung Jah
    MasculinAge : 24Messages : 59

    le Jeu 10 Juil 2014 - 13:58

    Merci :)
    avatar
    warning.sign
    FémininAge : 27Messages : 58

    le Jeu 10 Juil 2014 - 23:35

    merci =D
    avatar
    FeliceFelicis
    FémininAge : 27Messages : 89

    le Sam 12 Juil 2014 - 5:05

    Perfectooo :)
    avatar
    Little Ghost
    FémininAge : 28Messages : 86

    le Sam 12 Juil 2014 - 20:09

    merci :) simple et jolie =)
    avatar
    Kathee
    FémininAge : 24Messages : 667

    le Dim 13 Juil 2014 - 0:48

    Très joli et sobre, merci Very Happy



    • Nous serions ravis de vous accueillir •


    • Venez donc voir ce petit petit fofo •
    avatar
    stubbornEmpire
    FémininAge : 18Messages : 38

    le Dim 13 Juil 2014 - 21:03

    Wow merci!
    avatar
    Swan2
    FémininAge : 19Messages : 49

    le Lun 14 Juil 2014 - 17:12

    Merci ! <3
    avatar
    Fyraliel
    FémininAge : 27Messages : 1424

    le Mar 15 Juil 2014 - 2:23

    merci



    avatar
    Furries
    FémininAge : 21Messages : 34

    le Mer 16 Juil 2014 - 10:38

    Merci ! Il est sympa pas trop compliqué !
    avatar
    Lust Caution
    FémininAge : 23Messages : 79

    le Jeu 17 Juil 2014 - 11:58

    Merci!!!!!!!!!!!!!!!11
    avatar
    Dadash_Pearl
    FémininAge : 26Messages : 40

    le Jeu 17 Juil 2014 - 17:55

    merci beaucoup \o !!! :)
    avatar
    Civin
    FémininAge : 21Messages : 11

    le Jeu 17 Juil 2014 - 21:17

    Pas trop imposant, c'est super beau, merci ! Very Happy
    avatar
    Kadence
    FémininAge : 36Messages : 57

    le Sam 19 Juil 2014 - 13:33

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Sam 26 Mai 2018 - 11:52