[ForumActif] Modifier l'affichage de la case "dernier message" (index)

Coucou

Dans ce tutoriel, nous allons apprendre à faire ça :

Pré-requis :

Avoir accès aux templates du forum (forum en phpbb2)
Avoir quelques connaissances en HTML & CSS
Avoir "fusionner" les colonnes dernière message, sujets, et nombre de messages (pour cela, vous pouvez vous aider de ce tuto)

Préparation de la structure

Tout d'abord, ouvrez le template index_box

Ensuite, on va commencer par mettre "dernière message, sujets, et nombre de messages" dans un tableau. Ce tableau va avoir 2 lignes et 1 colonne. La ligne du haut contiendra le dernier message, et la ligne du bas les infos. On va donner un nom à notre tableau ainsi qu'à chacune de nos lignes

Code:

<table class="case_stats" cellpadding="0" cellspacing="0">
<tr>
<td class="dernier_msg">Le dernier message</td>
</tr>
<tr>
<td class="stats_forum">les stats</td>
</tr>
</table>

Si on ajoute les infos de FA :

Code:

<table class="case_stats" cellpadding="0" cellspacing="0">
         <tr>
            <td class="dernier_msg"><p>{catrow.forumrow.LAST_POST}</p></td>
         </tr>
         <tr>
            <td class="stats_forum"><p> {catrow.forumrow.POSTS} messages pour {catrow.forumrow.TOPICS} sujets </p></td>
         </tr>
      </table>

Ce code est donc celui à mettre à la place de :

Code:

<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
<span class="gensmall"> {catrow.forumrow.POSTS} messages pour {catrow.forumrow.TOPICS} sujets </span>

La mise en page

de la case

Maintenant, travaillons la mise en page ^^ On a donc les 2 images que l'on veut mettre ainsi que les couleurs de fond:
-> couleur = #eacda3, l'image du haut

Spoiler:

-> couleur = #96774a, l'image du bas

Spoiler:

On va donc faire un peu de css Smile

1/ On va donner au tableau "case_stats" la même taille que l'image faite sous photoshop (pour moi 140px de haut sur 200px de large) et on va centrer ce tableau

Code:

table.case_stats{
width:200px; /* largeur */
height:140px; /* La hauteur */
margin:auto; /* on centre */
}

2/ On va commencer par travailler la case du haut. On lui donne une image de fond qu'on place en haut et au centre, et on lui dit qu'elle ne doit pas se répéter. On précise aussi que le texte doit se trouver à N px des bords (padding)

Code:

table.case_stats td.dernier_msg{
background-image:url('http://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/dernier_msg_01.png');
background-position: center top;
background-repeat:no-repeat;
padding-left:50px;
padding-right:60px; /* Je déclasse du bord droit de 60px à gauche de ma pate */
padding-top:10px;
height:75px; /* mon image fait 85px de haut, mais comme j'ajoute 10px de remplissage, j'impose à ma case une hauteur = hauteur de mon image - padding top */
}

3/ On fait la même chose avec la case du bas, sauf que cette fois, on met l'image en bas de la case

Code:

table.case_stats td.stats_forum{
background-image:url('http://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/dernier_msg_02.png');
background-position: center bottom;
background-repeat:no-repeat;
padding-left:4px;
padding-right:4px;
}

Spoiler:

du texte

Il ne nous reste plus qu'à travailler le texte maintenant ^^

On va commencer par "le dernier message".

Dans le html, on va remplacer ça :

Code:

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

par

Code:

<p>{catrow.forumrow.LAST_POST}</p>

Pour modifier le style du texte, il va falloir mettre dans ton css :

Code:

table.case_stats td.dernier_msg p{
les propriétés CSS pour le texte "normal";
}

table.case_stats td.dernier_msg p a{
les propriétés CSS pour les liens;
}

table.case_stats td.dernier_msg span.gensmall a:hover{
les propriétés CSS pour les liens survolés;
}

par exemple :

Code:

table.case_stats td.dernier_msg p{
color:#e26e26;
width:140px; /*la largeur de mon bloc moins la largeur de ma pate */
padding:0;
margin:0;
margin-left:10px; /* Je décalle un peu par rapport aux bords gauche pour éviter que mon texte ne soit en dehors de mon cadre */
font-size:12px;
}

table.case_stats td.dernier_msg p a{
text-decoration:none;
color:blue;
}

table.case_stats td.dernier_msg p a:hover{
border-bottom:green 1px dashed;
color:green;
}

Pour les stats maintenant Smile

On va remplacer dans le html ça :

Code:

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

par ça

Code:

<p>{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets</p>

et dans le css, on va faire :

Code:

table.case_stats td.stats_forum p{
les propriétés CSS pour le texte "normal";
}

par exemple :

Code:

table.case_stats td.stats_forum p{
color:pink;
width:160px; /*la largeur de mon bloc moins quelques px */
margin-left:50px;
font-size:10px;
font-weight:bold;
text-align:center;
padding:0;
}

et voilà

Spoiler:

Des questions, problèmes liés à ce tutoriel ? Venez les poser [ici]