-23%
Le deal à ne pas rater :
-300€ sur ce PC Portable Gamer – LENOVO Legion 5 15ACH6H – ...
999 € 1299 €
Voir le deal

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4528

Créer un widget de sujets récents personnalisé Empty Créer un widget de sujets récents personnalisé

Jeu 28 Nov 2019 - 17:15

Toutes versions

Créer un widget de sujets récents personnalisé

Coucou Smile

Le widget des sujets récents est utile, cependant, il est dommage de ne pas pouvoir cibler quels forums nous voulons prendre en compte. C'est donc ce que je te propose de faire ici Smile

Par exemple, voici un widget personnalisé des sujets récents de la zone Un peu de détente.



Idea Pré-requis :
  • Avoir accès aux templates,
  • Savoir utiliser les iframes.


Idea Cette astuce fonctionne pour toutes les versions de forum.

C'est parti !

Un changement de configuration

Pour ce tutoriel, il va falloir changer le format de la date. Pour cela, on va aller dans Panneau d'administration > Général > Forum > Configuration et on va choisir ce format :
Créer un widget de sujets récents personnalisé Format10

Idea Cette modification sera effective pour les visiteurs & nouveaux inscrits. En revanche, les membres vont devoir eux aussi aller faire la modification dans leur profil pour pouvoir voir les widgets.

Des modifications de template

Pour simplifier le javascript, j'ai décidé de faire quelques modifications de template pour ajouter un id et des class css Smile

Quelle que soit la version de ton forum, les changements seront à faire dans le template "topics_list_box" (Panneau d'administration > Affichage > Templates > Général).

Idea Pour la suite, choisis bien ce qui correspond à ta version de forum Smile

Exclamation Ici, je pars du template par défaut. Si ton template est modifié, n'hésite pas à nous demander un coup de pouce.

Modifications communes (sauf pour AwesomeBB)

On va commencer par entourer ceci :
Code:
{topics_list_box.row.LAST_POST_IMG}
par un span avec une class pour cibler le lien du dernier message
Code:
<span class="link-last-msg">{topics_list_box.row.LAST_POST_IMG}</span>

On va aussi entourer la date
Code:
{topics_list_box.row.LAST_POST_TIME}
par un span avec une class pour pouvoir la récupérer
Code:
<span class="date">{topics_list_box.row.LAST_POST_TIME}</span>

Pour PhpBB2

On va remplacer :
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th>
par
Code:
<table class="forumline" id="m-liste-sjts" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th>

On va également remplacer :
Code:
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
  <tr>
      <!-- BEGIN single_selection -->
par
Code:
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
  <tr class="m-sjt">
      <!-- BEGIN single_selection -->

Idea N'oublie pas de faire la manipulation commune Wink

Exclamation N'oublie pas de sauvegarder et publier.

Pour PhpBB3

On va remplacer :
Code:
<!-- END multi_selection -->

  <div class="forumbg announcement">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
par
Code:
<!-- END multi_selection -->

  <div class="forumbg announcement" id="m-liste-sjts">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">

On va également remplacer :
Code:
<!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS} m-sjt"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
par
Code:
<!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >

Idea N'oublie pas de faire la manipulation commune Wink

Exclamation N'oublie pas de sauvegarder et publier.

Pour PunBB

On va remplacer :
Code:
<div class="main-content">
  <table cellspacing="0" class="table">
      <thead>
        <tr>
            <th class="tcl">{L_TOPICS}</th>
par
Code:
<div class="main-content">
  <table cellspacing="0" class="table" id="m-liste-sjts">
      <thead>
        <tr>
            <th class="tcl">{L_TOPICS}</th>

On va également remplacer :
Code:
      </thead>
      <tbody class="statused">
  <!-- END table_sticky -->
      <tr>
        <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
par
Code:
      </thead>
      <tbody class="statused">
  <!-- END table_sticky -->
      <tr class="m-sjt">
        <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">

Idea N'oublie pas de faire la manipulation commune Wink

Exclamation N'oublie pas de sauvegarder et publier.

Pour Invision

On va remplacer :
Code:
<table cellspacing="0" cellpadding="0" class="ipbtable">
            <thead>
              <tr>
                  <th class="icon"></th>
par
Code:
<table cellspacing="0" cellpadding="0" class="ipbtable" id="m-liste-sjts">
            <thead>
              <tr>
                  <th class="icon"></th>

On va également remplacer :
Code:
            <tbody>
        <!-- END table_sticky -->
              <tr>
                  <td class="row1 centered <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
