نص الرأس الشرطي بناءً على عضوية المجموعة

مطور
1

آمل الحصول على مساعدة بخصوص الترويسة (Header) أو CSS. أنا أعرف العديد من اللغات، لكنني ما زلت في بداياتي مع CSS.

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

أنا قريب جدًا من تحقيق ذلك، بعد اتخاذ الخطوات التالية:

  1. إنشاء مجموعة تسمى ‘renewal’ مع صورة رمزية (avatar) تحمل عبارة ‘please renew’ ولكن بدون أي إجراءات أخرى.

  2. تعيين ‘renewal’ كمجموعة رئيسية.

  3. تضمين ‘renewal’ في ملكية المجموعة باستخدام SSO من موقعي البعيد بناءً على تاريخ التجديد.

  4. وضع الكود المخصص التالي في ترويسة Common:

image
image335×104 3.84 KB

  1. وضع الكود التالي في CSS الخاص بـ Common:

image
image364×111 4.14 KB

يعمل هذا حتى يظهر النص عندما يكون المستخدم عضوًا في مجموعة التجديد.

الآن أود تعزيز هذا الإشعار بجعل الخط باللون الأحمر وتضمين وسم <a لـ ‘انقر هنا للتجديد’. ولكن كما يعلم معظمكم، لا يمكن إضافة وسوم HTML إلى سلسلة Content. حاولت إضافة لون خط إلى <div ولكن دون جدوى.

هل هناك إجابة سهلة؟ أم طريقة أخرى تمامًا لحل هذه المشكلة، مثل تشغيل وإيقاف كتلة div بأكملها؟

للعلم، المثال الذي بدأت منه استخدم وسم <p في الترويسة، لكن هذا أضاف سطرًا فارغًا إضافيًا في أعلى الترويسة سواء تم تفعيله أم لا. أود تجنب ذلك…

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

2

لقد قمت بإنشاء مكون سمة بسيط يضع فئات CSS للمجموعات في عنصر html body لتسهيل التخصيصات، وأسميه GitHub - discourse/discourse-groups-css-classes-in-body · GitHub :sweat_smile:

بهذه الطريقة يمكنك إنشاء اللافتة بالكامل في HTML في الرأس وإخفاؤها/إظهارها بناءً على الفئات الموجودة في عنصر body.

3

شكرًا لك يا @Falco. هذا قريب جدًا من الصواب! التحدي الذي أواجهه هو كيفية استخدام هذه الإمكانية. في ذلك المكون، قلت:

بعد تثبيت هذا المكون في السمة النشطة، يمكنك استهداف CSS باستخدام عضوية المجموعة، مثل:

body.group-patrons div.donation-banner {
display: none;
}

أعلم أنه ربما يكون الأمر بسيطًا، لكنني أحاول فهم هذا المثال. إذا كان لدي كتلة div في الرأس بهذا الشكل:

<div name="test">نصيحتي</div>

فهل يمكنني إظهار ذلك النص عند وجود فئة معينة؟ تحديدًا شيء مثل:

.primary-group-renewal div.test  {
   display: inline;
 }

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

:not(.primary-group-renewal) div.test{
    display: none;
  }

لقد كنت أجرب وأبحث في جوجل لكنني لم أجد ذلك بعد. بدأت في مشاهدة فيديوهات يوتيوب حول CSS وهو أمر مفيد لي على الأرجح، لكن حتى الآن لا توجد أدلة قاطعة. أقدر مساعدتك!

4

لقد قمت بالكثير من التجارب، وهذا ما يعمل حاليًا، لكن لديّ سؤال.

في الرأس:

<div id='renew' class='renewlink' align="center">
    <a href="https://www.example.com/renewlink" target="_blank")
    <font color='red'>
    الرجاء النقر لتجديد عضويتك
    </font>
    </a>
</div>

في CSS:

.renewlink{
    display: none;
  }

.primary-group-renewal .renewlink{
    display: block;
  }

كنت أتوقع حقًا أن يعمل هذا بدلاً من إدخال CSS المزدوج أعلاه، لكنه لم يعمل. ما الذي فاتني؟

:not(.primary-group-renewal) .renewlink{
    display: block;
  }

شكرًا لك