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

开发
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

我制作了一个简单的主题组件，它会在 HTML 的 body 元素中添加群组相关的 CSS 类，方便进行自定义，我称之为 GitHub - discourse/discourse-groups-css-classes-in-body · GitHub :sweat_smile:

这样，你就可以在页面顶部的 HTML 中创建整个横幅，并根据 body 中的类来控制其显示或隐藏。

3

谢谢 @Falco。这确实很接近了！我的挑战是如何利用这一功能。在那个组件中，你提到：

将此组件安装到活动主题后，你可以像下面这样根据群组身份来设置 CSS 目标：

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

我知道这也许很简单，但我正在努力理解这个例子。如果我有如下这样一个 header div 区块：

<div name="test">我的文本</div>

那么，当某个类存在时，我能否显示该文本？具体来说，类似这样：

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

同时，当该类不存在时，我是否也需要将其隐藏？事实上，隐藏部分是不是才是关键？所以也许可以这样写：

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

我一直在尝试和搜索，但还没找到答案。我刚开始观看关于 CSS 的 YouTube 视频，这对我也许有帮助，但目前还没有明确的线索。非常感谢您的帮助！

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;
  }

谢谢