par
Code:
            <tbody>
        <!-- END table_sticky -->
              <tr class="m-sjt">
                  <td class="row1 centered <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">

Idea N'oublie pas de faire la manipulation commune Wink

Exclamation N'oublie pas de sauvegarder et publier.

Pour ModernBB

On va remplacer :
Code:
<div class="forumbg">
      <ul class="topiclist topics">
        <li class="header">
par
Code:
<div class="forumbg" id="m-liste-sjts">
      <ul class="topiclist topics">
        <li class="header">

On va également remplacer :
Code:
<!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
par
Code:
<!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS} m-sjt"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >

Idea N'oublie pas de faire la manipulation commune Wink

Exclamation N'oublie pas de sauvegarder et publier.

Pour AwesomeBB

Ici, il y a plein de choses à changer Smile

1) On va remplacer :
Code:
<!-- END multi_selection -->

<div class="posts">
    <div class="posts-header">
par
Code:
<!-- END multi_selection -->

<div class="posts" id="m-liste-sjts">
    <div class="posts-header">

2) On va également remplacer :
Code:
<div class="posts">
    <!-- END table_sticky -->
    <div class="posts-section" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">
        <div class="posts-icon {topics_list_box.row.FOLDER_CLASSNAME}">
par
Code:
<div class="posts">
    <!-- END table_sticky -->
    <div class="posts-section m-sjt" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">
        <div class="posts-icon {topics_list_box.row.FOLDER_CLASSNAME}">

3) On va ensuite entourer ceci :
Code:
<a class="posts-lastpost-time" href="{topics_list_box.row.LAST_POST_IMG}">
                          <i class="material-icons">access_time</i>{topics_list_box.row.LAST_POST_TIME}
                        </a>
d'un span avec une class pour cibler le lien du dernier message
Code:
<span class="link-last-msg"><a class="posts-lastpost-time" href="{topics_list_box.row.LAST_POST_IMG}">
                          <i class="material-icons">access_time</i>{topics_list_box.row.LAST_POST_TIME}
                        </a></span>

4) Et pour finir, on va remplacer ça
Code:
<a href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
par
Code:
<a href="{topics_list_box.row.U_VIEW_TOPIC}" class="topictitle">{topics_list_box.row.TOPIC_TITLE}</a>
pour ajouter une class au lien du titre afin de récupérer son texte.

Exclamation N'oublie pas de sauvegarder et publier.

Une page HTML

Tout comme si on utilisait le widget des derniers messages de FA, on va mettre tout ça sur une page HTML en mode avancé (Panneau d'administration > Modules > HTML & JAVASCRIPT > Gestion des pages HTML).

Voici le contenu de cette page :
Code:
<!DOCTYPE html>
<html>
<head>
          <link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sujets Récents</title>

    <style>
 
:root{
    --hauteur-bloc: 200px;
    --hauteur-bloc-negatif: -200px;
    --vitesse-defilement: 10000ms;
}

body{
    color: #de5252;
    font-size: 13px;
    font-family: 'PT Sans', sans serif;
}

body span {
    margin-left: 25px;
    }


ul li{
    list-style-type: none;
    margin-bottom: 5px;
}
li:before {
    content: "» ";
}
     
a{
    color: #de5252;
    text-decoration: none;
}

a:hover{
    color: #e07e7e;
    text-decoration: none;
}
 
 #titre12 {
  border-bottom:1px solid #7f0101;
  box-shadow: 0px 15px 0px #fffbf5;
  color: #590000;
  font-size: 14px;
  font-family: "Armata", sans-serif;
  font-weight:bold;
  font-variant: small-caps;
}

/*** --- NE PAS CHANGER LA CSS SOUS CETTE LIGNE --- ***/
.m-d-none{
    display: none;
}

#last-subjects{
  height:  var(--hauteur-bloc);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.do-marquee .marquee {
  display: block;
  width: 100%;
  position: absolute;
  animation: marquee var(--vitesse-defilement) linear infinite;
  height: auto !important;
  top: var(--hauteur-bloc);
}

.do-marquee .marquee:hover{
  animation-play-state:paused;
  cursor: pointer;
}

@keyframes marquee {
  0% { top: var(--hauteur-bloc)); }
  100% { top: var(--hauteur-bloc-negatif); }
}

    </style>
