カテゴリをタイトル付きのセクションに分割する方法

開発
1

I feel someone must have done this previously but i can’t find it mentioned anywhere here. I felt we needed three sub-categories so i made that fix, but honestly its not worth it with the bugs caused to other plugins.

We don’t need the third layer anyway, we just need a way to break the categories list page up into sections so each grouping is clearly different from the others and users instantly know what it is. Obviously i’ve already colour coded them accordingly, but there is nothing to explain to users what each colour means.

I want to add a space between categories in the category list view, and put a word of text in it as a title. For example:

Projects
| category 1 - sub1
| category 2
| category 3 - sub1+2

Learning
| category 4 - sub1
| category 5

Local
| category 6 - sub1+2+3
| category 7

「いいね！」 2
2

You can select categories with their ids and inject your title texts before, e.g.:

body [data-category-id="1"]:before {
    content: "Projects";
}

Alternatively, you could use this new component, it comes with backend settings to add category sections:

「いいね！」 4
3

Discourse フォーラムでも同じ CSS 編集を使用しましたが、最新のアップデートでサイドバーが追加されたため、少し壊れてしまいました。

image
image823×1257 54 KB

この編集をサイドバーではなく、メインのアウトレットにのみ適用するにはどうすればよいですか？
よろしくお願いします！

編集：ヘッダーのドロップダウンでも同様の問題が発生しています。

image
image418×801 20.8 KB

「いいね！」 1
4

スタイル宣言をより具体的にする必要があります。コードスニペットは、body要素のどこにでもスタイルを宣言します。それを変更するには、ブラウザツールで調整したい要素を検査し、body をより具体的な宣言に置き換えます。たとえば、次のようになります。

#main-outlet .category-list {
  [data-category-id="1"]:before {
     content: "Projects";
  }
}
「いいね！」 1