Unique CSS class for Group pages?

Contribute UX

AI-generated summary

A discussion is underway about adding a unique CSS class for group pages in Discourse. downey initially asked if it’s possible to add a group-specific class on group pages, allowing for custom styling. downey mentions that without a dedicated class on the <body> tag, styling an individual group’s page is challenging.

Arkshine suggests using a CSS selector to target the group page, but downey notes that this might not be sufficient for their needs. Canapin proposes using JavaScript to set classes on upper HTML elements starting from .group.

srmtey provides an initial JavaScript solution that adds a groupname class to the main id, but notes that the class persists even after navigating away from the page. srmtey refines the solution using a cookie to store the current group name, allowing for automatic addition and removal of the class.

1

Any chance of a group-specific class on the group-specific pages for members, topics, posts, etc.?

e.g. /groups/FOO/topics

This would allow us to do custom styling for each group.

「いいね！」 3
2

4 年が経ったので、今回はもう少し関心があるか聞いてみようと思いました。

個々のグループのページをスタイルできるのは確かに素敵ですが、メインのグループ一覧ページ（/g）にある groups-page のように、<body> タグに専用のクラスがないと難しいのは、私見ですが残念です。

他にもこれを望んでいる人はいますか？あるいは、個々のグループの一覧ページでより詳細な CSS スタイリングを行う方法をすでに発見した人はいますか？

3

どのような変更をお探しですか？

私の理解が合っていれば、グループページを対象にしたいとのことですね。以下のようにプレフィックスを付けてください。

#main-outlet .container.group.FOO {
    //
}
「いいね！」 6
4

ありがとうございます、かなり近いところまでたどり着けそうです。通常、これらのセレクターは 要素に適用されているように見えるため、私はそこを見ていました。

@awesomerobot さんが作成した（美しい）Discourse カテゴリバナー というテーマコンポーネントと調和するものを作りたいと考えています。出力される HTML を基にそれを実現できるかどうかわかりませんが、試行錯誤しながら進めてみます。

「いいね！」 2
5

.group から始まる上位の HTML 要素にクラスを設定するには、JavaScript を使用できます。

「いいね！」 1
6

はい、Discourse カテゴリバナー で #main-outlet の上に適切なコンテンツを表示するために、まさにその方法が取られました。追加の JavaScript は当分私の要望/TODO リストに残るでしょうし、今は CSS でできる範囲の対応をするつもりです。

7

これは、非常に不恰好な実装方法です。クラスの追加は簡単です。これにより、main ID に groupname が追加されます。ここで groupname はグループの名前そのものであり、例を挙げると <section id="main" class="ember-application groupname"> のようになります。

<script type="text/discourse-plugin" version="0.8">
        function getGroupInfo() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                if (myObj.group.name) {
                    document.getElementById("main").classList.add(myObj.group.name);
                }
            }
        };
        var url = window.location.href;
        xmlhttp.open("GET", url + ".json", true);
        xmlhttp.send();			
    }
    api.onPageChange(() =>{
        getGroupInfo();
    });
</script>

問題は、ページを移動してもクラスが残ってしまうことです。ページを離れる際にそのクラスを削除する方法が必要です。おそらく簡単な方法があるはずですが、JavaScript がよくわからないため、私にはそれを見出すことができません。より良い方法をご提案いただければ幸いです。しかし、不恰好な方法として、スクリプトの末尾を以下のように変更する方法があります。

    api.onPageChange(() =>{
        document.getElementById("main").classList.remove("group1");
        document.getElementById("main").classList.remove("group2");
        document.getElementById("main").classList.remove("group3");
        getGroupInfo();
    });

これにより、追加された可能性のあるすべての groupname クラスが削除されます。しかし、これは非常に不恰好な方法のように思え、新しいグループを追加するたびにコードを変更する必要があります。

「いいね！」 1
8

問題は、getGroupInfo() から api.onPageChange(() => { へ変数を渡す方法がわからなかったことです。

以下のコードは、クッキーを使ってこれを達成し、あなたが所属する任意のグループに対して、div ID main に "name-of-current-group" クラスを自動的に追加・削除します。

<script type="text/discourse-plugin" version="0.8">
        function getGroupInfo() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                var groupName = myObj.group.name;
                if (groupName) {
                    document.getElementById("main").classList.add(groupName);
                    $.cookie('groupCookie', groupName, { expires: 7, path: '/' });
                }
            }
        };
        var url = window.location.href;
        xmlhttp.open("GET", url + ".json", true);
        xmlhttp.send();                
    }
    api.onPageChange(() =>{
        var group = $.cookie('groupCookie');
        document.getElementById("main").classList.remove(group);
        $.cookie('groupCookie', 'false', { expires: -1, path: '/' })
        getGroupInfo();
    });
</script>