</head>
<body>

    <div id="forum-1" class="m-d-none"></div>
    <div id="forum-2" class="m-d-none"></div>
      <div id="forum-3" class="m-d-none"></div>
 
  <span id="titre12">Zone détente :</span>
    <div id="last-subjects"><div class="marquee"></div></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script>

    ; (function () {

        // on indique l'url du forum
        var urlForum = "https://zone-pub.forumactif.com";
     
        // on indique le nombre de sujet qu'on veut afficher
        var nbSjt= 5;
     
        // on indique si les sujets doivent défiler ou non
        // true = défilement
        // false = fixe
        var defilement = false;
     
        // On récupére la liste des sujets
        var listeSjt = [],
            listeLs = [],
        // On indique les forums ou sous-forum à récupérer
        // ainsi que la div cachée dans laquelle stocker les infos
        dernierSujets = [{
      divHide: "forum-1",
      url: "/f85-discussion-generale"
          },{
            divHide: "forum-2",
      url: "/f87-jeux"
          },{
            divHide: "forum-3",
      url: "/f33-concours"
          }];
           
        /*** --- NE PAS CHANGER LE JS SOUS CETTE LIGNE --- ***/
     
        var chemin = "#m-liste-sjts .m-sjt"
        ,  cible = ".m-sjt"
        ,  dateMsgSplit
    , listeMois = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil ','Aoû', 'Sep', 'Oct', 'Nov', 'Déc '];

        // On remplit les div cachées des sujets de chaque forum
        for(var i = 0 ; i < dernierSujets.length ; i++){
          $('#'+ dernierSujets[i].divHide +'').load(''+ urlForum +''+ dernierSujets[i].url +''+ chemin +''
          );
        };

        setTimeout( function(){
            // On va parcourir chaque div cachée
            for(var i = 0 ; i < dernierSujets.length ; i++){
                // Pour trier les sujets
                triTopic(dernierSujets[i].divHide);
            };

            var contentListeSjt = "";

            for( var i = 0 ; i < nbSjt ; i ++){
            // On sauvegarde les 5 derniers messages, tous forums confondus
            contentListeSjt += "<li><a href=\""+ urlForum +""+ listeSjt[i].link +"\" target=\"_blank\">"+ listeSjt[i].title +"</a></li>";
            }

            // On affiche au bon endroit la liste
            contentListeSjt = '<ul>'+ contentListeSjt +'</ul>';
            $('.marquee').append(contentListeSjt);

        }, 800);

        function triTopic(divHide){
     
            // On parcourt chaque sujet de chaque div cachée
            $('#'+ divHide +' '+ cible +'').each( function(){
                var $this = $(this),
                    // On récupére le titre du sujet
                    title = $this.find('a.topictitle').text(),
                    // la date
                    date = $this.find('span.date').text(),
                    // et le lien vers le dernier message
                    link = $(this).find('.link-last-msg a').attr('href');
             
                // On sépare la date du message pour récupérer le jour & l'heure
        dateMsgSplit= date.split(" ");

        // Si la date est aujourd'hui
        if( dateMsgSplit[0] === "Aujourd'hui"){
          // On récupère la date du jour + le jour, le mois et l'année.
            var dateNow = new Date(),
            jourLastPost = dateNow.getDate(),
            nbmonth = dateNow.getMonth(),
            anneeLastPost = dateNow.getFullYear();

              // On récupére l'heure
              heureLastPost = dateMsgSplit[2].split(':')[0],
              minLastPost = dateMsgSplit[2].split(':')[1];

        }else if( dateMsgSplit[0] === "Hier"){
          // On récupère la date du jour + le jour, le mois et l'année.
            var dateNow = new Date(),
            jourLastPost = dateNow.getDate() - 1,
            nbmonth = dateNow.getMonth(),
            anneeLastPost = dateNow.getFullYear();

              // On récupére l'heure
              heureLastPost = dateMsgSplit[2].split(':')[0],
              minLastPost = dateMsgSplit[2].split(':')[1];

        }else{
          // Si la date est antérieure à aujourd'hui

          // On récupère la date du jour + le jour, le mois, l'année et l'heure
          var jourLastPost = dateMsgSplit[2],
              moisLastPost = dateMsgSplit[3],
              anneeLastPost = dateMsgSplit[4],
              heureLastPost = dateMsgSplit[6].split(':')[0],
              minLastPost = dateMsgSplit[6].split(':')[1];

              //On récupère l'index qui correspond à notre mois récupéré
              var nbmonth=listeMois.indexOf(moisLastPost);
        }

        // On met la date en millisecondes pour pouvoir comparer
        var dateLastPost = new Date(anneeLastPost, nbmonth, jourLastPost, heureLastPost, minLastPost);
            dateLastPost = dateLastPost.getTime();

                // on enregistre toutes les infos
                obj = {
                    "date" : dateLastPost,
                    "link" : link,
                    "title" : title
                };

                // et on met le tout dans le tableau qui contiendra tous nos sujets
                listeSjt.push(obj);
            });

            // Une fois le tableau rempli, on le range en fonction de l'id des messages
            // les plus grands (donc les messages les plus récents) seront au début du tableau
            listeSjt.sort(function (a, b) {
              return b.date - a.date;
            });
 
        }
     
         
        // Met en place défilement
        if(defilement){
            var gestionMarquee = setInterval(function () {
                // si on doit faire défiler, on ajoute une classe
                // pour gérer l'animation en CSS
                $('#last-subjects').addClass('do-marquee');
                stopGestionMarquee();
            }, 100);
        }

        function stopGestionMarquee() {
            clearInterval(gestionMarquee);
        };

    })();

    </script>
 
