通常、トピックは次のように表示されます。私が望むほど大きくありません。
そのため、幅を広げるためにこのコードを書きました。
.topic-body {
width: 830px;
}
次のように表示されるようにするためです。
しかし、画面が小さいときは、次のように表示されてしまいます。
これを回避するにはどうすればよいでしょうか？
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.
こんにちは、ユーザーからのリクエストがあったので、これを見つけました。
topic.body ルールに同じようなルールを適用するだけでは機能しないでしょうか？
このようにする代わりに：
.topic-body {
width: 830px;
}
例えば、以下のようにすることはできませんか：
.topic-body {
width: 727px;
@media all and (min-width: 1140px) {
width: 790px;
}
@media all and (min-width: 1250px) {
width: 870px;
}
}
こうすれば、トピックの幅がタイムラインの余白の幅に常に合わせて調整されます。
私はテーマでより広い画面を使用しています。他の多くの要素と混在していますが、トピック投稿ページ用のワイドスクリーンの要素だけをこのコンポーネントに抽出したと思います。最大幅を好きな値に変更するのは簡単です。
ヘッダーの幅を一定に保ち、トピック投稿ページで広がらないようにしたい場合は、20 行目から , .archetype-regular .d-header .wrap を削除してください。
90px のアバターを使用しています。45px にしたい場合は、head_tag.html と CSS の末尾にある以下の行を削除してください。
.topic-avatar {
width: 90px;
.avatar {
width: 90px;
height: 90px;
}
}
.embedded-posts .topic-avatar {
width: 45px;
img.avatar {
width: 45px;
height: 45px;
}
}
デスクトップのみでトピックの幅を広げる非常にシンプルなテーマコンポーネントを作成しました。これは bawmedical.co.uk の個人用ノート/ブログ用 Discourse 向けに作られたもので、まだ @media クエリは使用していませんが、単純なユースケースには役立つかもしれません。これを使用した方がいればフィードバックをください。ここで Meta に新しいトピックを作成して議論するか、GitHub で Issue や PR を提出できます。
（これは自分自身のためのメモとしても機能しています。$sometimeperiod 後には自分がどのように実装したかを忘れ、再び Meta で検索することになるでしょう！）
素晴らしい、ありがとうございます！
朗報です。これは現在、テーマで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;
}
@awesomerobotさん、ありがとうございます。テーマコンポーネントをそれに応じて更新します。
TCを更新し、カスタマイズUIでトピックの幅を制御できるパラメータを追加しました。これは、CSSパラメータが変更され、ページソースを検査すると確認できるため、機能しています。ただし、トピック本文の実際の幅は変更されていないようです。
こんにちは。より広いテーマに関する最近の進展は素晴らしいですね。ユーザーの皆さんにも感謝されると思います！
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を出すこともできます。非常にシンプルなプラグインなので、理解するのはまったく難しくありません。今は忙しすぎてできませんが、おそらく数週間以内にチャンスがあるかもしれません。
これを試してみました。まずトピック本文を追加し、次に --d-max-width を追加したところ、本文が画面の右側に再配置されました。予期せぬ動作です!?
したがって、幅が1400pxに設定されていても、上記の --d-max-width なしでは、デフォルトの1110px以上には広がらないということですか？
以下のように変更しました。
:root {
--topic-body-width: 100w;
--d-max-width:100w;
}
100wはウィンドウの幅です。