# Comment augmenter la largeur du sujet
**URL:** https://meta.discourse.org/t/how-to-increase-width-of-topic/81885
**Category:** Development
**Created:** [Mars 1, 2018, 2:30 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885 "2018-03-01T14:30:09Z")
**Posts on this page:** 15
**Page:** 1
### Author:  [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [Mars 1, 2018, 2:30 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/1 "2018-03-01T14:30:09Z")
Normalement, les sujets ressemblent à ceci. Pas aussi grands que je le souhaite.
J’ai donc écrit ce code pour augmenter la largeur :
```
.topic-body {
width: 830px;
}
```
Pour obtenir un rendu comme ceci :
Mais lorsque mon écran est plus petit, cela ressemble à ceci :
Comment éviter cela ?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Mars 1, 2018, 3:04 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/2 "2018-03-01T15:04:00Z")
The position of the timeline is based on the default topic width, so that needs to be moved too… our default CSS is:
```SCSS
.timeline-container {
margin-left: 757px;
@media all and (min-width: 1140px) {
margin-left: 820px;
}
@media all and (min-width: 1250px) {
margin-left: 900px;
}
}
```
So I think you’d either want to reduce the topic width for smaller screens, or increase the margin-left of the timeline-container a bit.
Another difficulty you might run into is when we switch from the timeline to the progress bar at smaller browser widths… because that switch is determined in JS so it’s more involved than just updating the CSS.
I think eventually we’d want the layout to be more flexible so it would be in the right position automatically if the topic column width is different, but for now it’s a manual adjustment at a few breakpoints.
---
### Author:  [@Paracelsus](https://meta.discourse.org/u/Paracelsus)
#### Post date: [Décembre 27, 2019, 11:18 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/3 "2019-12-27T23:18:12Z")
Bonjour, je suis tombé sur ce sujet car c’était une demande de nos utilisateurs.
Est-ce que cela ne fonctionnerait pas d’utiliser simplement le même type de règles sur la règle topic.body ?
Au lieu de cela :
```plaintext
.topic-body {
width: 830px;
}
```
Pourrait-on faire, par exemple :
```plaintext
.topic-body {
width: 727px;
@media all and (min-width: 1140px) {
width: 790px;
}
@media all and (min-width: 1250px) {
width: 870px;
}
}
```
De cette façon, la largeur du sujet suivrait toujours la largeur de la marge de la chronologie.
---
### Author:  [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [Décembre 28, 2019, 3:47 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/4 "2019-12-28T03:47:26Z")
J’utilise un écran plus large pour mes thèmes. C’est mélangé avec beaucoup d’autres choses, mais je pense avoir extrait tout ce qui concerne les écrans larges uniquement pour la page des sujets dans ce composant, ce qui devrait être assez facile à modifier pour obtenir la largeur maximale souhaitée.
> **[GitHub - oerog/widescreen2: makes topic posts page wider](https://github.com/oerog/widescreen2)**
>
> makes topic posts page wider
Si vous voulez que la largeur de l’en-tête reste cohérente et ne s’élargisse pas sur la page des sujets, supprimez alors
`, .archetype-regular .d-header .wrap` de la ligne 20
Il utilise des avatars de 90px, donc si vous voulez 45px, supprimez simplement le fichier head\_tag.html et ces lignes à la fin du CSS :
```
.topic-avatar {
width: 90px;
.avatar {
width: 90px;
height: 90px;
}
}
.embedded-posts .topic-avatar {
width: 45px;
img.avatar {
width: 45px;
height: 45px;
}
}
```
---
### Author:  [@pacharanero](https://meta.discourse.org/u/pacharanero)
#### Post date: [Septembre 18, 2020, 10:29 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/5 "2020-09-18T10:29:15Z")
J’ai créé un composant de thème très simple qui élargit le sujet uniquement sur ordinateur de bureau. Il a été conçu pour mon Discourse personnel de prise de notes et de blogging à [bawmedical.co.uk](http://bawmedical.co.uk) et n’est pas très avancé ; il n’utilise pas encore de requêtes `@media`. Mais il pourrait convenir à des cas d’usage simples. Si quelqu’un l’utilise et a des retours, nous pourrons créer un nouveau sujet pour en discuter ici sur Meta, ou soumettre des problèmes ou des PR sur GitHub.
> **[GitHub - pacharanero/discourse-topic-width-desktop: A very simple theme component which makes the...](https://github.com/pacharanero/discourse-topic-width-desktop)**
>
> A very simple theme component which makes the topic-width slightly wider
(Ceci est autant un aide-mémoire pour moi-même que toute autre chose, car dans `$sometimeperiod`, j’aurai oublié comment j’ai fait cela et je chercherai à nouveau sur Meta !)
---
### Author:  [@REALITY](https://meta.discourse.org/u/REALITY)
#### Post date: [Décembre 3, 2020, 1:32 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/6 "2020-12-03T13:32:51Z")
Fantastique, merci !
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Janvier 4, 2023, 10:27 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/7 "2023-01-04T22:27:20Z")
> [@awesomerobot](#):
>
> Je pense qu’à terme, nous aimerions que la mise en page soit plus flexible afin qu’elle soit automatiquement à la bonne position si la largeur de la colonne du sujet est différente, mais pour l’instant, c’est un ajustement manuel à quelques points d’arrêt.
Bonne nouvelle, c’est le cas maintenant. Dans un thème, la largeur du contenu d’un sujet peut être augmentée avec un peu de CSS :
```css
:root {
--topic-body-width: 1000px;
}
```
C’est tout ! Pas de chevauchement. Notez que la largeur maximale est toujours limitée par la largeur maximale globale de Discourse, donc si vous voulez aller à l’extrême et faire quelque chose comme :
```css
:root {
--topic-body-width: 2000px;
}
```
vous devrez également augmenter `--d-max-width`, qui est par défaut à 1110px.
```css
:root {
--d-max-width: 3000px;
--topic-body-width: 2000px;
}
```
---
### Author:  [@pacharanero](https://meta.discourse.org/u/pacharanero)
#### Post date: [Janvier 9, 2023, 4:54 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/8 "2023-01-09T16:54:15Z")
Merci @awesomerobot, je mettrai à jour le composant de thème en conséquence
> [@How to increase width of topic](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/5):
>
> I’ve made a very simple Theme Component which widens the Topic on Desktop only. It was made for my personal notebooking/blogging Discourse at [bawmedical.co.uk](http://bawmedical.co.uk) and it’s not very advanced and doesn’t use @media queries (yet). But it may suit simple use-cases. If anyone uses it and has feedback then we can create a new Topic for discussion of it here on Meta, or submit Issues or PRs on GitHub [https://github.com/pacharanero/discourse-topic-width-desktop](https://github.com/pacharanero/discourse-topic-width-desktop) (This is as much an aide-memoire for myself …
---
### Author:  [@pacharanero](https://meta.discourse.org/u/pacharanero)
#### Post date: [Janvier 9, 2023, 5:32 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/9 "2023-01-09T17:32:41Z")
J’ai maintenant mis à jour le TC et ajouté un paramètre pour permettre de contrôler la largeur du sujet dans l’interface utilisateur de personnalisation. et cela fonctionne dans le sens où le paramètre CSS est modifié et vous pouvez le voir en inspectant la source de la page. Cependant, la largeur réelle du corps du sujet ne semble pas changer.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Janvier 9, 2023, 10:15 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/10 "2023-01-09T22:15:17Z")
Je viens de l’essayer et cela a fonctionné pour moi, j’ai dû actualiser la page après avoir activé le composant.
---
### Author:  [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [Janvier 12, 2023, 7:16 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/11 "2023-01-12T19:16:44Z")
Salut, c’est formidable de voir ces développements récents pour des thèmes plus larges, mes utilisateurs et moi vous remercierons !
Il semble que le composant de thème de [pacharanero](https://github.com/pacharanero/discourse-topic-width-desktop) soit probablement plus propre et plus moderne que la version de @Alex_P [ici](https://github.com/programmersforum-reborn/discourse-wide-posts) ? (Fil similaire : [Increasing post width with CSS?](https://meta.discourse.org/t/increasing-post-width-with-css/43368)) J’aime vraiment l’option de @Alex_P pour augmenter la largeur de l’éditeur de messages en plein écran.
J’aimerais également élargir considérablement les listes **Latest** / **New** / **Categories** de la page d’accueil. Pour ce faire, il semblerait judicieux de réduire les marges extrêmes gauche et droite, si possible à la même largeur que dans la vue du sujet pour plus de cohérence.
---
### Author:  [@pacharanero](https://meta.discourse.org/u/pacharanero)
#### Post date: [Janvier 13, 2023, 12:41 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/12 "2023-01-13T12:41:41Z")
Merci @rahim123 et je suis très heureux de travailler avec @Alex_P pour apporter les mêmes fonctionnalités aux deux, ou si quelqu’un voulait refactoriser les deux TCs ensemble en un seul unifié avec l’option Largeur de l’éditeur ajoutée. Ou un PR sur mon dépôt. C’est un plugin très simple donc pas du tout difficile à comprendre, je suis juste trop occupé en ce moment pour le faire bien que j’aie peut-être une chance dans les semaines à venir.
---
### Author:  [@agemo](https://meta.discourse.org/u/agemo)
#### Post date: [Janvier 13, 2023, 11:59 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/13 "2023-01-13T23:59:36Z")
> [@awesomerobot](#):
>
> ```css
> :root {
> --d-max-width: 3000px;
> --topic-body-width: 2000px;
> }
>
> ```
J’ai essayé cela, d’abord le corps du sujet, puis j’ai ajouté --d-max-width, ce qui a ensuite réaligné le corps sur le côté droit de l’écran - _inattendu !?_
Ainsi, même si la largeur est définie sur 1400px, vous dites que sans le `--d-max-width` ci-dessus, elle ne dépassera pas la valeur par défaut de 1110px - est-ce correct ?
---
### Author:  [@albjeremias](https://meta.discourse.org/u/albjeremias)
#### Post date: [Mars 20, 2023, 2:46 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/14 "2023-03-20T14:46:34Z")
eh bien, je l’ai changé en :
```css
:root {
--topic-body-width: 100w;
--d-max-width:100w;
}
```
100w étant la largeur de la fenêtre
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [Juin 8, 2024, 12:36 UTC](https://meta.discourse.org/t/how-to-increase-width-of-topic/81885/15 "2024-06-08T12:36:43Z")
Ce sujet a été automatiquement fermé après 2290 jours. De nouvelles réponses ne sont plus autorisées.