C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Système d'onglets simple et personnalisable
Lun 17 Sep 2018, 05:44 par heresy.

» Effet pour vos catégories
Sam 15 Sep 2018, 06:41 par Dynaste

» [RPG] Fiche personnage avec bannière latérale
Mar 11 Sep 2018, 15:29 par Rosalie Hale

» Signature codée avec onglets
Sam 01 Sep 2018, 16:11 par Plumeplume

» Mettre votre © Copyright dans le footer de votre forum
Mar 28 Aoû 2018, 12:13 par kaiton

» Sous-forums en retour à la ligne
Lun 27 Aoû 2018, 13:26 par sergiomarquina

» Effet pour vos sous-forums
Lun 27 Aoû 2018, 13:23 par sergiomarquina

» Trois colonnes avec effet Zoom
Lun 27 Aoû 2018, 08:40 par sergiomarquina


Partagez | 
 

Modifier l'emplacement du nombre de vues/réponses d'un topic

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.css-actif.com/
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Modifier l'emplacement du nombre de vues/réponses d'un topic


Informations générales

Description :
Dans ce tutoriel, je vais vous montrer comment supprimer les colonnes "Réponses" et "Vues" se trouvant dans la liste des sujets d'un forum, et à placer les statistiques à côté du titre du message, ou bien dans la même cellule que le lien du dernier message posté.

Démo :
Cliquez pour voir un aperçu

Testé sur :
Non renseigné

Crédits :
Proposé par Furase le 02/07/2010 | Validé par Hαrιcoow

Mise(s) à jour :
Refonte complète le 25/08/2012 par 'Christa Lostmindy

Le tutoriel


• Vous devez être fondateur de votre forum pour pouvoir éditer les templates
• Ce tutoriel s'applique aux forums de ForumActif en version phpbb2

Attention : Dans votre panneau d'administration, assurez vous que les sujets et annonces ne sont pas séparés par une ligne de tableau. Pour cela, rendez vous sous l'onglet Général, menu Messages et Emails » Configuration. Pour l'option Séparer les annonces et posts-it des messages, assurez vous que la case Par un tableau ne soit pas cochée.


Tout d'abord, et je pense ne pas vous surprendre avec ce conseil, ouvrez votre template topic_list_box. Vous le trouverez sur votre panneau d'administration, onglet Affichage, menu Templates » Général.

Supprimer les colonnes "vues" et "réponses"


1. Supprimer les cellules de titre


La première chose que nous allons faire, c'est supprimer les cellules qui contiennent les mots "Réponses" et "Vues". Il nous faut pour cela trouver où elles sont. Ce n'est pas très compliqué, une cellule de titre est toujours entourée par les balises <th> et </th> (au lieu de <td>). Et puisqu'il est question des réponses et des vues, c'est justement écrit dans les variables, en anglais, il vous faut donc repérer les mots REPLIES et VIEWS. Ce qui correspond donc à ces deux lignes :
Code:
<th align="center" nowrap="nowrap" width="80"> {topics_list_box.row.L_REPLIES} </th>
Code:
<th align="center" nowrap="nowrap" width="50"> {topics_list_box.row.L_VIEWS} </th>
Vous les avez trouvées ? Hé bien, supprimez-les maintenant !

2. Retirer les cellules contenant le nombre de vues et de réponses


Maintenant, il faut aussi supprimer les colonnes associées, celles qui contiennent les valeurs proprement dites. Repérez les cellules (parties de code entourées des balises <td> et </td>, pour rappel) qui contiennent le nombre de réponses (repérez le REPLIES) et le nombre de vues (repérez le VIEWS). Pas difficile à trouver, chacune ne fait qu'une seule ligne de code !
Code:
<td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
Code:
<td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
Maintenant que vous les avez trouvées, supprimez-les, tout simplement.

Notez bien les deux variables de templates entre accolades, car nous allons devoir les réutiliser. Ce sont ces variables qui affichent le nombre de sujets et de vues.

Placer les statistiques


C'est désormais à vous de placer les deux variables {topics_list_box.row.REPLIES} et {topics_list_box.row.VIEWS} à l'endroit que vous souhaitez dans votre mise en page. Voici néanmoins quelques propositions.

1. A côté du titre du sujet


Pour les placer à côté du titre du sujet, nous allons devoir faire un tableau, et à partir de là ça se complique un peu, donc restez bien concentrés.

Cherchez la cellule qui contient le titre du sujet, sa description, et ainsi de suite :
Code:
      <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
         <div class="topictitle">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title">
               <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
         </div>
         <!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
         <!-- END switch_description -->
         <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
         <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
      </td>

C'est là que nous allons faire notre tableau. Il comportera une seule ligne et deux cellules.
Sautez une ligne sous la première ligne du code que j'ai cité (le <td ... >). Nous allons ouvrir notre tableau ici, puis notre ligne, et enfin notre cellule. Et pour que notre tableau prenne toute la largeur disponible, nous allons rajouter l'attribut width="100%".
Les deux premières lignes du code précédent vont donc devenir :
Code:
      <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
            <table width="100%"><tr>
               <td>
                  <div class="topictitle">
Un tableau devant être fermé, il nous faut rajouter la fermeture de cellule, ainsi que la cellule destinée à reçevoir nos statistiques, puis la de ligne et de table à la fin du code. Les deux dernières lignes deviennent alors :
Code:
            <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
            </td>
            <td>
               <!-- ICI ON VA RAJOUTER NOS STATISTIQUES -->
            </td>
         </tr></table>
      </td>
Nous allons à présent travailler là où j'ai mis mon annotation en commentaire.

On va devoir rajouter l'affichage de nos vues et de nos réponses, pour ça les deux variables signalées plus tôt dans ce tutoriel vont nous être utiles. On gardera également la classe .postdetails qui était utilisée pour leur affichage, et on rajoutera une classe .StatsTopics qui nous servira à faire des personnalisations plus poussées via le CSS du forum.
Vous allez donc remplacer le commentaire que j'avais mis plus haut :
Code:
<!-- ICI ON VA RAJOUTER NOS STATISTIQUES -->
Par ceci :
Code:
<div class="postdetails StatsTopics">
   Réponses : {topics_list_box.row.REPLIES}
   <br />
   Vues : {topics_list_box.row.VIEWS}
</div>

Si vous avez bien suivi mes indications, vous devriez donc avoir quelque chose comme ça :
Code:
      <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
         <table width="100%">
            <tr>
               <td>
                  <div class="topictitle">
                     {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
                     <h2 class="topic-title">
                        <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
                     </h2>
                  </div>
                  <!-- BEGIN switch_description -->
                  <span class="genmed">
                     <br />
                     {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                  </span>
                  <!-- END switch_description -->
                  <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
                  <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
               </td>
               <td>
                  <div class="postdetails StatsTopics">
                     Réponses : {topics_list_box.row.REPLIES}
                     <br />
                     Vues : {topics_list_box.row.VIEWS}
                  </div>
               </td>
            </tr>
         </table>
      </td>
Il ne vous reste à présent plus qu'à enregistrer le template, le publier, et vous pourrez voir vos modifications.

Nous avons maintenant nos statistiques qui vont s'afficher à droite du titre du sujet. Mais ce n'est pas encore très joli car cet affichage n'est pas aligné contre la cellule suivante, qui indiquera donc le nom de l'auteur du sujet. C'est là que le CSS entre en ligne de compte !

Rendez vous dans votre panneau d'administration, onglet Affichage puis Images et couleurs » Couleurs et enfin dans l'onglet Feuille de style CSS. C'est le moment de définir la classe .StatsTopics qu'on a utilisée plus haut.
Code:
.StatsTopics {
   width:150px; /* largeur de la cellule */
   text-align:right; /* texte aligné à droite */
}
Vous pouvez rajouter d'autres propriétés CSS, couleur du texte, taille du texte, fond du bloc contenant les statistiques, marges internes et externes, et ainsi de suite. Enregistrez vos modifications CSS, et voilà !

2. Aligné à côté du titre du message, en flottant


Si vous souhaitez que vos statistiques "flottent" dans un coin de la cellule (en poussant le texte autour), comme ceci :



Dans votre template topic_list_box :
Cherchez cette ligne :
Code:
<div class="topictitle">
Juste avant, AJOUTEZ ce code :
Code:
<div class="postdetails StatsTopics">Réponses : {topics_list_box.row.REPLIES} | Vues : {topics_list_box.row.VIEWS}</div>
(N'oubliez pas de sauter une ligne entre les deux histoire de pouvoir relire votre code plus facilement)

Puis, dans le CSS, ajoutez ceci :
Code:
.StatsTopics {
 float:right; /* flottant à droite, vous pouvez remplacer par left */
 /* et toute autre mise en page que vous voulez */
}

Notez que si vous ne mettez pas de propriété float, vos statistiques s'afficheront au dessus du titre, comme ça par exemple :


3 . Sur la même ligne que le titre du message


Si vous souhtaitez que les statistiques soient écrites à la suite du titre du message, comme ceci :


Dans votre template topic_list_box :
Cherchez le titre du topic :
Code:
            <h2 class="topic-title">
               <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
Et juste après, ajoutez :
Code:
 <span class="postdetails StatsTopics">(Vu {topics_list_box.row.VIEWS} fois, {topics_list_box.row.REPLIES} réponses)</span>
Notez bien qu'ici on utilise une balise <span> et non plus <div>, ceci pour que les statistiques soient sur la même ligne que le titre (différent du bloc

Pour personnaliser la mise en forme, n'oubliez pas de définir la classe .StatsTopics dans votre CSS, par exemple :
Code:
.StatsTopics {
 font-weight:normal; /* pour éviter que le texte soit en gras par défaut */
 /* Et toute autre mise en page à votre goût */
}

4. Après la description du sujet


C'est exactement la même méthode que pour le point 2, mais cette fois vous devrez trouver cette partie :
Code:
<span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
Et juste après, sauter une ligne et ajouter ceci :
Code:
<div class="postdetails StatsTopics">Réponses : {topics_list_box.row.REPLIES} | Vues : {topics_list_box.row.VIEWS}</div>

Puis, dans le CSS, ajoutez ceci :
Code:
.StatsTopics {
 float:right; /* flottant à droite */
 /* et toute autre mise en page que vous voulez */
}
Laissez le flottant à droite, les autres mises en page ne sont pas super.

5. Dans la cellule du dernier message


Vous pourriez vouloir reproduire le même effet que dans ce tutoriel, ce qui vous donnerait ceci :

La procédure est très similaire à celle pour les forums, à quelques détails près. Dans votre template topic_list_box, cherchez cette fois la cellule qui contient le dernier message (avec LAST_POST comme point de repère) :
Code:
<td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></td>
Pour éviter de coller les statistiques au lien du dernier message posté, histoire d'avoir un affichage un peu propre, on va les mettre chacun dans un bloc (un div) différent, ce qui nous donne :
Code:
<td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
   <div class="postdetails StatsTopics">{topics_list_box.row.VIEWS} vues | {topics_list_box.row.REPLIES} réponses</div>
   <div class="postdetails LastPost">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</div>
</td>
Vous noterez qu'au passage on s'est débarrassés des balises <span> au profit de balises <div>. Ceci nous épargne l'ajout d'un saut de ligne, il vous suffira simplement de jouer sur les marges (propriété CSS margin) pour espacer les deux blocs.
Chaque bloc utilise la classe .postdetails histoire de mettre à profit les réglages de base de ForumActif, mais se voit attribuer chacun une classe bien personnelle, à savoir .StatsTopics pour les statistiques et .LastPost pour le dernier message posté. A vous, ensuite, de les personnaliser via le CSS (couleur de fond, bordure, etc), non sans oublier de préciser leur largeur (de préférence la même pour les deux).

Ce qui pourrait vous donner ceci par exemple :
Code:
.StatsTopics {
   width:150px;
   background:#f0f0f0;
   border:1px dashed #000000;
}

.LastPost {
   width:150px;
}

Et c'est tout ! Bon courage pour la suite !


Furase -


Dernière édition par Furase le Ven 02 Juil 2010, 16:35, édité 1 fois
MessageSujet: Modifier l'emplacement du nombre de vues/réponses d'un topic   Ven 02 Juil 2010, 08:04
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5576



FAQ


Q
Je ne comprends pas, ça ne marche qu'à moitié ?

R
Dans les options de configuration des messages du forum, il faut que les Annonce&Post-it et les sujet normaux soient séparés par une ligne.


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Modifier l'emplacement du nombre de vues/réponses d'un topic   Jeu 21 Juil 2011, 20:54
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hollywood-ramdam.lebonforum.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 103



Merci pour ce tutoriel !


Avatar : ©️ Design Touch.
MessageSujet: Re: Modifier l'emplacement du nombre de vues/réponses d'un topic   Dim 13 Mai 2012, 05:38
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://twilight-fp.1fr1.net/
avatar
{ Membre }
{ Membre }

Féminin Messages : 35



Merci pour ce tutoriel !
MessageSujet: Re: Modifier l'emplacement du nombre de vues/réponses d'un topic   Mer 04 Juil 2012, 07:28
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



Sujet complété et mis à jour le 25/08/2012 par 'Christa Lostmindy

A noter qu'il reste des cas à rajouter pour que le tutoriel soit vraiment complet, cf ce sujet



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Modifier l'emplacement du nombre de vues/réponses d'un topic   Sam 25 Aoû 2012, 14:18
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



Sujet renommé et complété



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Modifier l'emplacement du nombre de vues/réponses d'un topic   Dim 26 Aoû 2012, 07:39
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.edspeleersaddicts.com
avatar
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1799



super tuto, merci^^


Edward : "You are the person I dremt to have as a fan!"
Me : "And you are the person I dremt to have as a friend!"
Edward : "God bless you!"
Me : "And you, because you are the most beautiful heart I never met!"
Edward : "And I return words to you because you are the same as I am, right?"
Me : "I think so... We were naturally made to meet though!"
Edward : "Destiny..."
MessageSujet: Re: Modifier l'emplacement du nombre de vues/réponses d'un topic   Dim 16 Déc 2012, 11:58
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Modifier l'emplacement du nombre de vues/réponses d'un topic   
Revenir en haut Aller en bas
 

Modifier l'emplacement du nombre de vues/réponses d'un topic

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

 Sujets similaires

-
» Modifier l'emplacement du nombre de vues/réponses d'un topic
» Modifier l'emplacement du nombre de sujets/messages d'un forum
» Modifier l'emplacement du nombre de sujets et messages
» Nombre de messages défini dans un topic..
» Recherche emplacement ou code pour modifier "un fond centré"

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Corbeille :: Archives de CSSActif-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit