Making custom CSS changes on your site

[Discourse]

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

مستوى المستخدم المطلوب: مسؤول

ملخص

يغطي هذا الدليل:

1. مقدمة موجزة عن CSS والمفاهيم الأساسية
2. كيفية إضافة CSS إلى موقع Discourse الخاص بك باستخدام مكونات السمات
3. استخدام أدوات فحص المتصفح للعثور على محددات CSS الصحيحة

فهم أساسيات CSS

CSS اختصار لـ Cascading Style Sheets. فيما يلي ثلاثة مفاهيم أساسية يجب فهمها:

1. الهيكل: تتكون قاعدة CSS من محدد وخصائص وقيمة.

p {
  color: red;
}

• المحدد: p (يستهدف جميع وسوم p في HTML)
• الخاصية: color
• القيمة: red

2. التتالي: القاعدة الأخيرة المطبقة لها الأسبقية. على سبيل المثال:

p {
  color: red;
}
p {
  color: green;
}

ستكون الفقرات باللون الأخضر لأنها القاعدة الأخيرة المطبقة.

3. الخصوصية: القواعد الأكثر تحديدًا تتجاوز القواعد الأقل تحديدًا. على سبيل المثال:

div p {
  color: green;
}
p {
  color: red;
}

ستظل الفقرات داخل div باللون الأخضر لأن div p أكثر تحديدًا من p.

إضافة CSS إلى موقع Discourse الخاص بك

لإضافة CSS إلى موقع Discourse الخاص بك:

1. انتقل إلى Appearance > Themes & components من الشريط الجانبي أو اتبع هذا الرابط لموقعك: https://yoursite.com/admin/customize/components
   

   

2. انقر على Install و Create New على التوالي.
   

   

3. قم بتسمية مكون السمة الخاص بك وانقر على Create
   

   

4. اختر السمات التي تريد تطبيق المكون عليها
   

   

5. انقر على Edit Code
   

   

6. أضف CSS الخاص بك إلى علامة التبويب CSS
   

   

7. انقر على “Save” لتطبيق تغييراتك.
   

   

إذا كان لديك سمات متعددة قابلة للاختيار من قبل المستخدم، فتأكد من إضافة مكونات السمات الخاصة بك إلى جميع السمات ذات الصلة.

العثور على محددات CSS الصحيحة

استخدم أدوات فحص المتصفح للعثور على محددات CSS الصحيحة:

1. انقر بزر الماوس الأيمن على العنصر الذي تريد تعديله.

2. حدد “Inspect” من قائمة السياق.
   

   

3. في لوحة أدوات المطور، حدد موقع محددات العناصر.
   

   

4. انقر على المحددات المعنية وأضف قاعدة CSS الخاصة بك.
   

   

5. انسخ القاعدة، والصقها في قسم CSS لمكون السمة الخاص بك وقم بإزالة القواعد الأخرى.
   

   

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

إليك فيديو يوضح الخطوات المذكورة أعلاه:

إذا لم يتم تطبيق تغييراتك، فتحقق مما يلي:

• تم تمكين مكون السمة على السمات الخاصة بك.
• قاعدة CSS الخاصة بك محددة بما يكفي لتجاوز الأنماط الموجودة.

موارد إضافية

• توثيق MDN CSS
• توثيق Chrome DevTools
• Freecodecamp
• دليل المبتدئين لاستخدام سمات Discourse

[bloomexperiment (Tracey)]

هل يمكن تحويل هذا إلى ويكي؟ المعلومات الموجودة تحت عنوان أين أضيف CSS الخاص بي؟ تحتاج إلى تحديث، لأنه لم يعد هناك زر تعديل CSS/HTML إذا قمت بتثبيت سمة موجودة — وهو أمر مرجح الآن إذا اختار شخص ما سمة من خلال معالج الإعداد الجديد. الآن نستخدم مكونات السمات التي ستتم إضافتها إلى السمات الموجودة.

https://meta.discourse.org/t/make-css-changes-on-your-site/168101#where-do-i-add-my-css-5

يمكنني تحديثه بمجرد تحويله إلى ويكي.

[bloomexperiment (Tracey)]

تم الانتهاء من هذا الآن