</body>
</html>

Idea Le code est commenté pour que tu puisses le comprendre.

Ce que tu dois/peux modifier

Au niveau de la CSS

Tout ce qui se trouve au-dessus de "NE PAS CHANGER LA CSS SOUS CETTE LIGNE" Very Happy

Dans le HTML

Cette partie correspond au nombre de forums qu'on va observer pour récupérer les derniers messages :
Code:
<div id="forum-1" class="m-d-none"></div>
    <div id="forum-2" class="m-d-none"></div>
    <div id="forum-3" class="m-d-none"></div>
    <div id="forum-4" class="m-d-none"></div>
    <div id="forum-5" class="m-d-none"></div>
    <div id="forum-6" class="m-d-none"></div>
Ici, je vais parcourir 6 forums, du coup, il me faut 6 div cachées Smile

Si tu veux modifier le titre du bloc, c'est ici :
Code:
<h3>Les derniers messages de la zone "détente"</h3>

Dans le Javascript

Tu peux modifier ce qui se trouve au-dessus de "NE PAS CHANGER LE JS SOUS CETTE LIGNE".

La majorité des choses sont assez parlantes, je ne m'attarderai donc que sur ceci :
Code:

dernierSujets = [{
    divHide: "forum-1",
    url: "/f44-vidons-nous-la-tete"
  },{
    divHide: "forum-2",
    url: "/f12-test-public"
  },{
    divHide: "forum-3",
    url: "/f36-la-salle-d-exposition"
  },{
    divHide: "forum-4",
    url: "/f50-commandes-graphiques"
  },{
    divHide: "forum-5",
    url: "/f51-tutoriels-ressources"
  },{
    divHide: "forum-6",
    url: "/f52-libre-service"
  }];
Pour chaque forum à parcourir, on va devoir indiquer :
• son url,
• la div cachée qui récupérera la liste des sujets.

Chaque forum doit être mis entre accolade ( {}) et chacun d'eux doit être séparé par une virgule (,).

C'est tout, le js fera le reste du travail pour toi Smile

Appeler le widget

Pour finir, il te suffit d'appeler le wigdet où tu le désires en utilisant une iframe. Par exemple :

Code:
<iframe name="Sujets récents zone détente" src="http://tambouille-raleuses.forumactif.com/h1-nps-tuto-dernier-message-zone-un-peu-de-detente" marginheight="0" scrolling="no" style="width: 100%; height: 200px;" frameborder="0" align="middle"> </iframe>




Si tu as un souci pour mettre en place ce widget, tu peux compter sur nous pour t'aider Smile Rendez-vous ici ^^




Dernière édition par Miettes le Mer 4 Déc 2019 - 17:01, édité 1 fois

_________________
Féli
Féli
Messages : 495
http://feli.forumactif.org

Créer un widget de sujets récents personnalisé Empty Re: Créer un widget de sujets récents personnalisé

Lun 2 Déc 2019 - 17:15
super chouette ça
Aethon
Aethon
Pseudo Discord : Aethon
Messages : 126
https://rpgsaintseiya.forumactif.com

Créer un widget de sujets récents personnalisé Empty Re: Créer un widget de sujets récents personnalisé

Lun 28 Déc 2020 - 1:14
Coucou,

Sympa comme tout Smile

Est ce qu'il serait possible de dire au code l'inverse : affiche tous les derniers messages sauf ceux de ce forum ?
Miettes
Miettes
Râleuse (Admin)
Informations :
► Présence aléatoire (Je passe quand je peux :p)
----
Idea Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2219
https://lectures-miettes.pvereecken.fr/

Créer un widget de sujets récents personnalisé Empty Re: Créer un widget de sujets récents personnalisé

