Amazonのようなセクションの外観をカスタマイズする方法

こんにちは、コミュニティの皆様!

最近 Discourse をインストールし、外観をカスタマイズしたいと考えています。

しかし、他のセクションからインデントされたセクションのグループを選択する方法や、1 列にサブセクションのリストを作成する方法がわかりません。

管理パネルの設定を確認しましたが、助けになるような類似のものは見つかりませんでした。

どのようなご支援でも大変嬉しく思います。
私は最近、このプラットフォームの学習を始めたばかりです。

ありがとうございます!

例えば、サブセクションのリストを単一の列にするには、ここ(category-list.scss)の値を変更する必要があります。

これらの値に変更します。

しかし、サーバー上のファイル自体を変更せずに、管理画面からこれを正しく行うにはどうすればよいでしょうか?

display: block;
align-items: baseline;
margin-right: 0;

「いいね!」 1

私の理解は合っていますか?このように行うべきでしょうか?
この問題の解決方法はこれで正しいですか?

これはサブカテゴリのデフォルトCSS です。カテゴリ編集ダイアログで「親カテゴリ」を割り当て、サブカテゴリと親カテゴリの色を同じに設定してください。

「いいね!」 1

色がそれと何の関係があるのか、正直よくわかりません。
デフォルトでは、サブカテゴリは以下のように表示されます:横に並んで、順番に。

上記で指定した CSS を適用した後、サブセクションは私が望んでいたように縦に並ぶようになりました。

単に確認したいのですが、私が示した形式で CSS を追加すること—管理パネルを通じて—is this the right way?

そして、2 つ目の主な質問は、Amazon フォーラムのスクリーンショットの例のように、セクション自体をインデントで互いに分離する方法は何かということです。

「いいね!」 1

ああ、わかりました。

正しい手順は、この CSS をテーマコンポーネントに配置することです。これは、あなたが現在行っている方法とわずかに異なるだけです!

Light テーマを編集しても、Dark テーマには変更が反映されません。

サイト全体のローカルカスタマイズは、単一のテーマコンポーネントで作成してください!

「いいね!」 4

アドバイスありがとうございます。コンポーネントとして割り当てるのがより良いかについてです。

具体的な例として Amazon を挙げると、これは CSS の問題だけでなく、マークアップも標準的な HTML と異なっています。

同じ表示を素早く構築するにはどうすればよいでしょうか?

残念ながら、レイアウトについては表面的な知識しかなく、私はバックエンド開発者なので、レイアウトは難しいです。

ソースファイル自体のコードを変更せずに、このレイアウトを移植することは可能でしょうか?

多くの既成のテーマを検討しましたが、大半は互いに似ており、Amazon のようにすっきりとしたものは見つかりませんでした。コミュニティと協力して作成するのはどうでしょうか?セクション間のインデントがある方が、よりすっきりと見えます。

彼らのマークアップが一部異なっているのは、サイトがかなり長い間更新されていないためです。

この CSS を追加すると、サブカテゴリのスタイルはほぼ整います。

.category-list .subcategories .subcategory {
  display: flex;
}

マークアップの変更を行いたい場合は、Discourse でのテンプレートオーバーライドの仕組みを調べる必要があります。これは『Discourse テーマ開発者ガイド』の高度なセクションに記載されています:Developer’s guide to Discourse Themes