Coupler "forum sur 2 colonnes" et "caté' en bloc"

Bienvenue sur ce tutoriel qui vous permettra d'en coupler deux autres en répondant à une problématique à laquelle vous avez peut-être déjà été confrontés, à savoir la mise en place des forum sur deux colonnes ET de l'encadrement des catégories par des images de sorte qu'elles fassent des blocs indépendants. Le principal souci rencontré est alors que l'image de fond du corps de catégorie censé se répéter tout le long de celle-ci ne le fait pas. Dans le pire des cas les catégories en viennent à se chevaucher les unes les autres.
Dans ce tutoriel, j'espère vous aider à résoudre tout ces problèmes.

Voici le résultat final :  



Puisque, tant qu'à faire, je vais également approfondir la confection des "forum" en colonne, une seconde partie sera présente dans ce tutoriel, et je vais le démarrer de rien, donc d'un forum qui n'a rien eu de modifié. Tout comme dans le tutoriel des forum en deux colonnes, je vais commencer par "nettoyer" le template d'affichage des catégories.


1/ Placement des forum en deux colonnes

Tout d'abord assurez-vous que la hiérarchisation de votre forum est bonne, les catégories doivent être séparées et de niveau moyen. Vous pouvez vérifier/modifier cela en allant dans : "Affichage" > "Page d'accueil" > "Structure et hiérarchie".

Allez donc ensuite dans "Affichage" > "Templates" > "Général" > Affichage des catégories (index_box).

Pour gagner du temps, voici mon template nettoyé :

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




 <!-- END tablehead -->
 <!-- BEGIN cathead -->

 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 






<!-- END forumrow -->
 <!-- BEGIN catfoot -->

 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->



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

L'espace "catégorie" est alors vide, il n'y a pas de contenu, il faudra l'ajouter ensuite. Nous allons délimiter nos blocs, en commençant par refaire les blocs "forums" sur deux colonnes. J'insère donc deux blocs comme ceci, entre

Code:

<!-- BEGIN forumrow -->

et

Code:

<!-- END forumrow -->

car c'est là que se trouve le contenu des catégories, à proprement parlé, c'est à dire tout les forum.

Voici le résultat de l'ajout :

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




 <!-- END tablehead -->
 <!-- BEGIN cathead -->

 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 

<div class="forum_bloc">

  <div class="forum"></div>
  
</div>

 <!-- END forumrow -->
 <!-- BEGIN catfoot -->

 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->



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

N'oubliez pas d'enregistrer votre template.

Mon premier bloc porte le nom de "forum_bloc" et contiendra tout les forum d'une catégorie, le second nommé "forum" sera chaque forum contenu à l'intérieur. Jusque là cela ne diffère pas vraiment du précédent tutoriel sur le sujet.
Mettons nos blocs en forme avec du CSS :

Code:

.forum_bloc
{
  width: 850px;
  margin: auto;
}

.forum
{
  width: 410px;
  float: left;
  height: 200px;
  margin: 5px;
  background: white;
}

(Je n'ai mis la couleur blanche en fond de "forum" que pour que l'on visualise bien où son nos blocs, c'est important si vous placez les éléments de bien voir où ils commencent et s'arrêtent)

Voici le résultat obtenu :



Remarque : comme pour le tutoriel précédent il est important de comprendre que vos deux blocs ne peuvent se mettre côte à côte que s'ils en ont la place ! Si votre "forum_bloc" fait 800px de large et que vos deux blocs font 400px de large, ils pourraient techniquement être en "float" et se tenir côte à côte...mais vous devez tenir compte des marges ! Attention à votre total de pixel, marges comprises.


2/ Ajout des images du bloc catégorie

Passons maintenant à la partie qui, je pense, vous intéresse le plus : le positionnement des images de notre catégorie, afin de lui mettre un "header", un "body" et un "footer". Ce tutoriel étant du codage, je vous laisse tout le soin de réaliser les images comme bon vous semble ! Les miennes ne sont là que pour servir d'exemple.

Important ! : lors de la réalisation de votre image, pensez à la largeur totale de votre corps de forum. Dans mon cas, j'ai choisis ce que je voulais car le reste de mon forum test est vide, il n'y a pas de motif de corps, cependant il est possible que vous ayez défini un corps de 800px, et dans ce cas prenez garde à ne pas faire plus large pour vos blocs de catégorie.

Plaçons donc nos blocs qui serviront d'en-tête, corps et pied de catégorie :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<div class="cate_head"></div>
<div class="body">

        <!-- END tablehead -->
 <!-- BEGIN cathead -->

 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 

<div class="forum_bloc">

  <div class="forum"></div>
  
</div>

 <!-- END forumrow -->
 <!-- BEGIN catfoot -->

 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->

</div>
<div class="cate_foot"></div>

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

(Je n'ai mis que le contenu même des catégories, sans toutes les tables précédentes que toute façon nous ne toucherons pas).

J'ai donc placé le "head" et l'ouverture du "body" dans le "tablehead", puis j'ai refermé le "body" et mis le "foot" dans le "tablefoot".

N'oubliez pas d'enregistrer votre template après modification.

Ajoutons le CSS :

Code:

.cate_head
{
  width: 900px;
  margin: auto;
  height: 117px;
  background: url(http://img15.hostingpics.net/pics/684539cateimage01.png);
}
.cate_body
{
  width: 900px;
  margin: auto;
  background: url(http://img15.hostingpics.net/pics/772164cateimage02.png) repeat-y;
}
.cate_foot
{
  width: 900px;
  height: 49px;
  margin: auto;
  background: url(http://img15.hostingpics.net/pics/156768cateimage04.png);
}

Validez, et allez voir le résultat.



Aie aie... Etrange non ? Pourtant tout a été fait normalement, comme dans le tutoriel permettant de mettre des blocs autours des catégories. Alors pourquoi un tel résultat ? Et bien simplement car vos blocs de forum sont en "float", or si l'on ne dit pas de stopper ce "float", il reste. Du coup, nos blocs contenant les images ne savent pas vraiment où se mettre, ils ne tiennent pas compte de la présence des forum, ils ignorent où finissent chaque catégorie !

Nous allons donc commencer par leur dire "oh! stop ! ça c'est une autre caté', arrête de flotter n'importe où". Pour cela nous allons utiliser une propriété CSS : dans chaque en-tête de catégorie il faudra signaler que le float ne doit plus être pris en compte (et ne vous inquiétez pas, vos forum resteront sur deux colonnes car dès votre premier bloc forum le float reprendra).
Ajoutons donc la propriété au "cate_head" :

Code:

.cate_head
{
  clear: both;
  width: 900px;
  margin: auto;
  height: 117px;
  background: url(http://img15.hostingpics.net/pics/684539cateimage01.png);
}

Validez et regardons :



C'est mieux non ? Même si ce n'est pas encore ça... Nos catégories démarrent bien, mais comme je vous l'ai dit, les blocs de corps et de pied de catégorie ne comprennent pas où celle-ci commencent et où elles se terminent, à cause de tout ces éléments en flottement. Si l'on met un "clear: both" partout, nous n'auront plus de flottement et nos forum ne seront pas sur deux colonnes mais les uns sous les autres.
Ce que nous allons faire, c'est une sorte de ruse : nous allons utiliser un "span" qui ne se verra pas mais qui permettra à notre bloc de corps "cate_body" de se déployer jusqu'à elle sans avoir à se préoccuper des forum en "float". Regardez plutôt :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<div class="cate_head"></div>
<div class="cate_body">
  <span style="display: block; height: 1px; clear: both;"></span>
  
        <!-- END tablehead -->
 <!-- BEGIN cathead -->

 <!-- END cathead -->
 <!-- BEGIN forumrow -->
  
  <div class="forum_bloc">
  
  <div class="forum"></div>
    
  </div>
  
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->

 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
<span style="display: block; height: 1px; clear: both;"></span>
</div>
<div class="cate_foot"></div>

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

Ce qui a été ajouté c'est ceci :

Code:

<span style="display: block; height: 1px; clear: both;"></span>

Ce "span" a été placé juste au début du cate_body, et juste avant qu'il ne se referme. Ainsi, notre corps sait jusqu'où se répéter.




3/ Placer le titre de catégorie

Notre titre de catégorie sera sous forme de texte et sera contenu par le "cate_head". Dans le cas présent avec mon exemple, il sera logiquement placé dans la barre bleuté.

Commençons par placer notre titre, et pour cela il faut savoir reconnaitre la variable qui l'affiche. C'est celle-ci :

Code:

{catrow.tablehead.L_FORUM}

Plaçons-la dans le "cate_head", et dans un bloc qui nous permettra de la placer :

Code:

<div class="cate_head"><div class="titre_cate">{catrow.tablehead.L_FORUM}</div></div>

Validez et regardez, notre titre apparait bien, même s'il n'est pas encore positionné. Pour arranger ça, allez dans le css et commencez pas le placer en "absolute" :

Code:

.titre_cate
{
  position: absolute;
  width: 900px;
  text-align: center;
}

J'en ai profité pour le centrer (et pour centrer un élément dans un autre il faut donner une taille au contenant, c'est pourquoi j'ai mis le 900px en largeur, la même largeur que l'image de cate_head).

Là, si vous voulez modifier le titre de catégorie ça ne fonctionnera pas, ou disons pas pour toutes les propriétés. Pour cibler exactement l'élément de titre vous devez le nommer ainsi dans votre css :

Code:

.titre_cate h2
{
  font-size : 24px;
  text-transform: uppercase;
  font-family: arial;
  text-decoration: none !important;
  color: #308576;
}

C'est bien ce "h2" que l'on veut modifier, et le "titre_cate" devant lui précise que l'on ne souhaite modifier que le h2 contenu dans le bloc "titre_cate", afin de ne pas modifier tout les titres H2 du forum x).

Pour placer ensuite ce titre où vous souhaitez, ajoutez simplement une marge dans le "titre_cate" :

Code:

.titre_cate
{
  position: absolute;
  width: 900px;
  text-align: center;
  margin-top: 35px;
}
.titre_cate h2
{
  font-size : 24px;
  text-transform: uppercase;
  font-family: arial;
  text-decoration: none !important;
  color: #308576;
}

Et voilà !



Libre à vous de mettre ce titre où vous voulez, selon l'image que vous avez réalisée pour votre en-tête de catégorie.


Voici donc cette première partie de tutoriel achevée, si vous voulez corriger le petit défaut des forum qui ne sont pas totalement centrés, vous pouvez jouer avec la largeur du "forum_bloc" ou avec la largeur des "forum". Personnellement j'ai augmenté cette dernière à 415px afin que l'ensemble soit aligné.



La seconde partie du tutoriel vous donnera une méthode simple pour placer où vous voulez vos éléments de forum.

Dans cette seconde partie de tutoriel je vais vous donner une méthode pour remplir vos cases de forum avec tout les éléments nécessaires de sorte que vous puissiez être les plus libres possibles dans leur positionnement.

Récapitulons dans un premier temps les éléments à mettre :
- le titre-lien du forum
- l'icône de statut du dernier message (nouveau, pas de nouveau message, verrouillé)
- la description (image et/ou texte)
- les statistiques (nombre de sujets et messages)
- les liens des sous-forum (sauf si vous ne souhaitez pas qu'ils apparaissent)
- la date, l'auteur et le lien du dernier message posté dans le forum

Ce sont les éléments présents le plus souvent. Il se peut que les stats ou les sous-forum ne soient pas présents, mais la plupart du temps ils le sont. De même, on pourrait ajouter les modérateurs du forum, mais je ne trouve pas cette information utile donc je ne vais pas en tenir compte dans ce tutoriel.


1/ Identification des éléments cités

Pour bien le remettre dans nos forum il est important de savoir comment ils se présentent. Ces éléments sont tous des variables et donc sous forme {NOM} ou {NOM_COMPOSE}.

Rappel : il est toujours possible de visualiser le template de base avec le lien en bas du template une fois ouvert. Cliquez et vous ouvrez un nouvel onglet avec le template d"origine, sans que cela n'affecte votre template modifié (vous ne pouvez pas valider ce template d'origine de toute façon, vous ne pourrez pas vous tromper de page).

Voici les éléments identifiés :
(tels qu'ils apparaissent dans le template de base, avec leur contenant, certains pourront être modifiés ensuite)

Le nom du forum :

Code:

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

L'icône des statuts de message :

Code:

<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

La description du forum :

Code:

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

Les liens des sous-forum et leur mini-icône :

Code:

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

Les statistiques :

Code:

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


Le lien du dernier message :

Code:

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

Ce qui compte vraiment sont chaque fois les éléments entre accolades. Je vais donc simplement replacer tout ces éléments, en bordel, dans mon bloc de forum. Cependant, je ne vais pas juste les remettre avec leur "span" actuels, je vais modifier un peu chaque élément, et tous les mettre dans un bloc chacun pour pouvoir les bouger à loisir ensuite.


2) Insertion des éléments sans logique ni ordre

Voici donc tout mes éléments insérés, avec des annotations dans le code afin que vous puissiez voir rapidement à quelle donnée ils correspondent.

Code:

 <div class="forum">
    
    <!-- titre du forum -->
    <div class="forumlink"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
    
    <!-- icone des messages -->
    <div class="forum_icone"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
    
    <!-- description -->
    <div class="forum_description">{catrow.forumrow.FORUM_DESC}</div>
    
    <!-- sous forum -->
    <div class="sous_forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
    
    <!-- stats -->
    <div class="forum_stats"><span class="stats1">{catrow.forumrow.TOPICS}</span><span class="stats2">{catrow.forumrow.POSTS}</span></div>
    
    <!-- dernier message -->
    <div class="dernier_mess">{catrow.forumrow.LAST_POST}</div>  
  
   </div>

Et voici ce que ça donne :



Pour l'instant, tout est là mais c'est bordélique, toutes les infos ne rentrent pas dans la case.

Nous allons maintenant donner une taille et une couleur de fond à chaque élément. Ces couleurs de fond ne seront pas définitives, c'est simplement pour pouvoir bien visualiser nos éléments et l'espace qu'ils prennent.
Pour cela, un peu de CSS s'impose...

Code:

.forumlink
{
  width: 415px;
  height: 12px;
  background: blue;
}
.forum_icone
{
  width: 30px;
  height: 60px;
  background: red;
}
.forum_description
{
  width: 400px;
  height: 100px;
  background: yellow;
}
.sous_forum
{
  width: 415px;
  height: 30px;
  background: purple;
}
.forum_stats
{
  width: 150px;
  height: 10px;
  background: grey;
}
.dernier_mess
{
  width: 150px;
  height: 60px;
  background: orange;
}

Ils possèdent tous une couleur flashy différente pour être visibles, mais ce n'est pas tout, nous allons ajouter d'autres éléments importants :
- puisque notre case forum n'est pas extensible, nos éléments ne doivent pas l'être non plus, si la description s'allonge elle risque de sortir du bloc, ou de décaler d'autres éléments. Nous allons donc fixer la taille et mettre un overflow de sorte qu'un scroll apparaisse en cas de contenu trop long.
- nous allons également mettre tout ces éléments en "absolute". Ils vont alors tous se chevaucher, mais au moins ils pourront être déplacer avec précision et justesse.

Voici le css :

Code:

.forumlink
{
  position: absolute;
  width: 415px;
  height: 12px;
  background: blue;
}
.forum_icone
{
  position: absolute;
  width: 30px;
  height: 60px;
  background: red;
}
.forum_description
{
  position: absolute;
  overflow: auto;
  width: 400px;
  height: 100px;
  background: yellow;
}
.sous_forum
{
  position: absolute;
  overflow: auto;
  width: 415px;
  height: 30px;
  background: purple;
}
.forum_stats
{
  position: absolute;
  width: 150px;
  height: 10px;
  background: grey;
}
.dernier_mess
{
  position: absolute;
  overflow: auto;
  width: 150px;
  height: 60px;
  background: orange;
}

Et voici le résultat :



On ne pourrait pas dire qu'on progresse, vu comme ça, mais en fait si x). Maintenant tout nos éléments sont alignés avec l'angle supérieur gauche du bloc, et il va être plus simple de les déplacer en étant sûr de ne jamais décaler un autre élément. En effet, les éléments ne tiennent désormais plus compte de la présence les uns des autres.
Avec des marges, je vais donc pouvoir les déplacer pour les mettre où je veux.


3) Placer les éléments

Pour faire cela il faut tenir compte de la taille de l'élément mais aussi de son contenu. Réduisez la taille de la police de vos blocs dès le début pour y voir plus clair et surtout savoir exactement la longueur de vos textes. Vous pouvez jouer des dimensions de l'élément, les réduire, les augmenter, etc...
Remarque : si l'un de vos éléments n'est plus visible c'est peut-être parce qu'il est en dessous des autres ! Je rappelle alors que le "z-index" peut vous aider à choisir quel élément vous placez au dessus : plus la valeur du z-index est élevée plus l'élément sera prioritaire.

Voici un exemple de placement :

Code:

.forum
{
  width: 415px;
  float: left;
  height: 200px;
  margin: 15px 5px;
  background: white;
}

.forumlink
{
  position: absolute;
  width: 415px;
  height: 20px;
  background: blue;
  margin-top: -20px;
}
.forum_icone
{
  position: absolute;
  width: 150px;
  height: 40px;
  background: red;
  margin-left: 257px;
  margin-top: 90px;
}
.forum_description
{
  position: absolute;
  overflow: auto;
  width: 250px;
  height: 150px;
  background: yellow;
  font-size: 11px;
  text-align: justify;
}
.forum_description img
{
  float: left;
  margin-right: 5px;
  width: 60px;
}
.sous_forum
{
  position: absolute;
  overflow: auto;
  width: 415px;
  height: 45px;
  background: purple;
  margin-top: 155px;
}
.forum_stats
{
  position: absolute;
  width: 150px;
  height: 10px;
  background: grey;
  margin-left: 257px;
  margin-top: 20px;
  font-size: 10px;
  text-align: center;
}
.dernier_mess
{
  position: absolute;
  overflow: auto;
  width: 150px;
  height: 60px;
  background: orange;
  text-align: center;
  font-size: 11px;
  margin-left: 257px;
  margin-top: 30px;
}

Conseil : vous pouvez encore et toujours changer vos tailles de forum si vous les trouvez trop petites, ou au contraire trop grandes. Dans mon cas, puisque je souhaite que le titre des forum apparaisse au dessus du bloc, j'ai augmenté la marge haute et basse de mes forum, pour avoir la place d'y caler le titre.



Rappel des couleurs :
- bleu : titre forum
- gris : stats
- jaune : description
- orange : dernier message
- rouge : icone message
- violet : sous-forum

Le principe est vraiment simple : vous choisissez la taille de vos blocs, et vous les déplacez avec des marges. Si vous voulez changer un ordre de positionnement d'élément (pour qu'un élément en dessous d'un autre apparaisse plutôt au-dessus de lui) pensez à utiliser le "z-index", comme ceci :

Code:

.mon_element_1
{
position: absolute;
z-index: 1;
}
.mon_element_2
{
position: absolute;
z-index: 2;
}

Dans ce cas, l'élément 2 sera au-dessus du 1, puisque son z-index est plus élevé, si je voulais inverser cela en plaçant l'élément 1 au dessus, je devrais simplement changer les chiffres.

Il ne restera plus qu'à personnaliser tout cela en choisissant vos couleurs de fond, de texte, vos fonds en image éventuellement, les effets sur vos liens, etc... Vous pouvez placer les sous-forum en colonnes (je vous laisse pour cela consulter le tutoriel de Taktiik), le lien du dernier message sur une seule ligne (tutoriel que vous trouverez dans la section), etc...
Veillez ensuite à réaliser des icônes de message dont la dimension correspondra à l'espace prévu !
N'oubliez pas d'enlever les couleurs de fond criardes qui ont servi à bien visualiser le positionnement

Conclusion :
Il va de soi que le même procédé peut servir PARTOUT ! Que vos forum soient en colonne ou en ligne, vous pouvez procéder pareil. De même pour tout autre bloc ! Vous pouvez placer ainsi vos éléments de QEEL, les éléments dans un message, vos éléments de profil, etc...
L'important est de TOUJOURS se situer dans un bloc défini ! Dans notre cas c'était le "forum", mais peu importe le nom, l'endroit et le contenu à placer, vous devez bien délimiter le contenant.