# Thème différent pour la liste des sujets des messages privés ?

**URL:** https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533
**Category:** Development
**Tags:** personal-messages
**Created:** [Janvier 13, 2024, 6:38 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533 "2024-01-13T18:38:16Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [Janvier 13, 2024, 6:38 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/1 "2024-01-13T18:38:16Z")

</div>

Salut, y a-t-il un moyen d’utiliser un thème différent juste pour la liste des sujets de messages personnels ? J’utilise actuellement le thème de Sam [Sam's Simple Theme](https://meta.discourse.org/t/sams-simple-theme/23552) que ma communauté et moi préférons fortement pour la liste [/latest](https://meta.discourse.org/latest), car il affiche les noms d’utilisateur de l’OP et du dernier intervenant en texte, et il élimine l’encombrement de la liste des avatars des intervenants fréquents dont personne ne se soucie. Malheureusement, le même paradigme échoue pour la liste [/my/messages](https://meta.discourse.org/my/messages), surtout lorsque le créateur du sujet de MP est le même que le dernier intervenant :

![image](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/optimized/4X/4/6/3/463831c493b41b92c4b9854108b0cc84cdd42d2d_2_689x49.png)

Donc, dans le cas de [/my/messages](https://meta.discourse.org/my/messages), j’aimerais idéalement simplement injecter la colonne `td.posters.topic-list-data` du thème Discourse par défaut dans cette vue. Mais si cela demande trop de travail, ce serait bien d’avoir la possibilité de passer d’une manière ou d’une autre au thème Discourse par défaut pour la vue MP.

Il existe d’autres thèmes personnalisés qui ont le même problème, comme celui de Kris [Minima Theme](https://meta.discourse.org/t/minima-a-minimal-theme-for-discourse/108178).

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [Janvier 13, 2024, 8:00 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/2 "2024-01-13T20:00:00Z")

</div>

Bonjour 👋

C’est possible en remplaçant le thème, vous devrez donc d’abord le forker ou créer une demande auprès du thème. Dans le modèle personnalisé, vous pouvez utiliser ce qui suit pour modifier uniquement les éléments de la liste des sujets de messagerie privée.

```plaintext
{{#if topic.isPrivateMessage}}
...
{{/if}}

```

Masquer quelque chose dans l’élément de la liste des sujets de messagerie privée.

```plaintext
{{#unless topic.isPrivateMessage}}
...
{{/unless}}

```

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [Janvier 14, 2024, 7:55 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/3 "2024-01-14T07:55:11Z")

</div>

Merci beaucoup, j’ai réussi à le faire fonctionner presque entièrement avec un composant de thème :

```js

    
    
      
        
          
        
      
      
      
        
      
      
        
      
      
        
      
      
      
      
    
    
      
        
          
        
      
    
    
      
      
      
      
      
      
      
      
        
          
            
          
        
        
          
            
          
        
        
          
            
          
        
      
      
        
          
            
            
          
        
      
      
        
          
            
            
          
        
      
      
        
          
            
            
          
        
      
      
        
          
            
            
          
        
      
    
    
      
        
          
            
            
          
        
      
    
    
      
        
          
            
            
          
        
      
    
    
      
        
          
            
            
          
        
      
    
    
      
        
          
            
            
          
        
      
    
    
      
        
          
            
            
          
        
      
    
  

```

Il semble que l’instruction `#if topic.isPrivateMessage` ne fonctionne pas pour l’en-tête de la liste des sujets, j’ai donc les avatars des participants aux messages privés qui s’affichent comme prévu, mais il manque une `<td>` dans les en-têtes, ce qui décale tout.

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [Janvier 14, 2024, 5:24 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/4 "2024-01-14T17:24:50Z")

</div>

> [@rahim123](#):
>
> Il semble que l’instruction `#if topic.isPrivateMessage` ne fonctionne pas pour `topic-list-header`,

Ma solution de paresse est donc de ne pas utiliser la logique `{{#if topic.isPrivateMessage}}` et de simplement placer `posters.topic-list-data` à la fois dans [/latest](https://meta.discourse.org/latest) et dans [/my/messages](https://meta.discourse.org/my/messages).

```plaintext
<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
<tr class="topic-list-header-row">
  {{~raw-plugin-outlet name="topic-list-header-before"}}

{{#if bulkSelectEnabled}}
  <th class="bulk-select topic-list-data">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect canDoBulkActions=canDoBulkActions showTopicsAndRepliesToggle=showTopicsAndRepliesToggle newListSubset=newListSubset newRepliesCount=newRepliesCount newTopicsCount=newTopicsCount}}

{{#if showPosters}}
  {{raw "topic-list-header-column" order='posters' forceName='Participants'}}
{{/if}}
  {{#if showLikes}}
      {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName='thanks'}}
  {{/if}}
  {{#if showOpLikes}}
      {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName='thanks'}}
  {{/if}}
  {{raw "topic-list-header-column" sortable='true' number='true' order='posts' forceName='Replies'}}
  {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Last Post'}}
</tr>
</script>

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
{{~raw-plugin-outlet name="topic-list-before-columns"}}

{{#if bulkSelectEnabled}}
  <td class="bulk-select topic-list-data">
    <label for="bulk-select-{{topic.id}}">
      <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
    </label>
  </td>
{{/if}}

<td class='main-link clearfix topic-list-data'>
  {{~raw-plugin-outlet name="topic-list-before-status"}}
  {{raw "topic-status" topic=topic}}
  {{~topic-link topic class="raw-link raw-topic-link"}}
  {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
  {{~/if}}
  {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
  <div class='creator'>
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    {{~#if topic.creator ~}}
      <a href="/u/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a>
    {{~/if ~}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
</td>

{{#if showPosters}}
  {{raw "list/posters-column" posters=topic.featuredUsers}}
{{/if}}

{{#if showLikes}}
  <td class="num likes topic-list-data">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}
      </a>
    {{/if}}
  </td>
{{/if}}

{{#if showOpLikes}}
  <td class="num likes topic-list-data">
    {{#if hasOpLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.op_like_count}} {{d-icon "heart"}}
      </a>
    {{/if}}
  </td>
{{/if}}

{{raw "list/posts-count-column" topic=topic}}

<td class="last-post topic-list-data">
  <div class='poster-avatar'>
    <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="medium"}}</a>
  </div>
  <div class='poster-info'>
    <a href="{{topic.lastPostUrl}}">
      {{format-date topic.bumpedAt format="tiny"}}
    </a>
    <span class='editor'><a href="/u/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
  </div>
</td>

</script>

```

Mais mes utilisateurs n’aiment pas le désordre visuel dans [/latest](https://meta.discourse.org/latest), je le cache donc là-bas via CSS :

```css
.navigation-topics .topic-list .topic-list-data.posters {
    display: none;
}

```

Si quelqu’un a des astuces pour implémenter la logique dans la surcharge handlebars, je préférerais toujours cela, plutôt que de gaspiller des cycles CPU à générer `posters.topic-list-data` puis à le cacher.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [Janvier 14, 2024, 6:21 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/5 "2024-01-14T18:21:16Z")

</div>

Vous avez raison ; les données du sujet ne sont pas disponibles dans l’en-tête, ce qui est logique !

Le CSS peut être une solution. Conservez la condition dans `topic-list-item` et affichez-la par défaut pour l’en-tête.

`{{raw "topic-list-header-column" order='posters' forceName='Participants'}}`

Et avec le CSS, vous pouvez dire : « _Sélectionnez la liste qui n’a pas (pas a) les lignes de posters et masquez-la_ »

```css
.topic-list:not(:has(.topic-list-body .topic-list-data.posters))
  .topic-list-header
  .topic-list-data.posters {
  display: none;
}

```

Est-ce que cela fonctionne pour vous ?

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [Janvier 14, 2024, 6:35 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/6 "2024-01-14T18:35:00Z")

</div>

Salut, merci beaucoup, c’est une très bonne idée. Quelque chose n’a pas fonctionné avec le CSS comme suggéré car il affiche toujours la colonne vide **Participants** dans [/latest](https://meta.discourse.org/latest), mais mon CSS d’origine semble bien fonctionner pour la masquer uniquement là&nbsp;:

```css
.navigation-topics .topic-list .topic-list-data.posters {
    display: none;
}

```

Des inconvénients à cela&nbsp;?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [Janvier 14, 2024, 7:22 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/7 "2024-01-14T19:22:07Z")

</div>

Je suis confus, ça marche pour moi 🤔

Dernière version :

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/1/5/a1596b2b745a0fe39b33e7848dcb7295b8a67506.png)

Message :

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/b/6/8b63973687d9304032c7eaf685204d57c195793e.png)

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [Janvier 14, 2024, 7:46 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/8 "2024-01-14T19:46:10Z")

</div>

Hmm, serait-ce parce que vous n’avez pas la condition dans `topic-list-item` ?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [Janvier 14, 2024, 7:56 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/9 "2024-01-14T19:56:16Z")

</div>

J’ai bien la condition. Sinon, vous ne verriez pas la colonne des participants dans la liste des messages sur mes captures d’écran !

Je pense que ce que vous avez décrit ci-dessus est le CSS qui n’est pas appliqué.  
Voici ce que j’ai :

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/8/6/086ff5d319041b9ab246a43d9253731204bbab01.png)

Vous pouvez voir que le CSS est appliqué sur la page /latest.

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/5/0/f501a1e106b7eec996e47c984874c1788528be4c.png)

Assurez-vous de copier-coller correctement le CSS au bon endroit !

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [Janvier 14, 2024, 7:58 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/10 "2024-01-14T19:58:30Z")

</div>

Merci beaucoup pour votre aide spécifique, je ne suis pas à mon ordinateur pour le moment mais j’essaierai à nouveau dès que je serai de retour.

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [Janvier 14, 2024, 10:42 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/11 "2024-01-14T22:42:47Z")

</div>

Je ne sais pas quoi penser, ça ne fonctionne vraiment pas pour moi.

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/2/8/428705ce6e2e217a61f70ef01b23496734ed76d2.png)

Juste pour confirmer, utilisez-vous également le thème simple de Sam ?

De plus, avez-vous mis le code handlebars dans **Head** ou **Header**?

J’apprécie vraiment votre temps et votre aide.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [Janvier 14, 2024, 10:51 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/12 "2024-01-14T22:51:05Z")

</div>

Oui, j’utilise le thème de Sam.

J’ai créé un composant de thème pour y placer le CSS et le script, attaché au thème de Sam.

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/e/6/1e66f01e0d810e3bb3b511ab211bc8bb72778fde.png)

> **CSS**
>
> ```css
> .topic-list:not(:has(.topic-list-body .topic-list-data.posters))
> .topic-list-header-row
> .topic-list-data.posters {
> display: none;
> }
> 
> ```

> **Head**
>
> ```js
> 
> <script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
> <tr class="topic-list-header-row">
> {~raw-plugin-outlet name="topic-list-header-before"~}
> {{#if bulkSelectEnabled}}
> <div class="bulk-select">
> {{#if canBulkSelect}}
> {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
> {{/if}}
> </div>
> {{/if}}
> {{raw "topic-list-header-column" order='default' name='topic.title' bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
> {{#if showLikes}}
> {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName=(theme-i18n 'likes')}}
> {{/if}}
> {{#if showOpLikes}}
> {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName=(theme-i18n 'likes')}}
> {{/if}}
> {{raw "topic-list-header-column" order='posters' forceName='Participants'}}
> {{raw "topic-list-header-column" sortable='true' number='true' order='posts' forceName='Replies'}}
> {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Last Post'}}
> </tr>
> </script>
> 
> <script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
> {{#if bulkSelectEnabled}}
> <td class="bulk-select topic-list-data">
> <label for="bulk-select-{{topic.id}}">
> <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
> </label>
> </td>
> {{/if}}
>     
> <td class='main-link clearfix topic-list-data'>
> {~raw-plugin-outlet name="topic-list-before-status"~}
> {{raw "topic-status" topic=topic}}
> {~topic-link topic class="raw-link raw-topic-link"~}
> {{#if showTopicPostBadges}}
> {~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText~}
> {{/if}}
> {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
> {{#if expandPinned}}
> {{raw "list/topic-excerpt" topic=topic}}
> {{/if}}
> <div class='creator'>
> {{#unless hideCategory}}
> {{#unless topic.isPinnedUncategorized}}
> {{category-link topic.category}}
> {{/unless}}
> {{/unless}}
> {~#if topic.creator ~}
> <a href="/u/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a>
> {~/if ~}
> {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
> </div>
> </td>
>     
> {{#if showLikes}}
> <td class="num likes topic-list-data">
> {{#if hasLikes}}
> <a href='{{topic.summaryUrl}}'>
> {{number topic.like_count}} {{d-icon "heart"}}
> </a>
> {{/if}}
> </td>
> {{/if}}
>     
> {{#if showOpLikes}}
> <td class="num likes topic-list-data">
> {{#if hasOpLikes}}
> <a href='{{topic.summaryUrl}}'>
> {{number topic.op_like_count}} {{d-icon "heart"}}
> </a>
> {{/if}}
> </td>
> {{/if}}
>     
> {{#if topic.isPrivateMessage}}
> {{raw "list/posters-column" posters=topic.featuredUsers}}
> {{/if}}
>     
> {{raw "list/posts-count-column" topic=topic}}
>     
> <td class="last-post topic-list-data">
> <div class='poster-avatar'>
> <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="medium"}}</a>
> </div>
> <div class='poster-info'>
> <a href="{{topic.lastPostUrl}}">
> {{format-date topic.bumpedAt format="tiny"}}
> </a>
> <span class='editor'><a href="/u/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
> </div>
> </td>
> </script>
> 
> ```

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [Janvier 14, 2024, 11:11 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/13 "2024-01-14T23:11:10Z")

</div>

Merci encore pour votre aide. Il se comporte de la même manière, il y a un en-tête de colonne **Participants** dans [/latest](https://meta.discourse.org/latest) qui désaligne les colonnes avec les colonnes de la liste des sujets. Je dois avoir d’autres personnalisations dans d’autres composants qui entrent en conflit.

> [@rahim123](#):
>
> mon CSS original semble bien fonctionner pour le masquer dans Latest :
> 
> ```css
> .navigation-topics .topic-list .topic-list-data.posters {
> display: none;
> }
> 
> ```

Y a-t-il des problèmes potentiels ou des inconvénients avec cette solution CSS ?

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [Janvier 14, 2024, 11:13 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/14 "2024-01-14T23:13:07Z")

</div>

Comme je vois que vous utilisez Firefox, il est possible que le sélecteur `:has` ne fonctionne pas de votre côté. Il n’est pris en charge qu’à partir de Firefox 121.

> **["has" | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/?search=has)**
>
> "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [Janvier 14, 2024, 11:15 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/15 "2024-01-14T23:15:19Z")

</div>

> [@Don](#):
>
> Comme je vois que vous utilisez Firefox, cela pourrait expliquer pourquoi le sélecteur `has` ne fonctionne pas de votre côté. Il n’est pris en charge qu’à partir de Firefox 121.
> 
> ["has" | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/?search=has)

Cela expliquerait ! Et cela fonctionnait dans Chromium, mais j’avais supposé que c’était parce que je n’y étais pas connecté en tant qu’administrateur. J’utilise Firefox 115 ESR de Debian 12. Merci beaucoup, je devenais fou avec ça. 😉

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [Janvier 14, 2024, 11:17 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/16 "2024-01-14T23:17:09Z")

</div>

Ah bon. Je ne le savais pas, et c’est assez décevant pour être honnête 😅. Je testerai définitivement plus souvent sur Firefox la prochaine fois. Merci pour ce retour !

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [Janvier 15, 2024, 12:40 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/17 "2024-01-15T12:40:48Z")

</div>

Il y a une amélioration CSS supplémentaire que j’aimerais mettre en œuvre pour la rendre plus utile : sur des fenêtres de navigateur plus larges, elle affiche maintenant les participants PM comme prévu :

 ![Screenshot from 2024-01-15 07-21-25](https://global.discourse-cdn.com/meta/original/4X/9/3/5/935edcfb51787215594582bcdcccf9a4becd5dd8.png)

Mais sur des fenêtres plus étroites, elle réduit le nombre d’avatars de participants à un seul, nous nous retrouvons donc avec le même problème que celui décrit dans le premier message de ce sujet :

 ![Screenshot from 2024-01-15 07-22-10](https://global.discourse-cdn.com/meta/original/4X/e/f/e/efed01fc9daa86a7eac2081e1611f2693608a5b5.png)

Existe-t-il un moyen de résoudre ce problème via CSS afin que sur des fenêtres plus étroites, la colonne **Replies** soit masquée et l’avatar dans la colonne **Last Post** soit masqué, laissant ainsi plus d’espace pour la colonne **Participants**?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [Janvier 15, 2024, 2:39 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/18 "2024-01-15T14:39:59Z")

</div>

> [@rahim123](#):
>
> Existe-t-il un moyen de corriger cela via CSS afin que sur les fenêtres plus étroites, il masque la colonne **Réponses** et masque l’avatar dans la colonne **Dernier message** , laissant ainsi plus d’espace pour la colonne **Participants** &nbsp;?

Pouvez-vous essayer ce CSS&nbsp;?

```css
@include breakpoint(extra-large, $sidebar: true) {
  .user-messages-page .topic-list {
    .posts {
      display: none;
    }

    .posters {
      width: 146px;
      text-align: inherit;
    }

    .last-post {
        width: auto;

        .poster-avatar {
            display: none;
        }
    }

    .topic-list-header .topic-list-data.activity {
      width: auto;
    }

    .topic-list-data.posters {
      a:not(.latest) {
        display: inherit;
      }

      a.latest {
        width: auto;
      }
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [Janvier 15, 2024, 2:50 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/19 "2024-01-15T14:50:39Z")

</div>

Merci ! Presque parfait, sauf qu’avec des largeurs comprises entre environ 1380 px et 1020 px, toutes les colonnes sont toujours affichées et les avatars des participants sont réduits à un seul. Moins étroit que cela fonctionne très bien.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [Janvier 15, 2024, 3:11 UTC](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533/20 "2024-01-15T15:11:07Z")

</div>

Remplacez `medium` par `extra-large` dans `breakpoint()`. Il devrait maintenant commencer à partir de `<= 1140px`. Le comportement d’origine qui masque les avatars des participants se produit en fait à ce point d’arrêt. Est-ce que cela fonctionne ?

[Page suivante](https://meta.discourse.org/t/different-theme-for-personal-message-topics-list/291533.md?page=2)