Cadre blanc autour des catégories

[Liloo_59]

Bonjour ♥

Alors voilà, ma question est simple : Comment fait-on ça : https://2img.net/r/hpimg4/pics/323875Sanstitre.png . Je parle du cadre blanc qui entoure TOUTE la catégorie.

Si quelqu'un sait, je lui construit un temple, je cherche ça depuis tellement longtemps

Merci d'avance et bonne journée à vous :thanks:

[Lixyr]

Bonjour.

C'est simple, il suffit de faire une modification de template.

Êtes vous en phpbb2, et êtes vous fondateur/fondatrice de votre forum ?

Si oui, avec-vous déjà modifié votre template index_box ?
Si oui pouvez vous le poster ici entre deux balises code ?

[Liloo_59]

Déjà merci beaucoup pour cette réponse rapide, ça fait toujours plaisir

Je me doutais bien qu'il s'agissait de templates jutement et oui je suis fondatrice et mon forum est bien un phpbb2.
Je vous met donc mon template index_box qui est déjà modifié oui.

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 --><div class="titre_categorie">{catrow.tablehead.L_FORUM}</div><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"></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">
         <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">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</td></tr></tbody></table>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall" id="subforums">
  <!-- 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>
<script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ϟ ')).removeAttr('id');
</script>
      </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 -->

[Lixyr]

Vous voulez enlever les titres "sujet" et "dernier message" ?

[Liloo_59]

Non, pas spécialement, mais si ça vous arrange, peu importe ^^.

[Lixyr]

J'ai préféré l'enlever, c'était plus simple.

C'est un truc dans ce genre-là que vous voulez ? forum de test de lixyr

[Liloo_59]

C'est parfait ♥ c'est exactement ça.

[Lixyr]

D'accord. Alors je vous envoie le template :

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 --><div class="titre_categorie">{catrow.tablehead.L_FORUM}</div><table class="forumline" width="100%" border="0" cellspacing="1" 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="{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">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.

</td></tr></tbody></table>


<table width="100%" cellspacing="20" cellpadding="10" class="cadreblanc"><tr><td width="80%">
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
            <span class="gensmall" id="subforums">
      <!-- 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>
    <script type="text/javascript">
    jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ϟ ')).removeAttr('id');
    </script>
</td><td width="20%" class="cadrebeige">
         
            <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 -->

ainsi que le css qui va avec :

Code:

.cadreblanc {border:1px solid #666;
background-color:#fff;
-moz-border-radius:8px;
-webkit-border-radius:8px;border-radius:8px;
-moz-box-shadow:1px 1px 5px #666;-webkit-box-shadow:1px 1px 5px #666;box-shadow:1px 1px 5px #666;}

.cadrebeige {border:1px solid #666;
background-color:palegoldenrod;
-moz-border-radius:8px;
-webkit-border-radius:8px;border-radius:8px;
-moz-box-shadow:1px 1px 5px #666;-webkit-box-shadow:1px 1px 5px #666;box-shadow:1px 1px 5px #666;}

Si vous avez des problèmes avec le code, ou que vous voulez modifier certaines petites choses, comme la taille, les couleurs etc n'hésitez pas. Également si vous voulez que je vous explique le codage du template.

[Liloo_59]

D'accord, merci encore, j'essaye ça et je reviens avec mes questions ^^

[Lixyr]

D'accord. ^^

[Liloo_59]

Me revoilà (a)
Alors je pense que j'ai bien compris, j'ai réussi à changer ce que je voulais et à modifié légèrement mon template pour la taille, donc ça va le faire je pense.

Par contre je veux bien l'explication, autant que je sache le faire au lieu de bêtement copier

[Lixyr]

Okay, donc d'une part j'ai retiré les titres :

Code:

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

ce qui me faisait une ligne problématique en moins.

Ensuite, j'ai séparé les cellules en deux table, pour pouvoir avoir mon contour et ma couleur de fond sur les catégories :

1ère table (la votre) :

<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">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.

</td></tr></tbody></table>

deuxième table :

<table width="100%" cellspacing="20" cellpadding="10" class="cadreblanc"><tr><td width="80%">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall" id="subforums">
<!-- 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>
<script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ϟ ')).removeAttr('id');
</script>
</td><td width="20%" class="cadrebeige">

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

</td></tr></table>

il a fallut ensuite que je ferme la cellule :

</td><td width="20%" class="cadrebeige">

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

</td></tr></table>

</td>
</tr>
<!-- END forumrow -->

puisque techniquement tout ce contenu était contenu dans une seule table composée de plusieurs cellules, nous n'avons plus ici que deux tables avec une ou deux cellules chacune.

Et voilà, ça nous fait une catégorie avec son cadre :

<table width="100%" cellspacing="20" cellpadding="10" class="cadreblanc">

cadreblanc étant la classe que l'on retrouve dans le css.

[Liloo_59]

Et ben Oo, je referais tout ça un par un sur un autre fo pour comprendre, parce que là comme ça, je pige pas tout xD. Mais bon en pratiquant ça devrait le faire. En tout cas encore un grand merci à toi

[Lixyr]

Le tout c'est de bien gérer les histoire de table, tr, td, colspan etc. Les tableaux, quoi. ^^