Users are discussing how to increase the post width in Discourse using CSS. hashOK wants to utilize the available space to make posts look better, similar to the homepage. featheredtoast suggests using .topic-body { min-width: 65%; } and adjusting as needed, while rewphus uses 75% for a media-heavy site.
However, users have reported issues with the gutter content and topic timeline when increasing the post width. jord8on adds a CSS snippet to remove the timeline when the screen size shrinks below 1260px, while Alex_P suggests a more elegant solution using @media screen and (min-width: 1260px) { .topic-body { min-width: 80%; } }.
Alex_P also shares a theme component with the CSS, which is the recommended way to avoid editing all themes manually. The component has been refactored and extended to specify the size in px instead of % and includes UI improvements. However, Paracelsus notes that the component does not work well with the Material Design Theme due to an issue with the avatar placement.
In my forum,
1.I have an ample amount of space to use it for extending the post created by user.It rather looks clumpsy now.I want to utilize the space so that the post looks good,like the homepage is screen friendly using code:
@media screen and (min-width: 1400px) {
.wrap { max-width: 1500px; }
}
I want the post to be such
eg.
Please suggest how to do this
Any suggestion will be helpful
not a developer, but i think this may help:
https://meta.discourse.org/t/material-design-for-discourse/28864
My forum slightly increases post size by:
.topic-body{
min-width: 65%;
}
You can adjust as needed.
Consider readability before making it too wide:
I ended up going 75% because we are a very media heavy site. That’s the great part about Discourse, you can make it whatever you want it to be as long as you make sure it doesn’t conflict with other elements on the page.
I had 75 originally but line breaks in the “reply by new topic” button looked really weird, along with the topic links in the gutter.
I think the team has plans to move the topic links below the posts and clear out the gutter in a later release, but until then just be mindful of the gutter content.
Brilliant! Thank you for this snippet!
I changed my Topic Body as follows (by adding to my CSS):
.topic-body {
min-width: 80%;
}
After switching to 80%, I noticed that the Topic Timeline scrunches over the Topic Body starting at 1260px, until the time when it naturally disappears for mobile (maybe 800px?)
So I added this little snippet to my CSS to remove the timeline when the screen size shrinks below 1260px…
@media screen and (max-width: 1260px) {
.topic-timeline {
display: none;
}
}
Works like a charm now!
我认为像这样的方式更有意义：
@media screen and (min-width: 1260px) {
.topic-body {
min-width: 80%;
}
}
我还没试过这个，但我怀疑你是对的！我的 CSS 方法并不总是最佳方案！我只是尝试几种不同的方法，直到让页面按我想要的效果呈现！我现在正在构建一个新的社区。如果最终我也需要实现同样的功能，我会回来分享进展！感谢你的建议，提供了一个（可能更好的）解决方案！
这里还有我的主题组件及其 CSS。现在推荐采用这种方式，以避免手动编辑所有主题。
我对该组件进行了重构和扩展。
尺寸现在以 px 为单位指定，而不是 %，以避免混淆，并使其能够在其他位置使用。
.topic-post:not(.d-toc-post) .topic-body {
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$additional_post_width});
}
此处求和的前两部分取自标准的 Discourse SCSS。
还有一些小的 UI 改进，例如增加了分隔符和管理员操作帖子的尺寸，并且现在在 DiscoTOC 帖子中禁用了该功能，因为在此处表现异常。
此外，我还添加了一个选项来增加编辑器最大宽度，以使预览与帖子宽度匹配。虽然并非完全一致，但标准版本也存在同样的问题。
非常感谢 @Alex_P。如果您能让它与 Material Design 主题兼容那就太好了，目前的问题是帖子左侧的头像会从侧面跳到帖子本身的上方。