[CSS] Personnaliser les cellules ?

[-(Tyzy-)]

Salut salut ! mon message s'adresse aux codeurs. Voila, j'ai un petit problème : j'aimerais personnaliser à 100% mon thème graphique. Pour l'instant, c'est avec succès qu'on a fait notre QEEL et tout le blabla, mais ce qui m'intéresse pour l'instant ce n'est pas ça, mais bien les "Cellules" de message. j'aimerais pouvoir leurs donner une toute autre apparence, et j'ai soigneusement fait un petit montage "Preview" pour , en gros, montrer ce que j'aimerais obtenir en résultat (ne prêtez pas attention au thème qui diffère, la Preview est faite pour un changement de thème, à la base, le résultat final entre autre.)

Voila ce que j'ai pour l'instant :

Spoiler:

Et voila ce que j'aimerais obtenir :

Spoiler:

(Imaginez après bien sûr qu'il y ai à gauche des mini-icones pour dire si un nouveau message à été posté, et tout à droite, une case pour indiquer les derniers messages postés)

Je sais que c'est possible, maintenant, la chose qui me gêne, c'est "Comment". Merci d'avance pour vos réponses !

[Tech]

Bonsoir,

Ce que vous désirez c'est le fond des cellules ?

Cordialement.

[-(Tyzy-)]

Merci pour la réponse! c'est exactement ça, ainsi que la disposition du champ texte des cellules, la manière dont la cellule est faite aussi (exemple : qu'il n'y ai pas de séparations en ce qui concerne le nombre de messages postés ou vus, ce genre de choses) en bref, une personnalisation quasi-totale des cellules.

[-(Tyzy-)]

Petit Up?...

[Tech]

Bonjour,

Pouvons-nous avoir votre template actuel ?

Cordialement.

[-(Tyzy-)]

Bien sûr! voici :

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table id="msg_et" 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 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="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>
         <!-- 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="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 -->
    <div id="QEEL_div">
        <table id="QEEL_table">
            <tr class="FirstCol">
                <td rowspan="6" class="Stats">
                <p>
Le forum compte <span id ="TotalUserPerso">{TOTAL_USERS}</span> membres.<br></a><br></a>
Bienvenue à <span id ="NewestUserPerso">{NEWEST_USER}</span>, qui vient de s'inscrire !<br></a><br></a>
{TOTAL_USERS_ONLINE}<br></a><br></a>
Notre record d'utilisateur en ligne simultanément est de <span id ="RecordUsersPerso">{RECORD_USERS}</span><br></a><br></a>
                </p>
                </td>
               
                <td class="Group">
                <a href="http://soul-eater.forumsactifs.com/g3-sorciere" id="QEEL_group3" style="background-image:url('http://img12.imageshack.us/img12/1126/sorcererrj.png');"  onMouseOver="this.style.backgroundImage='url(\'http://img59.imageshack.us/img59/952/sorcerer2.png\')';" onMouseOut="this.style.backgroundImage='url(\'http://img12.imageshack.us/img12/1126/sorcererrj.png\')';" ></a>
                    </td>
               
                <td  rowspan="6" style="width: 360px;">
                </td>
            </tr>
            <tr>
                <td class="Group">
                    <a href="http://soul-eater.forumsactifs.com/g4-meister" id="QEEL_group5" style="background-image:url('http://img718.imageshack.us/img718/332/meister.png');"  onMouseOver="this.style.backgroundImage='url(\'http://img215.imageshack.us/img215/7959/meister2.png\')';" onMouseOut="this.style.backgroundImage='url(\'http://img718.imageshack.us/img718/332/meister.png\')';" ></a>
                </td>
            </tr>
            <tr>
                <td class="Group">
                    <a href="http://soul-eater.forumsactifs.com/g5-arme" id="QEEL_group2" style="background-image:url('http://img33.imageshack.us/img33/2616/weaponsy.png');"  onMouseOver="this.style.backgroundImage='url(\'http://img714.imageshack.us/img714/1641/weapons2w.png\')';" onMouseOut="this.style.backgroundImage='url(\'http://img33.imageshack.us/img33/2616/weaponsy.png\')';" ></a>
                                    </td>
            </tr>
            <tr>
                <td class="Group">
                    <a href="http://soul-eater.forumsactifs.com/g7-gardien" id="QEEL_group4" style="background-image:url('http://img694.imageshack.us/img694/9868/gardiens.png');"  onMouseOver="this.style.backgroundImage='url(\'http://img5.imageshack.us/img5/4679/gardiens2.png\')';" onMouseOut="this.style.backgroundImage='url(\'http://img694.imageshack.us/img694/9868/gardiens.png\')';" ></a>
                </td>
            </tr>
            <tr>
                <td class="Group">
                    <a href="http://soul-eater.forumsactifs.com/g12-yokai" id="QEEL_group1" style="background-image:url('http://img684.imageshack.us/img684/1185/yokai.png');"  onMouseOver="this.style.backgroundImage='url(\'http://img841.imageshack.us/img841/445/yokai2.png\')';" onMouseOut="this.style.backgroundImage='url(\'http://img684.imageshack.us/img684/1185/yokai.png\')';" ></a>
                                    </td>
            </tr>
            <tr>
                <td class="Group">
                    <a href="http://soul-eater.forumsactifs.com/g14-shokan" id="QEEL_group6" style="background-image:url('http://img691.imageshack.us/img691/7355/shokan.png');"  onMouseOver="this.style.backgroundImage='url(\'http://img706.imageshack.us/img706/2672/shokan2.png\')';" onMouseOut="this.style.backgroundImage='url(\'http://img691.imageshack.us/img691/7355/shokan.png\')';" ></a>
                </td>
            </tr>
            <tr>
                <td colspan="3" class="Vide">
                </td>
            </tr>
                <td colspan="3" class="OnlineNow">
                    {LOGGED_IN_USER_LIST}
                </td>
            </tr>
            <tr>
                <td colspan="3" class="Vide2">
                </td>
            </tr>
            <tr>
                <td colspan="3" class="Online24">
                    <div id="ConnectedMembersPerso"><table>{L_CONNECTED_MEMBERS}</table></div>
                </td>
            </tr>

           
        </table>
    </div>
    </body>
<div style="float:left; visibility: hidden;">
<img src="http://img841.imageshack.us/img841/445/yokai2.png" alt="PreloadImg" />
<img src="http://img714.imageshack.us/img714/1641/weapons2w.png" alt="PreloadImg" />
<img src="http://img59.imageshack.us/img59/952/sorcerer2.png" alt="PreloadImg" />
<img src="http://img5.imageshack.us/img5/4679/gardiens2.png" alt="PreloadImg" />
<img src="http://img215.imageshack.us/img215/7959/meister2.png" alt="PreloadImg" />
<img src="http://img706.imageshack.us/img706/2672/shokan2.png" alt="PreloadImg" />

 </div>

    <style type="text/css">

        #QEEL_div {
            /*background-image:url("http://img705.imageshack.us/img705/8050/quiestenlignel.png");*/
            background-image:url("{L_ONLINE_IMG}");
            width: 750px;
            height: 450px;
            margin-left: auto;
            margin-right: auto;
            padding:0;
        }
        #QEEL_table {
            margin:0;
            /*border-collapse: collapse;*/
            width: 668px;
            height: 391px;
            position:relative;
            left: 35px;
            top:40px;
        }
       
        #QEEL_table tr td {
          padding:0;
          margin:0!important;
        }
        #QEEL_table tr .Stats {
            width: 128px;
            text-align: center;
            font-size: x-small;
            font-family: "Calibri";
            padding-left: 5px;
            padding-right: 5px;
           
        }
        #QEEL_table tr .Group {
            width: 180px;
            height: 35px;
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;

        }
        #QEEL_table tr .Vide {
            height: 38px;
            border: 1px solid transparent;
        }
        #QEEL_table tr .OnlineNow {
            height: 24px;
            text-align: center;
            font-size:small;
            font-family: "Calibri";
        }
        #QEEL_table tr .Vide2 {
            height: 30px;
        }
        #QEEL_table tr .Online24 {
            text-align: center;
            vertical-align: top;
            font-size: x-small;
            font-family: "Calibri";
        }
        #QEEL_table tr .Group a {
            width: 103px;
            height: 35px;
            margin-left: auto;
            margin-right:auto;
            display: block;
            outline:0;
        }
      #QEEL_table tr .Online24 a {
      text-decoration:none!important;
      }
      #QEEL_table tr .OnlineNow a {
      text-decoration:none!important;
      }
     
     
    </style>
    <script type="text/javascript">
        document.getElementById('TotalUserPerso').innerHTML=document.getElementById('TotalUserPerso').innerHTML.replace(/Nous avons /,'').replace('membres enregistrés','');
        document.getElementById('NewestUserPerso').innerHTML=document.getElementById('NewestUserPerso').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,'');
        document.getElementById('RecordUsersPerso').innerHTML=document.getElementById('RecordUsersPerso').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de /,'');
        document.getElementById('ConnectedMembersPerso').innerHTML=document.getElementById('ConnectedMembersPerso').innerHTML.replace(/<tr><td class="row1"><span class="gensmall">Membres connectés au cours des 24 dernières heures : /,'').replace('</span/></span></td></tr>','');
    </script>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />


{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 -->

(Le "Qui est en ligne" a temporairement été retiré mais je suppose que ça ne pose pas de problèmes étant donné que seules les cellules nous intéressent). D'habitude je laisse ce genre de travaux à mon codeur (j'y connais pas grand chose) mais là j'ai pensé qu'on aurait besoin d'aide. Merci d'avance.

[-(Tyzy-)]

Petit Up, problème toujours pas résolu :/

[Tech]

Bonjour,

Si vous voulez une image en fond de cellule, il nous la faudrait.

Cordialement.

[-(Tyzy-)]

Voici, désolé du retard !

Spoiler:

Lien : http://www.pixenli.com/images/1356/1356178752040151100.png


Voiiila, en gros ce serait pour que les cellules aient cette apparence (au lieu d'être de gros blocs carrés...)

Merci d'avance !

[-(Tyzy-)]

Petit Up. Désolé du dérangement xD

Edit : Une solution a peu être été trouvée! je vous tient au courant de si elle fonctionne ou non.

[-(Tyzy-)]

Bonjour.

J'ai finalement trouvé, je vous remercie profondément ! ... mais la guerre n'est pas vraiment terminée.

En effet j'ai réussi à ajouter un fond, mais maintenant c'est la mise en page qui ne va plus (celle des cellules) connaissez-vous un tutoriel qui me permette de re-placer (voir modifier) le contenu des cellules? (exemple : déplacer de quelques pixels une image représentative, ou ajouter des effets sur le texte, ou bien le déplacer à ma guise) ? merci d'avance ! pour rappel, regardez le screen posté plus haut pour voir quel genre de mise en page je désirerais faire pour le contenu des cellules (Texte blanc avec des ombres, déplacé différemment)

Merci d'avance une fois de plus !

PS : petite question bonus : Est-il possible de déplacer le contenu du Footer? (là où il y a "Panneau d'administration" ainsi que toutes les pubs) j'ai cru comprendre qu'il était interdit de le "Cacher" (et ce n'est pas mon intention) mais j'aimerais mettre quelque chose d'autre en bas, serait-il possible de mettre le contenu du Footer quelque part sur la page d'accueil? (dans une Pop-Up par exemple, un peu comme la Chatbox coulissante) merci d'avance pour une future réponse à cette question accessoire.

EDIT : finalement une solution à été trouvée, je vais ouvrir un autre topic pour faire une autre demande (qui concerne la Chatbox cette fois-ci) merci pour votre aide malgré tout!