Apparence des sous forum en "étiquettes".

[Censure]

Bonsoir, depuis quelques jours j’essaye de modifier l'aspect des "barre de catégories" les (.th?), mais je n'y parvient pas.
Enfaite j'aimerais que les titres des catégories soit inscrits dans des sortent d’étiquettes, et qu'il n'y est plus cette grande barre, que l'aspect de la barre soit comme celle du menus "Derniers Messages", mais en gardant la taille des sous forum.
Se plus j'aimerais que les images "Nouveaux messages/Pas de nouveaux messages"
soient mises dans la parties "Derniers messages"
Sur l'image:
En rouge ce qui est à supprimer
Le titre de la catégories en étiquettes.
En violet: déplacer l'image "nouveau messages/pas de nouveaux messages..." dans la partie derniers messages.
En vert, le résultats final.

J'ai fait plusieurs tentative dans le template index_box, mais j'ai plus réussi à déformer le forum qu'autres choses.
Il faut sans doutes passer par un tableau, mais je préfère demander de l'aide que faire une bêtises.

Ci-dessous le template Index_box avec quelques modifications.

Code:

      <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
                  <span class="gensmall"><font color="white"><center>{LAST_VISIT_DATE}</font> <font color="green">| </font>
                    <font color="white">{CURRENT_TIME}</center></font><br />
         </span>
         <!-- END switch_user_logged_in -->
                 
                  <div class="nav"><a class="nav" href="{U_INDEX}"><center><font color="red">~ </font><blink><font color="white">Retour à l'accueil</font></blink><font color="red"> ~</font></center></a>{NAV_CAT_DESC}</div>
                         
      
         <!-- BEGIN switch_user_logged_in -->
                  <center>
                  <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> <font color="green">| </font>
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> <font color="green">| </font>
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> <font color="green">| </font>
                  </center>
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
          <th nowrap="nowrap" width="150"><div style="width:150px;"><center>{L_LASTPOST}</center></div></th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                 <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
                    <span class="forumlink">
                      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
       
                    </span>
                                  </h{catrow.forumrow.LEVEL}></td><td style="padding-left: 40px; text-align: right;" class="gensmall"><div class="forum-stats">{catrow.forumrow.POSTS} <font color="green">Messages</font> <font color="black">|</font> {catrow.forumrow.TOPICS} Sujets</td></tr></tbody></div></table>
                  <span class="genmed">
                <div class="forum-description">
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
</div>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Le CSS

Code:


  th{
          text-align:left;
          background-image:url('http://i47.servimg.com/u/f47/14/37/99/28/sans_t13.png');
          background-repeat:no-repeat;}
       
        #fa_ticker_block{
          width: 100%;}
       
        div#fa_ticker_container {
          background-image:url('http://i47.servimg.com/u/f47/14/37/99/28/annonc15.png');
          background-repeat:no-repeat;}
       
        #fa_ticker_block td{
          background: none !important;
          border:10px #000000;}
       
        #fa_ticker_block table{
          background: none !important;
          border:10px #000000;}
       
        td.row3 {
          border-left:0.7px solid #DCDCDC;
          border-bottom:1px solid #DCDCDC;
          background-opacity: 20%;
          border-bottom:1px solid #DCDCDC;
          -moz-border-radius:5px;
          -webkit-border-radius:5px;}
       
        .forum-stats{
          text-shadow:2px 2px 2px #96CA2D;
          font-family:georgia;
          text-transform:capitalize;
          text-align:left;
          font-size:100%;
          color:#ffffff;
          letter-spacing:1px;
          margin-left:-184px;
          margin-top:-12px;
          padding:2px;
          display:block;
          width:130px;
          height:25px;
          -moz-border-radius:5px;
          webkit-border-radius:5px;
          background-color:#B4AF91;
          border:0.7px solid #EFECCA;}
       
        a.forumlink:link,a.forumlink:visited {
          text-shadow:2px 2px 2px #333333;
          font-family:georgia;
          text-align:left;
          padding-top:5px;
          padding-left:6px;
          font-size:100%;
          border-bottom:0px solid #A7A37E;
          color:#fff;
          text-transform:capitalize;
          letter-spacing:1px;
          display:block;
          -moz-border-radius:5px;
          webkit-border-radius:5px;
          background-color:#A7A37E;
          width:580px;
          text-decoration: none;
          margin-top:-4px;
          margin-bottom:-3px;
          border-bottom:1px solid #DCDCDC;}
       
        /*--- Cette partie correspond à la description du forum ---*/
        .forum-description {
          font-size:12px;
          height:auto;
          overflow-y: auto;
          width:567px;
          padding:7px;}
       
        /*--- Cette partie correspond au QEEL---*/
        .LEGEND{
          font-family:georgia;
          text-align:center;
          font-size:100%;
          color:#fff;
          letter-spacing:1px;
          display:block;
          width:auto;
          padding:5px;
          margin:2px;}
       
        /*--- Cette partie correspond à la partie droite du QEEL---*/
        .gauche{
          text-align:right;
          border-right:1px solid #fff;
          padding:5px;
          margin:2px;}
       
        /*--- Cette partie correspond à la partie gauche du QEEL---*/
        .droite{
          text-align:left;}
       
        /*--- Puce-----*/
        li {
          font-family: Arial, sans-serif;
          font-size: 100%;
          color: #96CA2D;
          display : list-item;}

        /*--- Cette partie correspond à la partie des catégories---*/       
        .contour{
        font-family:georgia;
          border-bottom: 5px solid #A7A37E;
          overflow-y:scroll;
          text-align:left;
          margin-top:5px;
          padding-top:5px;
          padding-left:6px;
          margin-top:-10px;
          font-size:100%;
          border-bottom:5px solid #B4AF91;
          border:0.7px solid #B4AF91;
          color:#fff;
          text-transform:capitalize;
          letter-spacing:1px;
          display:block;
          -moz-border-radius:5px;
          webkit-border-radius:5px;
          background-color:#A7A37E;
          width:540px;
          height:65px;
          text-shadow:2px 2px 2px #000000;}
       
        a.forumlink:hover{
          letter-spacing:1px;
          color:#fff;
          font-style:italic;
          text-decoration: none;}
             
     

Merci de votre aide, Censure.

[kheino]

Bonjour,

Apparemment ce serait faisable...
Néanmoins juste une question : Collée à la bordure du forum, ou bien décollée (flottante) ?

[Censure]

Collée pour que ça reste en harmonie avec le reste du forum.
Merci de votre aide
J'ai éditée mon premier messages si vous voulez plus d'info.

[Censure]

Encore une fois, j'ai essayer de mon coter, mais sans résultats. De l'aide serais le bien venu.

[kheino]

Bonsoir Censure,

Tout d'abord, la coloration des templates permet aussi d'éviter les erreurs de structure comme des balises mal fermées... Donc quand il y a du rouge (sauf si c'est dans le template de base ainsi), il faut chercher à corriger.

Ensuite, évite les balises "center" quand on peut aligner par des balises "td" (là on peut même aligner verticalement) ou "div".

J'ai remis tout au vert, et peut-être que tu devras espacer tes symboles avec le code HTML de l'espacement latéral &*nbsp; (sans l'étoile).

Donc voici le template index_box avec, je le souhaite, ce que tu demandes :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td align="center" valign="bottom">
 
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall"><font color="white">{LAST_VISIT_DATE}</font> <font color="green"> | </font>
<font color="white">{CURRENT_TIME}</font></span>
<br />
<!-- END switch_user_logged_in -->

<div class="nav" align="center">
<a class="nav" href="{U_INDEX}"><font color="red">~ </font><blink><font color="white">Retour à l'accueil</font></blink><font color="red"> ~</font>{NAV_CAT_DESC}</a>
</div>

<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><font color="green"> | </font>
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><font color="green"> | </font>
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a><font color="green"> | </font>
</td>
</tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
 
<td> 
<table width="150" class="forumline" align="left"><tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" class="secondarytitle">
<div align="center" style="width:150px;">{catrow.tablehead.L_FORUM}</div></th>
</tr></table>
</td>
<td> 
<table width="150" align="right"><tr>
<td nowrap="nowrap" width="150"><div style="width:150px;"></div></td>
</tr></table>
</td>
 
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
 
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}">
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
</h{catrow.cathead.LEVEL}> 
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>

<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">

<table width="100%"><tr><td>
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
</h{catrow.forumrow.LEVEL}></td>
<td style="padding-left: 40px; text-align: right;" class="gensmall">
<div class="forum-stats">{catrow.forumrow.POSTS} <font color="green">Messages</font> <font color="black">|</font> {catrow.forumrow.TOPICS} Sujets</div>
</td></tr></table>
<div class="forum-description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
</td>
 
<td>
<table><tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
 
<td class="row3 over" align="center" valign="middle" height="50" width="150">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 
</td></tr></table>

</td>
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

[Censure]

Oui le résultats me convient, je n’ai plus qu'a personnaliser le look.
Merci de votre aide, et merci de vous être pencher sur mon problèmes.