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
    petit lu
    FémininAge : 25Messages : 172

    le Dim 7 Fév 2016 - 0:49

    Merci
    avatar
    Insanys
    FémininAge : 17Messages : 13

    le Mer 10 Fév 2016 - 7:39

    Merci du partage ! (:
    avatar
    Voltino
    MasculinAge : 23Messages : 55

    le Jeu 11 Fév 2016 - 6:01

    Merci
    avatar
    Necko
    MasculinAge : 20Messages : 26

    le Jeu 11 Fév 2016 - 6:25

    Merci
    avatar
    Necko
    MasculinAge : 20Messages : 26

    le Jeu 11 Fév 2016 - 6:26

    Merci
    avatar
    Whit
    FémininAge : 20Messages : 154

    le Mar 23 Fév 2016 - 1:28

    Thanks !
    avatar
    Shide
    FémininAge : 29Messages : 60

    le Dim 28 Fév 2016 - 14:56

    merci
    avatar
    Zarwins
    FémininAge : 22Messages : 154

    le Mar 8 Mar 2016 - 4:32

    oh woua :O



    avatar
    Océ
    FémininAge : 43Messages : 280

    le Mar 8 Mar 2016 - 11:42

    Merci et Jolie ^^



    Bonjours voici les pv's que nous cherchons : [url=http://www.never-utopia.com/t63181-les-postes-vacants-pour-les-chronuque-de-aya#960582 L’annonce est ici[/url]
    avatar
    Black Chocolate
    MasculinAge : 29Messages : 58

    le Lun 14 Mar 2016 - 11:53

    Merci :)
    avatar
    Fiery Aura
    FémininAge : 19Messages : 56

    le Mar 29 Mar 2016 - 19:59

    Il m'a l'air super ! Bravo, et merci !
    Darouine Lius
    MasculinAge : 28Messages : 65

    le Mar 29 Mar 2016 - 22:11

    merci :)
    avatar
    Alearyon
    FémininAge : 21Messages : 36

    le Mer 30 Mar 2016 - 14:56

    Merci beaucoup !
    avatar
    Inwë
    FémininAge : 19Messages : 36

    le Ven 15 Avr 2016 - 14:28

    Merci du partage !
    avatar
    Anon
    MasculinAge : 20Messages : 127

    le Dim 1 Mai 2016 - 21:35

    Merci du partage ! n_n




    ~
    avatar
    Tink ♥
    FémininAge : 25Messages : 48

    le Mer 15 Juin 2016 - 21:36

    Merciiiiiiiiiiiiiiiii
    avatar
    Amelys_Destroy
    FémininAge : 24Messages : 36

    le Jeu 14 Juil 2016 - 2:29

    Merci !
    avatar
    Alyssa.B50
    FémininAge : 24Messages : 41

    le Ven 15 Juil 2016 - 17:34

    Merci ^^ Pratique et joli
    avatar
    Scratpub
    FémininAge : 29Messages : 73

    le Mar 19 Juil 2016 - 12:10

    Oh merci !
    avatar
    TQHuu
    MasculinAge : 24Messages : 7

    le Lun 8 Aoû 2016 - 23:48

    Merci :)
    avatar
    Djeina
    FémininAge : 21Messages : 233

    le Mer 10 Aoû 2016 - 22:05

    Merci du partage ^^
    avatar
    Bryan1997
    MasculinAge : 21Messages : 51

    le Jeu 25 Aoû 2016 - 20:02

    merci
    avatar
    Jynnea
    FémininAge : 23Messages : 103

    le Ven 28 Oct 2016 - 8:15

    Merci!
    avatar
    lorenzo27
    MasculinAge : 43Messages : 5

    le Dim 30 Oct 2016 - 9:27

    merci
    avatar
    Arkall
    MasculinAge : 26Messages : 14

    le Mar 1 Nov 2016 - 23:52

    merci
    Contenu sponsorisé


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