[Forum] Mettre des cadres autour des tables

Sparrow-style

Age : 39Messages : 32055

Jeu 17 Sep 2009 - 22:42

Rappel du premier message :

#phpBB2

Salut salut !

Voici donc un tuto encore attendu^^ pour apprendre ma méthode (qui n'est peut-être pas la meilleure et certainement pas la seule) pour mettre des cadres autour des tables de sous-forums.

Exemple :

>>> EXEMPLE


Nous allons donc commencer par faire le fond... ou plutôt VOUS allez commencer par le faire

Faites donc un cadre vierge, dans lequel vous devez pouvoir séparer l'en-tête, le pieds et l'image de fond qui se répètera verticalement.


1) Séparer les forums :

La première chose à faire pour faire plusieurs tables est de séparer les forums que vous avez construit. Pour cela, rien de compliqué, allez simplement dans
Affichage > Page d'accueil > Structure et Hiérarchie

Mettez l'une des trois apparences du bas "Séparer les catégories sur l'index".


2) Mettre le fond :

On va commencer par mettre le fond de nos tables, car on ne procède pas de la même manière que pour le reste.
Pour cela, nous allons simplement utiliser le CSS, en mettant une image de fond dans la "class" forumline.

Code:

.forumline
{
background-color: transparent;
background-image: url(adresse de votre image de fond);
background-repeat: repeat-y;
padding-left: 20px;
padding-right: 18px;
border: none;
}

Explications :
repeat-y => fait se répéter le fond en hauteur
padding => crée une marge interne, de sorte que les bords de la table ne soient pas trop prêt de celle de votre cadre (fond ici).

Nous avons donc normalement notre fond, il nous reste à mettre les en-tête et les pieds des cadres.


3) En-tête et pieds :

Pour cela, il va falloir aller dans les Templates afin de placer des divisions "vides", qui vont seulement contenir les images de tête et pieds. En gros, on va faire ce schéma :

Templates :

=> ajout division "tête"
[code de la table de base de FA]
=> ajout division "pieds"

CSS :

Indication que la tête doit contenir telle image de fond.
Indication que le pieds doit contenir telle image de fond.

Allez donc dans Affichage > Templates > Général > index_box (page d'accueil - affichage des catégories).

Voici le code avec indiqué sous la forme suivante ce que j'ai ajouté :

Il est encadré par :

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

<!---------------- Début ajout  --------------------->
<div class="table_head"></div>
<!---------------- Fin ajout  --------------------->

<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>
      <!-- BEGIN forum_link_no -->
      <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>
      <!-- END forum_link_no -->
      <!-- BEGIN forum_link -->
      <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
      <!-- END forum_link -->
   </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>

<!---------------- Début ajout  --------------------->
<div class="table_foot"></div>
<!---------------- Fin ajout  --------------------->

<!-- END tablefoot -->
<!-- END catrow -->

Nous avons donc placé nos deux divisions, pour le moment cela ne donne rien puisqu'il faut ensuite mettre en forme ce qu'elles contiennent grâce au CSS.

Code:

.table_head
{
width: largeur de votre image de fond;
height: hauteur de votre image de fond;
background-color: transparent;
background-image: url(adresse de votre image);
background-repeat: no-repeat;
}

.table_foot
{
width: largeur de votre image de fond;
height: hauteur de votre image de fond;
background-color: transparent;
background-image: url(adresse de votre image);
background-repeat: no-repeat;
}

Vous avez normalement votre table encadrée !!


Alors vous observerez dans doute que sur N-U les cadres changent selon les sections, l'en-tête du qui est en ligne est par exemple différent de ceux du forum... Pour cela, il faut mettre une division possédant une "class" différente juste avant la table du "Qui est en ligne" dans le code du template adéquat, en mettant dans le css l'image voulue en fond...

Mais là, pour ça ou l'intérieur du forum, je vous laisse chercher, c'est exactement le même principe, à vous de trouver où les placer !

Vos commentaires et remerciements sont toujours bienvenus ^^

Si vous avez des problèmes avec ce LS, venez poster ici.

Dernière édition par Sparrow-style le Jeu 14 Juin 2012 - 18:52, édité 3 fois

patriciadpt30

Age : 61Messages : 240

Jeu 12 Juin 2014 - 9:14

Merci c'est vraiment très beau :)
Cordialement Patricia

Pelezinho

Age : 25Messages : 91

Dim 29 Juin 2014 - 15:50

Merci !

Kimberlay *

Age : 34Messages : 161

Mer 2 Juil 2014 - 17:31

Merci pour ce tuto

Lighane

Age : 29Messages : 41

Lun 21 Juil 2014 - 15:45

merci !

Honeey L.

Age : 32Messages : 80

Jeu 31 Juil 2014 - 20:35

merci :)

Chione

Age : 23Messages : 397

Mar 19 Aoû 2014 - 21:00

Merci

Irissia87

Age : 37Messages : 124

Ven 29 Aoû 2014 - 15:32

merci :)

Invité

Dim 31 Aoû 2014 - 21:27

Merci beaucoup! :)

ShamRock

Age : 30Messages : 44

Mer 3 Sep 2014 - 12:11

Merci ~

Percylove

Age : 29Messages : 259

Sam 6 Sep 2014 - 2:06

Merci

Valeriane

Age : 39Messages : 29

Dim 14 Sep 2014 - 15:47

Looooove <3

skyfighter

Age : 41Messages : 352

Jeu 16 Oct 2014 - 11:39

merci

Selmacke

Age : 34Messages : 100

Jeu 16 Oct 2014 - 19:57

Sa rend bien merci :o :o ♥

Nevr0z

Age : 36Messages : 74

Lun 20 Oct 2014 - 18:26

Merci !

Asaliah

Age : 39Messages : 120

Lun 3 Nov 2014 - 14:55

Merci pour ce tutoriel !

Shadaan

Age : 32Messages : 80

Mar 11 Nov 2014 - 15:59

Merciiiiii

Whitye

Age : 39Messages : 13

Ven 14 Nov 2014 - 11:00

merci bien !

Kinjiro

Age : 25Messages : 80

Ven 14 Nov 2014 - 16:30

Merci :)

Mangédéfruiélégumeuh

Age : 27Messages : 83

Sam 15 Nov 2014 - 11:57

Trop bien ! :)
Merci ~

hirondelle

Age : 35Messages : 134

Dim 16 Nov 2014 - 19:16

Merci ♥

Cruelly

Age : 31Messages : 2605

Dim 23 Nov 2014 - 7:12

C'est justement le genre de chose que je cherche en se moment merci beaucoup

Faraday

Age : 34Messages : 39

Sam 13 Déc 2014 - 13:30

Thank's

MissDream

Age : 29Messages : 151

Sam 13 Déc 2014 - 16:33

merci ^^

Sid'

Age : 34Messages : 73

Dim 14 Déc 2014 - 17:17

Merci

Maya Seiko

Age : 31Messages : 129

Ven 19 Déc 2014 - 9:03

merci ^^

Contenu sponsorisé