Qeel en onglet

[Diodon]

Bonjour a tous

voila je cherche ici depuis hier soir (idem sous google) , la mamnière de créer un qeel sous forme d'onglet ou comme sur ce site http://bleachrpg.forum-actif.eu/

avez vous un tuto ou un liens, je pourrais alors le modifié moi meme

merci d'avance

Ps : je prefere une version onglet

[Lixyr]

Bonswar !

Alors je suis disposée à vous aider COMME j'ai déjà répondu plein de fois à cette question, MAIS à une condition : vous mettiez votre sujet en résolu une fois que c'est fini. Parce que j'en ai marre de faire des tutos et qu'ils finissent dans la corbeille é_è

Bon en attendant votre réponse, je travaille sur la question.

Il me faudrait le contenu de votre template index_body SI vous l'avez modifié. Sinon j'en ai pas besoin, mais il me faut cette précision.

En attendant, bonne soirée.

[Diodon]

Bonsoir

et merci pour votre aide et promis j'éditerais mon message à la fin afin d'indiquer résolu.

Pour répondre a votre question oui template modifié légerement unique pour centrer le texte et afficher une image à la place du titre "qui est en ligne"

voici l'adresse de mon forum www.le-monde-recifal.com

et voici mon template modifié

encore merci

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%"  class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle" align="right">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="facebook_login()" v="2" perms="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
         <!-- END switch_delete_cookies -->
         </span>
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%"  class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="facebook_login()" v="2" perms="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<center>
<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"><center><IMG src="http://i30.servimg.com/u/f30/16/00/22/16/qui_es10.png"></center></a></span>
      <!-- END switch_viewonline_link -->
      
      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle"><center><IMG src="http://i30.servimg.com/u/f30/16/00/22/16/qui_es10.png"></center></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="<center><IMG src="http://i30.servimg.com/u/f30/16/00/22/16/qui_es10.png"></center></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_USERS}<br />
                                {TOTAL_POSTS}, merci pour votre participation<br />
      {NEWEST_USER}, soyez le bienvenu sur le monde recifal.com</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>
</center>
   <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>  </td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
     status: true,
     cookie: true,
     xfbml: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

[Lixyr]

D'accord, alors maintenant , il faudrait que vous me disiez précisément ce que vous voulez dans vos différents onglets. Sinon je ne peux pas expliquer et faire en même temps. ^^

[Diodon]

Re

voici une photo, j'aimerais un onglet par affichage ici numeroté de 1 à 6

donc 1 onglet pour : nous avons .......
un onglet pour : il y a en tout ....
j'espère que je suis assez explicite
Etc jusque 6, et si possible pour le 5 onglet (admin, modo, Etc) des petits cadre afin de mettre en valeur, enfin si c'et possible et sans vouloir en demande de trop !

sinon vous avez libre choix

merci encore mille fois de votre aide

voici la photo

[Lixyr]

Vui, pour les petits cadres il faudrait me dire ce que vous voulez comme cadre. Vous voulez un cadre entourant tous les groupes, ou un cadre pour chaque groupe ? Dans ce cas je ferai ça manuellement, donc en retirant la variable.

[Diodon]

Re

je préfere un cadre pour chaque groupe, merci

[Lixyr]

Okay, alors je m'y mets et je vous poste ça une fois que c'est fait. (le plus long, c'est le tuto x) ! )

[Diodon]

Merci

[Lixyr]

Je poste ça dimanche dans l'après midi.

[Diodon]

merci

[Lixyr]

Enjoy ! J'ai enfin réussi *.*

Alors j'espère que c'est ce que vous voulez ! oO

Alors, petites explications avant de commencer :

1) Sachez que dans ce code, j'ai du supprimer des cellules, lignes etc, pour qu'au final, il n'y ai plus que deux grandes cellules :
- La cellule contenant l'image du QEEL
- La cellule contenant les contenus des onglets


