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
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
Fantastic, thank you!
朗報です。これは現在、テーマでCSSを使ってトピックのコンテンツ幅を広げることができます。
:root {
--topic-body-width: 1000px;
}
これで完了です！重なりはありません。最大幅は引き続きDiscourse全体の最大幅によって制限されるため、極端な例として次のようなことをしたい場合は、
:root {
--topic-body-width: 2000px;
}
--d-max-widthも増やす必要があります。これはデフォルトで1110pxです。
:root {
--d-max-width: 3000px;
--topic-body-width: 2000px;
}
「いいね！」 6
@awesomerobotさん、ありがとうございます。テーマコンポーネントをそれに応じて更新します。
「いいね！」 1
TCを更新し、カスタマイズUIでトピックの幅を制御できるパラメータを追加しました。これは、CSSパラメータが変更され、ページソースを検査すると確認できるため、機能しています。ただし、トピック本文の実際の幅は変更されていないようです。
「いいね！」 2
こんにちは。より広いテーマに関する最近の進展は素晴らしいですね。ユーザーの皆さんにも感謝されると思います！
pacharanero のテーマコンポーネントは、@Alex_P 氏のバージョン こちら よりもクリーンでモダンなようです。（関連スレッド：https://meta.discourse.org/t/increasing-post-width-with-css/43368）@Alex_P 氏の投稿エディタの幅をフルスクリーンに拡張するオプションは非常に気に入っています。
また、ホームページの 最新 / 新規 / カテゴリ のリストもかなり幅広くしたいと考えています。そのためには、一貫性を保つために、トピックビューと同じ幅に、極端な左右のマージンを縮小するのが理にかなっているようです。
@rahim123さん、ありがとうございます。@Alex_Pさんと協力して、両方に同じ機能をもたらしたり、誰かが2つのTCを統合して1つの統一されたものにリファクタリングし、Editor Widthオプションを追加したりできることを嬉しく思います。または、私のリポジトリにPRを出すこともできます。非常にシンプルなプラグインなので、理解するのはまったく難しくありません。今は忙しすぎてできませんが、おそらく数週間以内にチャンスがあるかもしれません。
「いいね！」 1
これを試してみました。まずトピック本文を追加し、次に --d-max-width を追加したところ、本文が画面の右側に再配置されました。予期せぬ動作です!?
したがって、幅が1400pxに設定されていても、上記の --d-max-width なしでは、デフォルトの1110px以上には広がらないということですか？
以下のように変更しました。
:root {
--topic-body-width: 100w;
--d-max-width:100w;
}
100wはウィンドウの幅です。
このトピックは2290日後に自動的に閉じられました。返信はもう許可されていません。