Header

Partagez | 

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

Message Sujet: [Xooit] Modifier l'affichage de la case "dernier message" (index)   Ven 9 Sep - 14:40

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Coucou Smile

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


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

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

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



Tout le css est à mettre juste avant la balise

Code:
</style>

du template "overallheader"

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

Spoiler:
 




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas
[Xooit] Modifier l'affichage de la case "dernier message" (index)
Page 1 sur 1
 Sujets similaires
-
» Intégrer le bouton ''new, lock..'' dans la case dernier message
» Affichage autoamtique du dernier message d'un sujet
» Catégories, case du "dernier message"
» Affichage du dernier message posté sur l'index
» Affichage de "Dernier Message"
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens