نظام ألوان فريد لفئة

مطور
1

تحياتي.

أقوم بنقل منتدى قديم إلى Discourse وكان للموقع الأصلي سمة فريدة (بما في ذلك شعار رأس فريد) لإحدى فئاته.

حلي الحالي هو مكون سمة يبدو كالتالي:

CSS:

body.category-target-category{
/// استبدل #hexcodes بقيم الألوان التي تختارها
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
/// استمر في أي/جميع قيم الألوان المطلوبة
}

HTML/JS:

<script type="text/discourse-plugin" version="0.2.0">
    api.onPageChange(() => {
        var logo = document.getElementById("site-logo");
        var categories = document.getElementsByClassName("category-target-category");
        if(categories.length > 0)
        {
           logo.src = "category-specific-logo-url";
        }
        else
        {
            logo.src = "standard-logo-url";
        }
    });
</script>

حاليًا، يتعين عليّ المرور عبر كل قيمة لون محتملة مذكورة في color_definitions.scss لتجاوزها. أعتقد أن القيم لهذا الملف يتم إنتاجها من foundation/color_transformations.scss، والذي يقوم بإنشائها من القيم الموجودة في foundation/colors.scss. أعرف أنه يمكنك تجاوز قيم سمة الألوان الجذرية إما عبر قائمة المسؤول أو في ملف about.json لمكون السمة، ولكن أعتقد أن هذه التغييرات تحدث على مستوى الموقع بالكامل.

هل هناك طريقة أكثر كفاءة لتخصيص فئة معينة بخلاف سرد جميع المتغيرات التي يزيد عددها عن 100 في color_definitions.scss؟ على سبيل المثال، هل يمكن تعديل ملف foundation/colors.scss عبر مكون سمة؟

شكراً لمساعدتك!

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

مرحباً @Rhababo :wave: مرحباً بك في Meta :slight_smile:

إذا لم تكن قد عملت مع سمات Discourse والتطوير، فسأبدأ بالموارد هنا:

أيضًا، على سبيل المثال، يمكنك تغيير الشعار ولون الرأس وحتى ألوان الأيقونات لفئة معينة باستخدام كود CSS مثل هذا:

.category-<category-slug> .d-header {
    background: rgba(#ce0303, 0.90);
    .d-header-icons .d-icon  {
        color: #cccccc;
    }
    .header-sidebar-toggle button .d-icon {
        color: #cccccc;
        &:hover {
            color: #999999;
        }
    }
}    
    
.category-<category-slug> .d-header #site-logo.logo-small {
	content:url($small-logo);
}

.category-<category-slug> .d-header #site-logo.logo-big {
	content:url($big-logo);
}

إذا قمت بإنشاء سمة جديدة ببساطة، يمكنك إضافة الكود وتحميل الشعارات كأصول. <category-slug> هو اسم الفئة بأحرف صغيرة يظهر في حقل عنوان URL للمتصفح (افصل الفئات الرئيسية والفرعية بـ “-” شرطات، كما في parentcategory-subcategory).

هناك أيضًا مكونات سمات مختلفة مثل هذا الذي يمكنك البحث عنه

3 إعجابات
3

شكراً لك يا ليلي على مساعدتك ومواردك!

أنا أقدر حقًا تعليمات CSS للشعار. إنها أكثر أناقة بكثير من برنامجي النصي الأخرق.

سيحل حلك بالتأكيد مشكلتي. على الرغم من أن تحديد كل عنصر وترميز اللون له مباشرة بدا أمرًا مملاً. أتساءل عما إذا كانت هناك طريقة للاستفادة من الآلية التي يستخدمها ديسكورس لإنشاء لوحة الألوان الخاصة به من الألوان الأساسية الـ 12 تقريبًا الموجودة في colors.scss. أعتقد أن القيام بذلك قد يتطلب مكونًا إضافيًا بدلاً من مكون سمة، وهذا تحدٍ ليوم آخر.

شكرًا!

إعجابَين (2)