基于组成员资格的动态标题文本

开发
1

我希望得到一些关于标题/CSS 的帮助。我熟悉许多语言，但刚开始接触 CSS。

我试图在标题顶部放置一条通知，提醒会员在临近续期日期时进行续期。续期将通过我们的主网站完成，因此我想包含一个链接。我使用的是“Light”主题。

我已经非常接近成功了，采取了以下步骤：

  1. 创建了一个名为“renewal”的群组，并设置了一个“请续期”的头像，但没有其他操作。

  2. 将“renewal”设置为主要群组。

  3. 基于续期日期，通过 SSO 从我的远程站点将“renewal”包含在群组所有权中。

  4. 在“Common”的标题中放置了以下自定义代码：

image
image335×104 3.84 KB

  1. 在“Common”的 CSS 中放置了以下代码：

image
image364×111 4.14 KB

目前，当用户属于“renewal”群组时，文本能够正常显示。

现在，我想通过将其字体改为红色并添加一个指向“点击此处续期”的 <a> 标签来增强这条通知。但正如大家所知，无法在“Content:”字符串中添加 HTML 标签。我尝试在 <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.

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