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

مطور
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

I made a simple theme-component that puts group CSS classes in the html body for easy customizations, I call it GitHub - discourse/discourse-groups-css-classes-in-body :sweat_smile:

That way you can create the entire banner in the HTML on the header and hide/show it based on the classes in the body.

5 إعجابات
3

Thanks @Falco. That is in the ballpark! My challenge is how to use that capability. In that component you say:

After installing this component to the active theme you can target CSS using group membership like, for example:

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

I know it is probably simple, but I am trying to understand that example. If I have a header div block like this:

<div name="test">My Text</div>

Then can I turn on that text when a class exists? Specifically something like:

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

And wouldn’t I also need to shut it off when that class does not exist? In fact isn’t the shutting off part the important bit? So perhaps something like this:

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

I have been experimenting and googling but have not found this yet. I’m starting to watch the ‘about CSS’ youtubes which is probably good for me, but so far no hard clues. I appreciate your help!

4

I’ve done a lot of experimentation and right now this is working, but I do have a question.

In Header:

<div id='renew' class='renewlink' align="center">
    <a href="https://www.example.com/renewlink" target="_blank")
    <font color='red'>
    Please click to renew your membership
    </font>
    </a>
</div>

In CSS:

.renewlink{
    display: none;
  }

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

I really expected this to work instead of the double CSS entry above and it did not. What am I missing here?

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

Thanks

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