كيفية استخدام CSS لــ versatile-banner

[Andro (Andrew Bernard)]

أود تغيير لون عناصر “توسيع” و “إغلاق” في اللافتة. أفترض أنه يمكن القيام بذلك باستخدام CSS. ولكن كيف يمكن للمرء القيام بذلك لمكون اللافتة؟

[MihirR (Mihir)]

إليك كيفية القيام بذلك:

1. افتح أداة الفحص:
   انتقل إلى صفحة الويب حيث تم تمكين اللافتة متعددة الاستخدامات. انقر بزر الماوس الأيمن في أي مكان على الصفحة وحدد “Inspect” (أو اضغط على Ctrl + Shift + I على نظام Windows، أو Cmd + Option + I على نظام Mac). سيؤدي هذا إلى فتح أدوات المطور في المتصفح.

2. حدد موقع اللافتة:
   في علامة التبويب Elements في أدوات المطور، مرر فوق أقسام مختلفة من التعليمات البرمجية لرؤية الأجزاء المقابلة من صفحة الويب المميزة. بمجرد العثور على اللافتة، انقر فوق <div> الخارجي الذي يحتوي على اللافتة. يضمن هذا أنك تحدد اللافتة بأكملها وجميع عناصرها.

3. استكشف العناصر:
   مع تحديد اللافتة، يمكنك الآن رؤية جميع عناصر HTML المتداخلة داخل بنية اللافتة في علامة التبويب Elements. يعرض هذا التسلسل الهرمي لـ HTML المستخدم لإنشاء اللافتة.

4. افحص الأنماط:
   على الجانب الأيمن من أدوات المطور، ستجد علامة التبويب Styles. يعرض هذا أنماط CSS المطبقة على العنصر المحدد. يمكنك عرض الأنماط الموروثة والأنماط المضمنة والأنماط من أوراق الأنماط الخارجية.

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

6. أنهِ التصميم:
   بمجرد رضاك عن تغييرات التصميم، انسخ كود CSS المعدل. يمكن أن يشمل هذا التغييرات التي تم إجراؤها على عناصر فردية أو اللافتة بأكملها.

7. طبق التغييرات:
   انتقل إلى https://yoursite.com/admin/customize/components لإنشاء مكون ثم Edit HTML/CSS section والصق كود CSS المعدل. تأكد من استهداف فئة اللافتة أو معرفها المناسب لضمان تطبيق الأنماط بشكل صحيح ثم قم بتطبيق هذا المكون على السمة الخاصة بك.

8. احفظ وراجع:
   احفظ كود CSS المحدث، وقم بتحديث موقعك على الويب، وتأكد من أن اللافتة تعكس التغييرات كما هو مقصود.

يمكنك أيضًا الاطلاع على: How to customize CSS in Discourse

[Andro (Andrew Bernard)]

@MihirR تعليمات عامة رائعة، شكراً جزيلاً لك.

يبدو أن القليل من القراءة يشير إلى أن Firefox لديه محرر أنماط أفضل من Chrome في أدوات مطوري الويب.

ولكن للوصول إلى الحالة المحددة، أواجه صعوبة كبيرة، لأن أزرار التوسيع والإغلاق تغير لونها عند التحويم، وقد استسلمت في محاولة العثور على كيفية تعيين اللون الأساسي. يبدو أن العنصر هو الفئة span.d-button-label.

[Don]

مرحباً

إليك مثال لكيفية تغيير لون تلك الأزرار.

.banner-box {
  .button-container {
    .btn {
      .d-icon,
      .d-button-label {
        color: var(--tertiary); // قم بتغيير هذا إلى اللون المطلوب
      }
      // لون التحويم والتركيز
      .discourse-no-touch & {
        &:hover,
        &:focus {
          .d-icon,
          .d-button-label {
            color: var(--tertiary-hover); // قم بتغيير هذا إلى اللون المطلوب
          }
        }
      }
    }
  }
}

[Andro (Andrew Bernard)]

@دان، هل هذا SCSS أم LESS؟ لقد خرجت عن نطاق معرفتي بالـ CSS الحالي. هل يستخدم Discourse ذلك دون الحاجة إلى تجميعه؟

[MihirR (Mihir)]

@Andro هذا SCSS :))

[Andro (Andrew Bernard)]

إذًا، هل يفهم Discourse نظام SCCS أصلاً؟

[MihirR (Mihir)]

نعم، إنه يفهم SCSS بشكل أصلي.