グループメンバーシップに基づく条件付きヘッダーテキスト

開発
1

ヘッダーや CSS のサポートをいただければ幸いです。私は多くの言語を知っていますが、CSS はまだ始めたばかりです。

メンバーが更新期限に近づいた際に、ヘッダーの上部に更新を促すお知らせを表示したいと考えています。更新はメインのウェブサイトで行うため、リンクを含めたいです。現在「Light」テーマを使用しています。

以下の手順を踏むことで、ほぼ完成しています：

  1. 「renewal」というグループを作成し、「please renew」というアバターを設定しましたが、他のアクションは設定していません。

  2. 「renewal」をプライマリグループに設定しました。

  3. 遠隔サイトからの SSO を利用して、更新日に基づき「renewal」をグループ所有権に含めました。

  4. 「Common」のヘッダーに以下のカスタムコードを配置しました：

image
image335×104 3.84 KB

  1. 「Common」の CSS に以下のコードを配置しました：

image
image364×111 4.14 KB

これで、ユーザーが「renewal」グループのメンバーである場合にテキストが表示されるまで動作しています。

次に、このお知らせを赤色のフォントにし、「更新はこちらから」というタグを含めるように改善したいと考えています。しかし、皆さんご存知の通り、Content: 文字列に HTML タグを追加することはできません。div にフォントカラーを追加しようとしましたが、うまくいきませんでした。

簡単な解決策はありますか？あるいは、div ブロック全体をオンオフするといった全く別のアプローチはありませんか？

参考までに、私が元にした例ではヘッダーに

タグを使用していました。しかし、これによりトリガーの有無に関わらずヘッダーの上部に余分な空白行が表示されてしまいます。それを避けたいと考えています。

ご支援よろしくお願いいたします！
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