Apparence qeel

[servity]

Bonjour a tous, et toutes.
je suis fondateur de mon forum
version phpbb2
css modifié : oui
templates modifié : oui

voila mon qeel actuel, ressemble a ça :


et en fait, je voudrais arriver a ce résultat :


merci d'avance.

[servity]

un petit up, merci

[servity]

bonjour, up please

[servity]

up please

[servity]

up please

[Aii-Chan~~]

bonjour... il me faudrait votre index_body si celui-ci est modifié   
ensuite plutôt qu'un screen, c'est mieux de fournir un schéma et puis cela me permettra d'avoir une idée pour les tailles du tableau  

[servity]

bonjour, et merci de ta rèponse. Mon indexbody, n'est pas modifié, et pour le schéma, je n'ai aucune idée.

mon template :

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>&nbsp;</td>
                  <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                  <td><input class="post" type="password" size="10" name="password"/>&nbsp;</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>&nbsp;</td>
                           <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                           <td><input class="post" type="password" size="10" name="password"/>&nbsp;</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="window.location='/facebook_connect.forum'" v="2" scope="{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></span>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
         <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
         <span class="gensmall">

            <!-- 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>&nbsp;</td>
                  <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                  <td><input class="post" type="password" size="10" name="password"/>&nbsp;</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>&nbsp;</td>
                           <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                           <td><input class="post" type="password" size="10" name="password"/>&nbsp;</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="window.location='/facebook_connect.forum'" v="2" scope="{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 -->
<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">WHO'S ONLINE</a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{WHO'S 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}
       <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : ~ <a href="http://art-s-paradise-islan.forums-gratuits.fr/g2-fondateur"><span style="color: #ff5c2b;">Fondateur</span> ~ <a href="http://art-s-paradise-islan.forums-gratuits.fr/g1-administrateurs"><span style="color: #ff6e7f;">Administrateurs</span></a> ~ <a href="http://art-s-paradise-islan.forums-gratuits.fr/g8-codeurs"><span style="color: #edbf42;">Codeurs</span></a> ~ <a href="http://art-s-paradise-islan.forums-gratuits.fr/g3-moderateurs"><span style="color: #a0d1de;">Modérateurs</span></a> ~ <a href="http://art-s-paradise-islan.forums-gratuits.fr/g4-membres"><span style="color: #c6dbc0;">Membres</span></a>~ <a href="http://art-s-paradise-islan.forums-gratuits.fr/g11-animateurs"><span style="color: #ff9e69;">animateur</span></a>~ <a href="http://art-s-paradise-islan.forums-gratuits.fr/g9-pubeur"><span style="color: #ad83cf;">pubeur</span></a>~ <a href="http://art-s-paradise-islan.forums-gratuits.fr/g5-graphistes"><span style="color: #c4d164;">graphiste</span></a><a href="http://art-s-paradise-islan.forums-gratuits.fr/g6-gribouilleur"><font color="#D6CED4">Gribouilleur</font></a>  </td>
   
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">

</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,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

[Aii-Chan~~]

Bon alors on va commencer par faire un simple tableau
Tout ce qui concerne le qeel est entre

Code:

  <!-- BEGIN disable_viewonline -->

et

Code:

  <!-- END disable_viewonline -->

vous pouvez supprimez tout ce qui s'y trouve pour l'instant, on va construire notre tableau

Code:

<table cellspacing="15"><tr>
<td>
 
1ère colonne
 
  </td>
 
  <td>

2ème colonne
   
  </td>
  </tr></table>


Ensuite, on place une div contenant une class, où vous pourrez personnaliser tout ça à votre goût.

Code:

<td>
<div class="blocqeel">
1ère colonne
</div> 
  </td>

Vous faites pareil sur la deuxième colonne :

Code:

 <td>
    <div class="blocqeel">
2ème colonne
</div>
 </td>


Au final on obtient donc ceci :

Code:


<table cellspacing="15"><tr><td>
<div class="blocqeel">
1ère colonne
</div> 
 
  </td>
 
  <td>
    <div class="blocqeel">
2ème colonne
</div>
 </td>
  </tr></table>


On continue de remplir avec les titres en haut, en rajoutant un simple span.

Code:

<table cellspacing="15"><tr><td>
<div class="blocqeel">
<span class="titreqeel">En ligne</span>
1ère colonne
</div> 
 
  </td>
 
  <td>
    <div class="blocqeel">
<span class="titreqeel">Dernières 24H</span>
2ème colonne
</div>
 </td>
  </tr></table>

Pour finir, on centre le tout et on rajoute une dernière div à l'intérieur, tout en plaçant nos nos variables: (ainsi qu'une table sur la deuxième, sinon ça ne fonctionne pas )

Code:

    <center>  <table cellspacing="15"><tr><td>
        <div class="blocqeel">
        <span class="titreqeel">En ligne</span>
        <div class="qeelinfos">
          <div class="qeelinfos">{NEWEST_USER}. {TOTAL_USERS}. {RECORD_USERS}.
          <br />{LOGGED_IN_USER_LIST}</div></div>
        </div> 
       
        </td>
         
          <td>
            <div class="blocqeel">
        <span class="titreqeel">Dernières 24H</span>
        <div class="qeelinfos">
<table id="plop">{L_CONNECTED_MEMBERS}</table></div>
        </div>
        </td>
          </tr></table>
</center>


On peut passer au css histoire d'embellir tout ça

Code:

.blocqeel
{text-align: center;
 width: 300px; /*taille au choix*/
height: 300px; /*taille au choix*/
 padding: 10px;
background:#dddddd /*fond de couleur au choix*/
}

.titreqeel
{font-size: 30px;
letter-spacing: 2px; /*espacement des lettres*/
 text-transform:uppercase; /*lettres en majuscule*/
font-family: georgia;
color: #000;
}
.qeelinfos
{width:300px; /*taille comme le div "parent"*/
 height:270px; /*hauteur légèrement plus basse*/
  overflow: auto;
text-align:left;
}
  #plop .row1 {
        background-color : transparent; /*pas toucher :D*/
        }

J'ai mis des tailles et des couleurs totalement au pif, à vous de peaufiner tout ça

[servity]

super merci, je viens de le placer, et c'est exactement, ce que je voulais.