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 테마와도 동작하게 만들어 주시면 좋겠습니다. 문제는 게시글 왼쪽에 있는 아바타가 옆에서 게시글 위로 위치가 바뀌는 것입니다.