أريد فقط أن يكون لون أيقونة الفئة الفرعية مرئيًا.
يجب ألا تحتوي الفئة الرئيسية على لون أيقونة.
لا أريد أن تبدو ثنائية اللون.
كيف يمكنني فعل ذلك؟
[image]
لست متأكدًا مما إذا كان هناك إعداد لهذا، ولكن يمكنني أن أريك كيف سأحاول التغيير باستخدام CSS:
-
انقر بزر الماوس الأيمن على الأيقونة واختر “Inspect”.
-
سيؤدي هذا إلى فتح أدوات مطوري المتصفح. (ملاحظة: أنا أستخدم Chrome هنا ولكن معظم المتصفحات يمكنها القيام بنفس الشيء!) هناك الكثير للنظر إليه، ولكن هناك قسمين رئيسيين سنركز عليهما - Elements، الذي يعرض أجزاء الصفحة في تسلسل هرمي متداخل، و Styles، الذي يعرض CSS الذي يؤثر على العنصر المحدد.
-
استخدام النقر بزر الماوس الأيمن → Inspect يقربنا عادةً من العنصر الذي نريد تعديله، ولكن في كثير من الأحيان تحتاج إلى البحث قليلاً. في هذه الحالة، حدد عنصر
<span>، ولكن يبدو أن العنصر المسؤول عن الأيقونة بداخله: عنصر::before.
-
إحدى الطرق التي يمكنك من خلالها العثور على العنصر الصحيح هي مشاهدة الصفحة أثناء تحريك مؤشر الماوس فوق العناصر المدرجة في لوحة العناصر. عندما قمت بتحريك مؤشر الماوس فوق
::before، تم تمييز الأيقونة فقط:
-
في لوحة Styles، يمكننا أن نرى أن هناك إعلانًا يضبط الخلفية على اللون الأحمر، ولكن يتم تجاوزه بقاعدة مختلفة تضبطها على خلفية بلونين. (ملاحظة: لا تتردد في تعديل أي CSS في لوحة Styles للتجربة. أي تغييرات مؤقتة وسيتم التراجع عنها عند تحديث الصفحة. يمكنك أيضًا تبديل الإعلانات الفردية وتشغيلها وإيقافها لرؤية تأثيراتها)
-
يمكننا إنشاء قاعدة جديدة لتجاوزها مرة أخرى عن طريق نسخ جزء المحدد من القاعدة العلوية وإعلان الخلفية الأصلي من القاعدة السفلية.
-
ستذهب هذه القاعدة الجديدة إلى CSS المخصص/الخاص بالمظهر الخاص بك، وإذا نجح كل شيء بشكل صحيح، فيجب أن تكون الأيقونات ألوانًا صلبة تمثل الفئات الفرعية!
.badge-category__wrapper .badge-category.--has-parent:before {
background: var(--category-badge-color);
}
5 إعجابات
شكرا على الشرح المفصل
إعجاب واحد (1)
@Bryce_Huhtala سطح المكتب عمل\n\nلم يعمل على الهاتف المحمول\n\nما هو الرمز الذي يجب أن أدخله للهاتف المحمول؟
هذا غريب. عندما أستخدم عرض الجوال على جهاز الكمبيوتر الخاص بي، فإنه يعرض نفس قواعد CSS، لذلك لست متأكدًا من سبب عرضه بشكل مختلف. الشيء الوحيد الذي يمكنني التفكير فيه هو التأكد من أن الكود الجديد موجود في قسم Common.scss حتى يتم استخدامه لكليهما.
إعجابَين (2)
كلها غلطتي
إنها تعمل بشكل جيد، لا مشاكل
لا تقلق، سعيد أنه يعمل! 
إعجابَين (2)
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.