Alors, je vous donne le code :

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <!-- BEGIN message_admin_titre -->
  <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
  </tr>
  <!-- END message_admin_titre -->
  <!-- BEGIN message_admin_txt -->
  <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
  </tr>
  <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <!-- BEGIN switch_fb_connect_no -->
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
        <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                    <span class="gensmall">{L_AUTO_LOGIN}</span>
                  </td>
              </tr>

              <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
              </tr>
            </table>
        </td>
      </tr>
  </table>
  <!-- END switch_fb_connect_no -->

  <!-- BEGIN switch_fb_connect -->
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
        <td valign="top" width="100%"  class="row1" align="center">
            <table width="100%">
              <tr>
                  <td width="55%" valign="middle" align="right">
                    <table class="right">
                        <tr>
                          <td><span class="genmed">{L_USERNAME}:</span> </td>
                          <td><input class="post" type="text" size="10" name="username"/> </td>
                          <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span>
                          </td>
                        </tr>

                        <tr>
                          <td><span class="genmed">{L_PASSWORD}:</span> </td>
                          <td><input class="post" type="password" size="10" name="password"/> </td>
                          <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                    </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                    <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="facebook_login()" v="2" perms="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
              </tr>
            </table>
        </td>
      </tr>
  </table>
  <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td width="50%" valign="top">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_delete_cookies -->
       
<a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
        <!-- END switch_delete_cookies -->
        </span>
      </td>
      <td width="50%" align="right">
        <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a>

            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a>

            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
              <!-- BEGIN switch_delete_cookies -->
             
<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
              <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
        </span>
      </td>
  </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <!-- BEGIN switch_fb_connect_no -->
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
        <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                    <span class="gensmall">{L_AUTO_LOGIN}</span>
                  </td>
              </tr>

              <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
              </tr>
            </table>
        </td>
      </tr>
  </table>
  <!-- END switch_fb_connect_no -->

  <!-- BEGIN switch_fb_connect -->
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
        <td valign="top" width="100%"  class="row1" align="center">
            <table width="100%">
              <tr>
                  <td width="55%" valign="middle">
                    <table class="right">
                        <tr>
                          <td><span class="genmed">{L_USERNAME}:</span> </td>
                          <td><input class="post" type="text" size="10" name="username"/> </td>
                          <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span>
                          </td>
                        </tr>

                        <tr>
                          <td><span class="genmed">{L_PASSWORD}:</span> </td>
                          <td><input class="post" type="password" size="10" name="password"/> </td>
                          <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                    </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                    <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="facebook_login()" v="2" perms="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
              </tr>
            </table>
        </td>
      </tr>
  </table>
  <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<center>


<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"><center><IMG src="http://i30.servimg.com/u/f30/16/00/22/16/qui_es10.png"></center></a></span>
      <!-- END switch_viewonline_link -->
     
      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle"><center><IMG src="http://i30.servimg.com/u/f30/16/00/22/16/qui_es10.png"></center></span>
      <!-- END switch_viewonline_nolink -->
      </td>
  </tr>

<script src="http://www.archive-host.com/files/597546/96de005e35ffd2b9823d2b1d229d90d18341a601/onglets_2.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">4</li>
        <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">5</li>
        <li id="o_6" class="mon_onglet" onclick="changeOnglet(this);">6</li>

        <div class="clear"><div id="mes_contenus">
  <tr>
      <td class="row1" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="<center><IMG src="http://i30.servimg.com/u/f30/16/00/22/16/qui_es10.png"></center></td>

      <td class="row1" align="center" valign="middle">
    <div id="co_1" class="mon_contenu">
<table><tr><td><span class="gensmall">{TOTAL_USERS}

                                {TOTAL_POSTS}, merci pour votre participation
 
      {NEWEST_USER}, soyez le bienvenu sur le monde recifal.com</span></td></tr></table></div>
 

<div id="co_2" class="mon_contenu" style="display: none;"><table><tr><td><span class="gensmall">{TOTAL_USERS_ONLINE}

      {RECORD_USERS}

     

      {LOGGED_IN_USER_LIST}</span></td></tr></table></div>

<div id="co_3" class="mon_contenu" style="display: none;"><table><tr><td>
  {L_CONNECTED_MEMBERS}</td></tr></table></div>
<div id="co_4" class="mon_contenu" style="display: none;"><table><tr><td>
  {L_WHOSBIRTHDAY_TODAY}
  {L_WHOSBIRTHDAY_WEEK}</td></tr></table></div>

