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> 태그에 전용 클래스를 사용하지 않고 그렇게 하려면 IMHO(제 생각에는) 꽤 까다로울 것 같습니다.

혹시 이 기능을 원하시는 분이 계신가요? 아니면 개별 그룹 목록 페이지에 더 자세한 CSS 스타일링을 적용하는 방법을 알아내신 분이 계신가요?

3

어떤 종류의 수정을 원하시나요?

제가 이해하기로는 그룹 페이지를 대상으로 하려는 것 같습니다. 이렇게 접두사를 붙여 사용할 수 있습니다:

#main-outlet .container.group.FOO {
    //
}
6개의 좋아요
4

감사합니다. 꽤 근접한 해결책이 될 것 같습니다. 보통 이러한 셀렉터는 <body>에 적용되어 있어서 거기를 찾고 있었습니다.

@awesomerobot님이 만든 (아름다운) Discourse Category Banners 테마 컴포넌트와 더 잘 어울리는 것을 만들어 보고 싶은데, 출력된 HTML을 기준으로 할 수 있을지 확신이 서지 않습니다. 일단 직접 조만해 보겠습니다.

2개의 좋아요
5

JS를 사용하여 .group 요소에서 시작하여 상위 HTML 요소에 클래스를 설정할 수 있습니다.

1개의 좋아요
6

네, Discourse Category Banners에서 #main-outlet 위에 올바른 콘텐츠를 표시하기 위해 그렇게 한 것 같습니다. 추가적인 JS 작업은 아마도 제 위시리스트/할 일 목록에 꽤 오랫동안 남아있을 것이고, 당분간은 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>

문제는 페이지를 벗어나도 해당 클래스가 그대로 남아 있다는 점입니다. 페이지를 떠날 때 그 클래스를 제거하는 방법이 필요합니다. 아마도 쉬운 방법이 있을 텐데, 저는 자바스크립트에 대해 잘 알지 못해서 그걸 알아낼 만큼 영리하지는 않습니다. 여러분이 더 나은 방법을 찾아주셨으면 좋겠지만, 투박한 방법은 스크립트의 끝부분을 다음과 같이 변경하는 것입니다.

    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>