[forumactif][Template] Modifier la mise en page des descriptions

Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à faire ceci :

Vous allez voir, c'est très simple quand on comprend pourquoi faire telle ou telle chose.

C'est partie !

Modification du template

Avant tout, nous allons devoir modifier le template affichant nos catégories. Ce template s'appelle : "index_box". Dans celui-ci, repérez ce passage

Code:

<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">
         
         {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
         
         {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      </span>
   </td>

Ce code correspond à la case décrivant votre forum/sous forum. Décortiquons un peu ça :

{catrow.forumrow.FORUM_NAME} = Le nom du forum (sur mon exemple "La salle du Dhamma")
{catrow.forumrow.FORUM_DESC} = La description du forum (sur mon exemple "Nouveau venu ? Viens écouter les ens....")

Code:

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}

= l'affiche des modérateurs de sections

{catrow.forumrow.L_LINKS} = séparateur/image des sous-forums
{catrow.forumrow.LINKS} = lien vers les sous forum

On va commencer ici par modifier l'affichage des colonnes (pour avoir les stats' dans la partie "description". Pour cela, je vous invite à lire [ce tutoriel].

Ensuite, on va encadrer ce qu'on veut modifier
*** La description :

Code:

<div class="description">{catrow.forumrow.FORUM_DESC}</div>

*** Les stats : (on va aussi changer un peu le texte)

Code:

<div class="stats_cate">{catrow.forumrow.TOPICS} sujets contenant {catrow.forumrow.POSTS} messages</div>

Au final, notre code précedent, n'est plus du tout le même, il ressemble à ça maintenant :

Code:

<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}>
      <div class="stats_cate">{catrow.forumrow.TOPICS} sujets contenant {catrow.forumrow.POSTS} messages</div>
      <div class="description">{catrow.forumrow.FORUM_DESC}</div>
      <span class="gensmall">
         
         {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
         
         {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      </span>
   </td>

Validez votre template et publiez le. Pour le moment, ça ne ressemble à rien

Spoiler:

Modification du css

Rappel : Les codes ci-dessous sont à copier dans Panneau d'admin >> affichage >> couleurs >> feuille de style

Travaillons maintenant la mise en page ^^ Pour pour vous aider, n'hésites pas à faire un tour au niveau des codes css : [clic]

*** Les titres :

Ici, nous n'avons pas changé le template. On va donc se baser sur le code de base de FA. On va néanmoins :

Centrer le texte
Lui donner une couleur
Lui ajouter une bordure
Enlever le gras
Donner une taille de police au texte
Mettre le texte en petites capitales

Code:

a.forumlink{
display:block;
font-size:14px; /* la taille de la police */
padding:2px; /* Pour éviter que le texte ne soit collé aux bords de la case */
text-align:center;
font-variant:small-caps; /* Les petites capitales */
color:#6e5831 !important; /* On force l'application de cette propriété grâce au !important */
border-bottom:4px double #6a3e1a;
font-weight:normal; /* Le texte non boldé */
margin-bottom:0; /* Pour qu'il n'y ait pas trop d'espace entre le titre et ce qu'il y a en dessous */
}

Appliquons aussi un style quand la souris passe sur le texte

Code:

a.forumlink:hover{
font-variant:small-caps;
color:#6e5831 !important;
border-bottom:4px double #6a3e1a;
font-weight:bold; /* Texte en gras */
display:block;
}

Spoiler:

*** La mise en page des stats'
Ici, on va :

Aligner le texte à droite
Ajouter des bordures en bas et à droite
Mettre le texte en italic
Ne pas afficher la bordure sur toute la largeur de la case
Donner une taille de typo
Placer le bloc à droite

ce qui nous donne :

Code:

div.stats_cate{ /* La div ayant pour class 'stats_cate' */
font-size:12px;
text-align:right;
border-bottom:#6a3e1a 1px solid;
border-right:#6a3e1a 3px solid;
font-style:italic; /* On met le texte en italic */
color:#6a3e1a;
padding-right:4px; /* On met un peu de remplissage pour éviter que notre bloc soit collé au bord droit de la case */
margin-bottom:4px;
margin-top:-12px; /* On évite de mettre un trop gros espace entre le titre et notre bloc de stats' */
width:220px; /* On impose une largeur pour ne pas que la bordure en bas soit sur toute la largeur de la case */
margin-left:385px; /* On place le bloc à droite en le décallant par rapport au bord gauche de la case */
}

ça commence à prendre forme

Spoiler:

*** La description :

Il ne nous reste plus que la mise en page de la description du forum/sous forum. Cette fois, on va :

Lui donner une couleur de fond
Arrondir les coins du bloc
Mettre une bordure en trait plein
Imposer une largeur ainsi qu'une hauteur minimum
Donner une taille à notre texte ainsi qu'une couleur

Code:

div.description{ /* La div ayant pour class 'description' */
background-color:#efdec0; /* On lui donne une couleur de fond */
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #b79981;
width:560px;
min-height:20px; /* La hauteur minimum */
font-size:12px;
text-align:justify;
text-indent:6px; /* La première ligne du bloc sera décallée de 6px vers la droite */
padding:4px;
margin:4px;
color:#6e5831;
}

Et voilà ! Vos descriptions sont totalement personnalisées Wink

Evidemment, à vous d'adapter le style à vos forums

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]