<div id="co_5" class="mon_contenu" style="display: none;"><table><tr><td><span class="gensmall">

      <span class="cadregroupe" style="color:#F7FF00 ;"><a href="URL" class="postlink">Administrateur</a></span>
      <span class="cadregroupe" style="color:#D96900 ;"><a href="URL" class="postlink">Modérateur</a></span>
      <span class="cadregroupe" style="color:#5DA1A6 ;"><a href="URL" class="postlink">Modérateur Technique</a></span>
      <span class="cadregroupe" style="color:#965858 ;"><a href="URL" class="postlink">Animateur</a></span>
      <span class="cadregroupe" style="color:#CED3E0 ;"><a href="URL" class="postlink">Membres</a></span>
      <span class="cadregroupe" style="color:#FC8383 ;"><a href="URL" class="postlink">Les Dames</a></span>
      <span class="cadregroupe" style="color:#000000 ;"><a href="URL" class="postlink">Professionnels</a></span>
</span></td></tr></table></div>

  <!-- BEGIN switch_chatbox_activate -->
 

<div id="co_6" class="mon_contenu" style="display: none;"><table><tr><td>
        <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}

            <!-- 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></table></div>
      </div></div></ul></div>
</center>
  <!-- END switch_chatbox_activate -->
</td></tr></table>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
  <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>  </td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
  </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
  appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

_______________________________________________________________________________



Petites explications du code :



1) Le début du code :

<!-- BEGIN disable_viewonline -->
<center>

<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"><center><IMG src="https://i.servimg.com/u/f30/16/00/22/16/qui_es10.png"></center></a></span>
<!-- END switch_viewonline_link -->

<!-- BEGIN switch_viewonline_nolink -->
<span class="cattitle"><center><IMG src="https://i.servimg.com/u/f30/16/00/22/16/qui_es10.png"></center></span>
<!-- END switch_viewonline_nolink -->
</td>
</tr>

<script src="https://www.archive-host.com/files/597546/96de005e35ffd2b9823d2b1d229d90d18341a601/onglets_2.js"></script><div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">1</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">2</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">3</li>
<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">4</li>
<li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">5</li>
<li id="o_6" class="mon_onglet" onclick="changeOnglet(this);">6</li>

<div class="clear"><div id="mes_contenus">

<tr>
<td class="row1" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="<center><IMG src="https://i.servimg.com/u/f30/16/00/22/16/qui_es10.png"></center></td>

<td class="row1" align="center" valign="middle">

Les ID :

<li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">1</li>

Ce sont les numérotations des onglets. Chaque onglet a son propre chiffre, et le contenu de l'onglet correspondant doit porter le même chiffre que so onglet :
Ainsi, <li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">1</li> ira avec <div id="co_1" class="mon_contenu">


2) Les deux cellules principales

<div class="clear"><div id="mes_contenus">
<tr>
<td class="row1" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="<center><IMG src="https://i.servimg.com/u/f30/16/00/22/16/qui_es10.png"></center></td>

<td class="row1" align="center" valign="middle">

Elles sont situées juste après le code qui délimite le début des contenus des onglets , pour que les contenu soient en dessous des onglets et que l'image soit visible pour chaque contenu de l'onglet.


3) Un contenu d'onglet :

<div id="co_1" class="mon_contenu">
<table><tr><td><span class="gensmall">{TOTAL_USERS}

{TOTAL_POSTS}, merci pour votre participation

{NEWEST_USER}, soyez le bienvenu sur le monde recifal.com</span></td></tr></table></div>

- On retrouve bien le "1" du premier onglet, en rouge.
- Ensuite en orange : le contenu doit se trouver dans un tableau pour un bon affichage.
- A chaque fin de contenu, on ferme la <div contenant le chiffre dont le contenu correspondant à un onglet.


4) Les Groupes :

<div id="co_5" class="mon_contenu" style="display: none;"><table><tr><td><span class="gensmall">

<span class="cadregroupe" style="color:#F7FF00 ;"><a href="URL" class="postlink">Administrateur</a></span>
<span class="cadregroupe" style="color:#D96900 ;"><a href="URL" class="postlink">Modérateur</a></span>
<span class="cadregroupe" style="color:#5DA1A6 ;"><a href="URL" class="postlink">Modérateur Technique</a></span>
<span class="cadregroupe" style="color:#965858 ;"><a href="URL" class="postlink">Animateur</a></span>
<span class="cadregroupe" style="color:#CED3E0 ;"><a href="URL" class="postlink">Membres</a></span>
<span class="cadregroupe" style="color:#FC8383 ;"><a href="URL" class="postlink">Les Dames</a></span>
<span class="cadregroupe" style="color:#000000 ;"><a href="URL" class="postlink">Professionnels</a></span>
</span></td></tr></table></div>

-> ici les groupes sont mis manuellement afin de pouvoir mettre un cadre.
-> cadregroupe est le nom du span qui permet le cadre. On doit mettre le code qui lui est associé dans la feuille css :

Code:

.cadregroupe {border:1px solid red;}

Bien évidemment vous pouvez modifier ce code pour avoir un cadre autre que celui là.
Bon pour les cadres, si vous avez des questions vous pourrez les poser dans un autre message, je vous aiderai.

-> Url ? Mettez l'url de votre groupe.


5) La fin du code :

</script>
<!-- END switch_chatbox_popup -->
</span></td></tr></table></div>
</div></div></ul></div>
</center>
<!-- END switch_chatbox_activate -->
</td></tr></table>
<!-- END disable_viewonline -->

Explications des couleurs :

- En bleu foncé, c'est le tableau général contenant le QEEL
- En vert, ce sont les balises du code pour les onglets
- En orange, c'est le tableau rajouté pour chaque contenu
- En rouge, les ID : il faut y faire attention
- En violet : les deux cellules principales : image du QEEL et contenu des onglets.

Alors ... Hum maintenant vous enregistrez, une fois que vous avez compris.

Et ensuite, il faut rajouter un code dans le CSS.


6) Le code css :

Code:

/*------ ONGLETS DU QEEL ------*/


ul, li{
  list-style: none;
}
.mon_onglet {
        float: left;
   padding: 5px 15px;
        color: #A60000;
   background-color: transparent;
        text-decoration:none !important;
background-color: transparent;
}


.mon_onglet:hover {
   background-color: transparent;
        color: #A60000;
        text-decoration: none;
}            
.mon_onglet_selected {
        float: left;
   padding: 5px 15px;
   background-color: transparent;
        color: #A60000;
        text-decoration: none;
}
.clear{
  clear: both;
}


.mon_contenu{
  background-color: transparent;
margin-right:30px;

}

#mes_contenus, #mes_onglets{
  width: 100%;
  }

/*------ ONGLETS DU QEEL ------*/

ul, li{
list-style: none;
}
.mon_onglet {
float: left;
padding: 5px 15px;
color: #A60000;
background-color: transparent;
text-decoration:none !important;
background-color: transparent;
}


.mon_onglet:hover {
background-color: transparent;
color: #A60000;
text-decoration: none;
}
.mon_onglet_selected {
float: left;
padding: 5px 15px;
background-color: transparent;
color: #A60000;
text-decoration: none;
}
.clear{
clear: both;
}


.mon_contenu{
background-color: transparent;
margin-right:30px;

}

#mes_contenus, #mes_onglets{
width: 100%;
}

les parties en rouge et verts sont les div que l'on retrouve directement dans le code.
On peut modifier n'importe quel passage. J'espère que vous vous y connaissez en css, auquel cas demandez-moi.

Alors j'explique à quoi respond qui :

• .mon_onglet {
  }

c'est l'aspect de l'onglet en général.

• .mon_onglet:hover {
  }

C'est l'aspect de l'onglet lorsque l'on passe la souris dessus.

• .mon_onglet_selected {
  }

c'est l'aspect de l'onglet dont le contenu est affiché

• .clear{
  }

C'est à ne surtout pas supprimé. Il fut un temps où je savais précisemment ce à quoi correspondait ce code, mais maintenant je ne saurais dire, enfin si vous l'enlevez plus rien ne marchera.

• .mon_contenu{
  }

Aspect du contenu

• #mes_contenus, #mes_onglets{
  }

Aspect du "tout" : contenus et onglets. (dites vous que tout le code est dans un tableau. Et que c'est ce tableau que vous modifiez avec ce code)



--------------------------------------

Voilàààà ! Donc si vous avez des questions, n'hésitez pas. ^^
(j'espère que j'ai pas fait d'erreur en faisant mon tuto oO )

[Diodon]

merci mille fois je vais faire des essais sur mon forum test afin de ne pas planter mon forum

[Diodon]

merci deux trois modif et c'est impec

resolu

merci mille fois

[Lixyr]

Ah super. Je suis contente \O/
De rien ^^ Le plaisir était pour moi.