Vous êtes perdu sur le forum ? Notre page d'accueil est là pour vous guider avec son menu rapide vers les principaux forums !
Vous ne vous souvenez plus d'une règle pour les clashs ou pour les commandes ? Notre page réunissant <a href="https://angels-design.forumactif.com/Les-regles-d-Angels-Design-h1.htm">toutes les règles du forum</a> est là pour vous aider !

Rejoignez le forum, c’est rapide et facile

Vous êtes perdu sur le forum ? Notre page d'accueil est là pour vous guider avec son menu rapide vers les principaux forums !
Vous ne vous souvenez plus d'une règle pour les clashs ou pour les commandes ? Notre page réunissant <a href="https://angels-design.forumactif.com/Les-regles-d-Angels-Design-h1.htm">toutes les règles du forum</a> est là pour vous aider !
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment :
Funko POP! Jumbo One Piece Kaido Dragon Form : ...
Voir le deal

Aller en bas
Anonymous
Invité
Invité

[Templates & CSS] Supprimer la colonne Derniers Messages Empty [Templates & CSS] Supprimer la colonne Derniers Messages

Sam 24 Juil 2010, 11:42
Supprimer la colonne "Derniers Messages"

Niveau: Facile | Par: .Little Lady | Validé par: .Little Lady | En date du: 14.06.2010

Vous souhaitez démarquer votre forum des autres et le rendre original ? Vous souhaitez éviter l'affichage habituel des forums ?? Alors voici un petit tuto qui vous permettra de supprimer la colonne "Derniers Messages". Il vous suffira simplement de suivre étape par étape ce p'tit tuto.

Pour commencer, il faut être le Fondateur du forum car il nous faudra modifier les templates.
Allez dans le Panneau d'Administration >> Affichage >> Général >> Index_Box

I: - Suppression de la colonne "Derniers Messages" -

Pour commencer, nous allons supprimer ce qui sera inutile.
Dans votre template, cherchez et supprimez cette ligne.
Code:
<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
Pour aller plus vite, vous pouvez utilisez Ctrl + F.

Ensuite, cherchez ceci:
Code:
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>

Supprimez ceci:
Code:
<td class="row3 over" align="center" valign="middle" height="50">

et ceci:

Code:
</td>

A ce moment, la colonne "Derniers Messages" n'existe plus sur votre forum. Maintenant, il faut bien mettre le texte de cette colonne quelque part. Je vous propose donc de le mettre dans la case de la description des sous-forums.

II: - Replacer les Statistiques -

Maintenant, il faut replacer les statistiques. Je vous propose donc de le mettre dans la case de la description des sous-forums.

Et pour cela nous avons besoin de la variable représentant ces statistiques; soit:
Code:
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>

Dans votre template, il vous faut donc localiser l'endroit où nous souhaitons le mettre, c'est-à-dire ici:
Code:
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
      <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">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

Une fois que vous avez repéré ce morceau de code, il vous suffit de le remplacer par celui-ci:
Code:
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
      <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}>
<table>
<tr>
<td><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</td>
<td>
<div class="messages_sujets_derniers_sujets">
<div class="derniers_sujets"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
</div>
</td>
</tr>
</table>

Vous avez pu vous apercevoir que j'ai ajouté deux div dans le code: messages_sujets_derniers_sujets & derniers_sujets.
Ces deux balises vous permettront de personnaliser l'affiche des statistiques avec du CSS.

Ça y est, vous avez bien suivi le tuto ?? Alors vous pouvez enregistrer et publier votre template.

III: - Personnaliser avec du CSS -

Il est évident que cela sera plus joli avec du CSS. Nous allons donc personnaliser tout ça alors préparez-vous. Pour cela, il faut ouvrir votre feuille CSS. Allez donc dans le Panneau d'Administration >> Affichage >> Couleurs >> Feuille de Style CSS

Maintenant, il faut mettre la class relative à nos "div" dans le template modifié; soit la class "messages_sujets_derniers_sujets" et la class "derniers_sujets".

Bien évidemment, vous pouvez personnaliser à votre façon ces div.

Code:
.messages_sujets_derniers_sujets {
margin-left: VALEURpx; /*espace entre le bord gauche et la bordure*/
padding-top: VALEURpx; /*espace entre le texte et la bordure du haut*/
padding-left: VALEURpx; /*espace entre le texte et la bordure gauche*/
padding-bottom: VALEURpx; /*espace entre le texte et la bordure du bas*/
padding-right: VALEURpx; /*espace entre le texte et la bordure droite*/
border-top: VALEURpx solid #COULEUR;
border-left: VALEURpx solid #COULEUR;
border-bottom: VALEURpx solid #COULEUR;
-moz-border-radius-topleft: VALEURpx; /*arrondir l'angle gauche du haut*/
-moz-border-radius-bottomleft: VALEURpx;/*arrondir l'angle gauche du bas*/
}

/*affichage derniers messages*/
.derniers_sujets {
padding: VALEURpx; /*espace entre le texte et la bordure*/
margin: VALEURpx; /*espace entre le bord et la bordure*/
border: VALEURpx dashed #COULEUR;
-moz-border-radius-topleft: VALEURpx; /*arrondir l'angle gauche du haut*/
-moz-border-radius-bottomright: VALEURpx; /*arrondir l'angle droit du bas*/
text-align: center;
}

Voilà, nous arrivons à la fin de tuto. En espérant que celui-ci ait pu vous servir.
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum