Normally, topic look like this. Not as large as I want.
So, I wrote this code to increase the width :
.topic-body {
width: 830px;
}
To make it look like this :
But when my screen is smaller, it looks like this :
How to avoid this?
The position of the timeline is based on the default topic width, so that needs to be moved too… our default CSS is:
.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.
10 Likes
Hi, stumbled upon this since it has been a request from our users.
Wouldn’t it work to just use the same kind of rules on the topic.body rule?
Instead of this:
.topic-body {
width: 830px;
}
Could it be like, for instance:
.topic-body {
width: 727px;
@media all and (min-width: 1140px) {
width: 790px;
}
@media all and (min-width: 1250px) {
width: 870px;
}
}
This way the topic width would always go along with the timeline margin width.
I use a wider screen on my themes. It’s mixed in with a bunch of other stuff but I think I extracted all the widescreen stuff for just the topic posts page into this component, which should be easy enough to edit to get whatever max-width you want.
https://github.com/oerog/widescreen2.git
If you want the header width to stay consistent and not go wider on the topic posts page, then remove
, .archetype-regular .d-header .wrap from line 20
It uses 90px avatars so if you want 45px just delete the head_tag.html and these lines at the end of the css
.topic-avatar {
width: 90px;
.avatar {
width: 90px;
height: 90px;
}
}
.embedded-posts .topic-avatar {
width: 45px;
img.avatar {
width: 45px;
height: 45px;
}
}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 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
(This is as much an aide-memoire for myself as anything else, because in $sometimeperiod I will have forgotten how I did this and will be searching Meta for it again!)
5 Likes
Fantastic, thank you!
Good news, this is the case now. In a theme the content width of a topic can be increased with a little CSS:
:root {
--topic-body-width: 1000px;
}
That’s it! no overlap. Note that the max-width is still constrained by Discourse’s overall max-width, so if you want to go to an extreme and do something like:
:root {
--topic-body-width: 2000px;
}
you’ll also need to increase --d-max-width, which defaults to 1110px
:root {
--d-max-width: 3000px;
--topic-body-width: 2000px;
}
6 Likes
Thanks @awesomerobot, I will update the Theme Component accordingly
1 Like
I’ve now updated the TC and added a parameter to allow the Topic Width to be controlled in the Customize UI. and it is working in that the CSS parameter is being changed and you can see this when inspecting the page source. However the actual width of the topic body doesn’t seem to change.
2 Likes
I just tried it out and it worked for me, I did have to refresh the page after enabling the component though
2 Likes
Hi there, great to see these recent developments for wider themes, my users and I will thank you!
So it looks like pacharanero’s theme component is probably cleaner and more modern than @Alex_P 's version here? (Similar thread: Increasing post width with CSS?) I do really like @Alex_P 's option to increase the post editor width to full screen.
I’d also like to make the homepage Latest / New / Categories lists quite a bit wider too. To do that it would seem sensible to reduce the extreme left and right margins, if possible to the same width as in the topic view for consistency.
Thanks @rahim123 and I’m very happy to work with @Alex_P to bring the same features to both, or if someone wanted to refactor the two TCs together into one unified one with the Editor Width option added. Or a PR on my repo. It’s a very simple plugin so not at all hard to work out, I’m just too busy at the moment to do this although might get chance in coming weeks perhaps.
1 Like
I tried this out, topic body first, then added --d-max-width, which then re-aligned the body to right of screen - unexpected!?
Thus even if width is set to 1400px you’re saying without the above --d-max-width it won’t push out more than the 1110px default - is that correct?
well i changed it to:
:root {
--topic-body-width: 100w;
--d-max-width:100w;
}
being 100w the width of the window
This topic was automatically closed after 2290 days. New replies are no longer allowed.