AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

  ● Tutoriel #2 : Modifier la colonne dernier message

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

avatar

Admin

♦ Age : 22
♦ Messages : 251
♦ Arrivé le : 10/03/2011

MessageSujet: ● Tutoriel #2 : Modifier la colonne dernier message   Lun 9 Sep - 12:33


TUTORIEL N°2


Modifier la colonne dernier message



Pour réaliser ce tuto vous devez être le fondateur de votre forum pour avoir accès aux templates[/i]
● Tout d'abord trouver le template Index_box (panneau d'administration -> affichage -> templates)

● Trouver
Code:
    <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>
Vous pouvez le trouver à l'aide de Ctrl+F
Ceci représente le nom de chaque colonne :
{L_TOPICS} = sujets
{L_POSTS} = messages
{L_LASTPOST} = derniers messages

● Nous allons maintenant rassembler les catégories en une seule colonne. C'est plus esthétique hein :POn va commencer en supprimant au code précédent cette partie :
Code:
    <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
</th>
● Ensuite vous allez trouver ce code :
Code:
    <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>
et vous coupez cette partie (Ctrl+X) :
Code:
<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>
il ne vous reste donc que ça :
Code:
    <td class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
Vous venez donc de supprimer les deux colonnes sujets & messages.

● Alors maintenant vous trouvez ce code normalement il est sous vos yeux :
Code:
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
avec le code que vous avez coupé tout à l'heure vous le rajoutez avec ce code. Voilà le résultat :
Code:
<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><span class="gensmall">{catrow.forumrow.LAST_POST}</span>


● Ensuite vous enlevez tous les TD :
Code:
        <span class="gensmall">{catrow.forumrow.TOPICS}</span>
        <span class="gensmall">{catrow.forumrow.POSTS}</span>
      <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
et enfin vous rassemblez tout ça en une span, voilà le résultat :
Code:
        <span class="gensmall">{catrow.forumrow.TOPICS} sujets avec {catrow.forumrow.POSTS} messages </span>
    <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
Bien évidemment vous pouvez changer sujets & messages avec ce que vous voulez cela ne tient qu'à vous Smile

● On va maintenant personnaliser tout ça. Ça sera beaucoup plus esthétique. Pour cela on va rajouter des DIV que l'on modifiera par CSS. On va nommer les DIV Class message et dernier . Ce qui va donner :
Code:
        <div class="message"><span class="gensmall">{catrow.forumrow.TOPICS} sujets avec {catrow.forumrow.POSTS} messages </span> </div>
      <div class="dernier"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
● Et voilà pour la partie CSS :
Code:

.messages
{
background-color : #COLOR; /*Couleur de fond*/
color : #COLOR; /*Couleur du texte*/
width: XXXpx /*taille de la colonne*/
border: XXpx solid #color /*une bordure*/
}
.dernier
{
background-color : #COLOR; /*Couleur de fond*/
color : #COLOR; /*Couleur du texte*/
width: XXXpx /*taille de la colonne*/
border: XXpx solid #color /*une bordure*/
}
Bien évidemment vous pouvez changer le titre de la class comme vous le souhaitez, et modifier le CSS comme vous voulez.


Si vous avez des questions c'est par ici


By Mariiie


Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 

● Tutoriel #2 : Modifier la colonne dernier message

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Codage :: ♣ Tutoriaux :: Codage-