Lun 28 Déc 2020 - 13:40
Hello

De manière simple, je ne pense pas.

Je sais qu'un sujet est à l'étude par FA (clic ) pour personnaliser ce widget

_________________
Aethon
Aethon
Pseudo Discord : Aethon
Messages : 126
https://rpgsaintseiya.forumactif.com

Créer un widget de sujets récents personnalisé Empty Re: Créer un widget de sujets récents personnalisé

Lun 28 Déc 2020 - 14:01
Ok.
Et est-ce que si on lui indique une catégorie ou un forum, il prend en compte les sous-forums ?
Mäven
Mäven
Râleuse (Admin)
Informations : Présente quelques heures par semaine =)
----
Idea Viens papoter avec nous sur le discord

Messages : 3991
https://tambouille-raleuses.forumactif.com/

Créer un widget de sujets récents personnalisé Empty Re: Créer un widget de sujets récents personnalisé

Lun 28 Déc 2020 - 18:42
Il me semble que tu dois tout préciser.

*va tester*

Alors non, si tu mets un forum / une catégorie, ça ne prend que les sujet de ce forum précis, pas des sous forums. Si tu veux les sous forums tu dois les ajouter.
Tu voudrais juste gagner des lignes de code ou il y a un autre objectif ? Wink

_________________
Aethon
Aethon
Pseudo Discord : Aethon
Messages : 126
https://rpgsaintseiya.forumactif.com

Créer un widget de sujets récents personnalisé Empty Re: Créer un widget de sujets récents personnalisé

Lun 28 Déc 2020 - 18:48
Gagner en lignes et en maniabilité. Éviter de devoir rajouter une ligne à chaque fois qu'on peut être amener à créer un nouveau sous forum ^^
Ce serait sympa de pouvoir en 1 ligne faire apparaitre la catégorie et toute sa descendance.

Pour exemple sur mon fo rpg, avoir un widget des derniers sujets que de la partie rp serait chouettes. Sachant qu'on crée parfois des sous forums ponctuels pour des events.
Mäven
Mäven
Râleuse (Admin)
Informations : Présente quelques heures par semaine =)
----
Idea Viens papoter avec nous sur le discord

Messages : 3991
https://tambouille-raleuses.forumactif.com/

Créer un widget de sujets récents personnalisé Empty Re: Créer un widget de sujets récents personnalisé

Lun 28 Déc 2020 - 19:41
D'où la demande de tout surveiller SAUF quelques trucs.
Hm... Je cherche. Sauf que les sous forums ont des noms particuliers, ça n'est pas des url qui se suivent, du coup prendre tous les descendants me parait compliqué. C'est pas comme si l'url était
Code:
/nom-forum/nom-sous-forum
.

Du coup pas le choix que de tout mettre...

J'ai peut-être une idée !
*test*
OK j'ai un truc mais qui risque d'être galère aussi... Pour moi ça risque de faire très lourd mais bon, à tester. C'est pas simple du tout je trouve, comme Miettes te l'a dit, et ça risque d'alourdir ton forum.
Pour que ça fonctionne par contre, il faut que tes forums / catégories qui ne doivent pas apparaitre soient les premières créées : c'est à rien qu'elles aient dans leur url /f1, /f2, etc. A partir du moment où on affichera /f3 par exemple tous les suivants seront affichés aussi.
Tu comprends ce que je veux dire ? Tu veux tester ?

_________________
Aethon
Aethon
Pseudo Discord : Aethon
Messages : 126
https://rpgsaintseiya.forumactif.com

Créer un widget de sujets récents personnalisé Empty Re: Créer un widget de sujets récents personnalisé

Lun 28 Déc 2020 - 19:50
Si c'est lourd, ce n'est pas la peine.
Je trouverais une solution avec ce système qui me conviendra Wink
Merci d'y avoir réfléchi ^^
Mäven
Mäven
Râleuse (Admin)
Informations : Présente quelques heures par semaine =)
----
Idea Viens papoter avec nous sur le discord

Messages : 3991
https://tambouille-raleuses.forumactif.com/

Créer un widget de sujets récents personnalisé Empty Re: Créer un widget de sujets récents personnalisé

Lun 28 Déc 2020 - 20:01
En fait c'est surtout que ce principe est top pour surveiller quelques zones, mais quand c'est tout ça veut dire qu'il parcourt tout le forum pour afficher quoi. Si t'as pas grand chose ça va, mais bon

_________________
Contenu sponsorisé

Créer un widget de sujets récents personnalisé Empty Re: Créer un widget de sujets récents personnalisé

Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses