Catégorie personnalisée

[Yuuko Nakami]

Bonjour, bonjour.

Je voudrais avoir des catégories qui ressemble à ceci :



Voici mon index-box :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}

         {CURRENT_TIME}

         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>

         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </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="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</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">
         <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}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <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" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</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 -->

Et mon CSS :

Code:

textarea, .textarea.post, input.post {
-moz-border-radius:4px;
}

a { text-decoration: none; }

.bodyline {
-moz-border-radius:4px;
}



textarea, .textarea.post, input.post {
-moz-border-radius:4px;
}

.postbody {padding-left:30px;}

a.forumlink {
font-family: verdana;
background-color: ; (couleur du fond)
display: block; (affiche sous forme de "bloc" si tu spécifies pas la largeur, il prendra toute la largeur)
font-weight: bold; (met la police en gras)
text-align: center;
border-bottom: 1px dashed #C799B8; (ajoute une bordure en dessous)
color : #B56B4F; (couleur du titre du forum)
}


a:hover {text-decoration: none !important}

.fontqeel {
  background-color: #D9D9D9;/*couleur de fond*/
  -moz-border-radius: 0px; /* Coins arrondis sous Mozilla */
  -webkit-border-radius: 0px; /* Coins arrondis sous Chrome */
  border-top: 5px #363642 solid; /* couleur sur les navigateurs récents */
 border-bottom: 5px #363642 solid; /* couleur sur les navigateurs récents */
 border-left: 10px #363642 solid; /* couleur sur les navigateurs récents */
 border-right: 10px #363642 solid; /* couleur sur les navigateurs récents */
}

.groupes {
  text-transform: lowercase;/* transforme le texte en lettres majuscules */
font-family: Georgia;
font-variant: normal;
  font-weight : italic;/*texte en gras*/
  font-size:16px; /* Taille du texte */}

.liste24h {
  height: XXpx; /* hauteur de la liste des utilisateurs connectés au cours des dernières heures */
  overflow:auto; /* scroll automatique quand la hauteur dépasse */
  fond-color: #FFFFFF;
}

.liste24h td.row1{
  background:#C2C0C0; /*couleur de fond (la meme que celle de votre QEEL de preference) */
text-align: center;
}

Sa fait deux fois que je demande à faire un style de catégorie mais je ne comprend toujours pas. Est-ce que quelqu'un pourrais m'expliquer la template Index-Box, s'il vous plait ?

[Invité]

Bonjour,

L'index_box est constitué d'un ensemble de tableaux et de "variables".

> Ligne d'en-tête des colonnes:

Code:

<tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
  </tr>

Dans votre cas il ne faut garder que la partie qui concerne le titre:

Code:

<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

Un peu plus bas, vous avez les contenus de ces colonnes. C'est là qu'il faut faire le gros des modifications.

Code:

<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">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
        </h{catrow.forumrow.LEVEL}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <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" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
  </tr>

>Titre des forums. Vous pouvez vous servir de la class a.forumlink dans le CSS pour mettre en place les titres de vos forums.

Code:

<h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
        </h{catrow.forumrow.LEVEL}>

>Description des forums. Vous pouvez entourer ceci d'une div pour mettre le cadre autour.

Code:

<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>

>Affichage des modérateurs du forum. Si vous ne les affichez pas, ne vous en occupez pas .

Code:

<!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->

>Affichage des sous-forums. Il y a possibilité de remplacer la virgule par ce que vous souhaitez, faites un recherche sur le forum pour trouver le script .

Code:

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

>Nombre de sujets. Vous pouvez le supprimer ou le déplacer.

Code:

<span class="gensmall">{catrow.forumrow.TOPICS}</span>

>Nombre de messages. Vous pouvez le supprimer ou le déplacer.

Code:

<span class="gensmall">{catrow.forumrow.POSTS}</span>

>Affichage dernier message. Même principe, entourez ceci d'une div pour mettre un cadre, le placer.

Code:

<span class="gensmall">{catrow.forumrow.LAST_POST}</span>

Faites des essais sur un forum test en déplaçant les variables, et en créant le code CSS associé. C'ets la meilleure façon d'apprendre .

Cordialement.

[Yuuko Nakami]

Merci, j'ai tout compris.
En fait se n'est pas bien compliquer ^^

[Yuuko Nakami]

Mmh.. Excusez-moi du deuxième post mais j'ai un problème..
Voici un aperçut :



Comme vous pouvez le voir, mon image (No/New/Lock) est à droite et j'aimerais la mettre à gauche. Je suppose que c'est mon template qui n'est pas bon mais j'ai beau essayer de déplacer les tableaux et les varriables, je n'y arrive pas.

J'ai constater que la partie des images (No/New/lock) était celle-ci :

Code:

<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
              <div class="tourimg"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"/> </div>
              </td>

Mais quoi que je déplace, c'est soit mon titre qui se met en dessous des images (Et moi je le veux en haut comme sur l'aperçut), soit c'est mon image qui se met à droite..

Je vous donne mon index-box :

Code:

      <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
          <tr>
              <td valign="bottom">
                <!-- BEGIN switch_user_logged_in -->
                <span class="gensmall">{LAST_VISIT_DATE}<br />
                {CURRENT_TIME}<br />
                </span>
                <!-- END switch_user_logged_in -->
                <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
              </td>
              <td class="gensmall" align="right" valign="bottom">
                <!-- BEGIN switch_user_logged_in -->
                <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
                <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
                <!-- END switch_user_logged_in -->
                <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
              </td>
          </tr>
        </table>
        <!-- BEGIN catrow --><!-- BEGIN tablehead --><center><table width="85%" border="0" cellspacing="0" cellpadding="0">
          <tr>
              <th nowrap="nowrap" width="100%" class="secondarytitle" valign="middle" align="center"> {catrow.tablehead.L_FORUM} </th>
          </tr></table></center><center><table class="forumline" width="97%" border="0" cellspacing="0" cellpadding="0">
          <!-- 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="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="middle" width="100%" height="50" align="left">
                      <table width="100%"><tr><td colspan="2">
                                <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
              <div class="tourimg"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"/> </div>
              </td>
<span class="forumlink"> <h{catrow.forumrow.LEVEL} class="hierarchy">
    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                </h{catrow.forumrow.LEVEL}>
    </td></tr>
    <tr><td width=100%" valign="top">
            <div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                <span class="gensmall">             
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                </span>
              </td>
                <td class="row3 over" align="center" valign="middle" height="50"><div style="width:175px;">
                <span class="gensmall"><div class="derniersmess"><BR>{catrow.forumrow.LAST_POST}</div><BR>
    <table width="75%"><tr><td align="center">
    <span class="gensmall"><div class="postetmess">Sujets:  {catrow.forumrow.TOPICS} || Messages: {catrow.forumrow.POSTS}</div></span></span></div>
    </td></tr></table>
    </td></tr></table></span>
              </td></tr></table><img src="{SPACER}" alt="" height="5" width="1" /><table class="forumline" width="97%" border="0" cellspacing="0" cellpadding="0"></center>
          <!-- 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>
         
          <!-- END catfoot -->
          <!-- BEGIN tablefoot -->
        </tr></table></center><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Est-ce que vous pourriez m'aider ?
Merci beaucoup.

[Invité]

Bonjour,

Si le problème est toujours d'actualité, vous pouvez le régler en ajoutant un tableau global.
Pour que l'icone se place bien , il faut un tableau global qui intègre l'icone dans la cellule de gauche et le reste des modifications dans la cellule de droite.
Essayez comme ceci:

Code:

      <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
          <tr>
              <td valign="bottom">
                <!-- BEGIN switch_user_logged_in -->
                <span class="gensmall">{LAST_VISIT_DATE}<br />
                {CURRENT_TIME}<br />
                </span>
                <!-- END switch_user_logged_in -->
                <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
              </td>
              <td class="gensmall" align="right" valign="bottom">
                <!-- BEGIN switch_user_logged_in -->
                <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
                <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
                <!-- END switch_user_logged_in -->
                <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
              </td>
          </tr>
        </table>
        <!-- BEGIN catrow --><!-- BEGIN tablehead --><center><table width="85%" border="0" cellspacing="0" cellpadding="0">
          <tr>
              <th nowrap="nowrap" width="100%" class="secondarytitle" valign="middle" align="center"> {catrow.tablehead.L_FORUM} </th>
          </tr></table></center><center><table class="forumline" width="97%" border="0" cellspacing="0" cellpadding="0">
          <!-- 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="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="middle" width="100%" height="50" align="left">
                      <table width="100%"><tr>
                                <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
              <div class="tourimg"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"/> </div>
              </td><td><table width="100%"><tr><td>
<span class="forumlink"> <h{catrow.forumrow.LEVEL} class="hierarchy">
    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                </h{catrow.forumrow.LEVEL}>
    </td></tr>
    <tr><td width=100%" valign="top">
            <div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                <span class="gensmall">             
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                </span>
              </td>
                <td class="row3 over" align="center" valign="middle" height="50"><div style="width:175px;">
                <span class="gensmall"><div class="derniersmess"><BR>{catrow.forumrow.LAST_POST}</div><BR>
    <table width="75%"><tr><td align="center">
    <span class="gensmall"><div class="postetmess">Sujets:  {catrow.forumrow.TOPICS} || Messages: {catrow.forumrow.POSTS}</div></span></span></div>
    </td></tr></table></td></tr></table>
    </td></tr></table></span>
              </td></tr></table><img src="{SPACER}" alt="" height="5" width="1" /><table class="forumline" width="97%" border="0" cellspacing="0" cellpadding="0"></center>
          <!-- 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>
         
          <!-- END catfoot -->
          <!-- BEGIN tablefoot -->
        </tr></table></center><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Cordialement.

[Yuuko Nakami]

Merci sa a marcher. ^^

[Invité]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif