كيفية تقسيم الفئات إلى أقسام بعناوين؟

أشعر أنه يجب أن يكون شخص ما قد فعل ذلك سابقًا، لكنني لا أجد أي ذكر لذلك هنا. شعرت أننا بحاجة إلى ثلاثة فئات فرعية، لذا قمت بإصلاح ذلك، لكن بصراحة، لا يستحق الأمر مع الأخطاء التي تسببت بها في الإضافات الأخرى.

نحن لا نحتاج إلى الطبقة الثالثة على أي حال، نحن فقط بحاجة إلى طريقة لتقسيم صفحة قائمة الفئات إلى أقسام بحيث يكون كل تجميع مختلفًا بوضوح عن الآخرين ويعرف المستخدمون على الفور ما هو. من الواضح أنني قمت بالفعل بتلوينها وفقًا لذلك، لكن لا يوجد شيء يشرح للمستخدمين ما يعنيه كل لون.

أريد إضافة مسافة بين الفئات في عرض قائمة الفئات، ووضع كلمة نصية فيها كعنوان. على سبيل المثال:

المشاريع
| الفئة 1 - فرعية 1
| الفئة 2
| الفئة 3 - فرعية 1+2

التعلم
| الفئة 4 - فرعية 1
| الفئة 5

المحلية
| الفئة 6 - فرعية 1+2+3
| الفئة 7

إعجابَين (2)

يمكنك تحديد الفئات باستخدام معرفاتها (IDs) وحقن نصوص العناوين الخاصة بك قبلها، على سبيل المثال:

body [data-category-id="1"]:before {
    content: "المشاريع";
}

بدلاً من ذلك، يمكنك استخدام هذا المكون الجديد الذي يأتي مع إعدادات الخلفية لإضافة أقسام الفئات:

4 إعجابات

لقد استخدمت نفس تعديل CSS على منتدى Discourse الخاص بي، ولكن مع التحديثات الأخيرة التي أضافت الشريط الجانبي، أصبح الأمر الآن فوضويًا بعض الشيء:

كيف يمكنني تطبيق هذا التعديل على المخرج الرئيسي فقط وليس في الشريط الجانبي؟
شكرًا!

تعديل: هذا يحدث أيضًا في القائمة المنسدلة للرأس:

إعجاب واحد (1)

تحتاج فقط إلى أن تكون أكثر تحديدًا في إعلان النمط الخاص بك. يحدد المقتطف البرمجي الأنماط في أي مكان في عنصر الجسم. لتغيير ذلك، افحص العنصر الذي تريد تعديله باستخدام أدوات المتصفح الخاصة بك واستبدل body بتصريح أكثر تحديدًا، على سبيل المثال:

#main-outlet .category-list {
  [data-category-id="1"]:before {
     content: "Projects";
  }
}
إعجاب واحد (1)