Unique CSS class for Group pages?

UX
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 Likes
2

I thought since it’s been 4 years I’d ask again to see if there’s any more interest this time.

It sure would be nice to style an individual group’s page, but doing so without a dedicated class on the <body> tag – like we have for groups-page is on the main group listing at /g – would sure be nice, IMHO.

Has anyone else longed for this, or maybe alternatively, figured out a way to do more detailed CSS styling on an individual group’s listing page?

3

What kind of modifications you are looking for?

If I understand, you want to target a group page – you can prefix with:

#main-outlet .container.group.FOO {
    //
}
6 Likes
4

Thanks, that might get me pretty close. Typically it seems like these selectors have gone on <body> so that’s where I was looking.

I am trying to make something more complementary with the (beautiful) Discourse Category Banners theme component that @awesomerobot created, so not sure if I can do that based on the HTML outputted, but will hack around at it.

2 Likes
5

You could use js to set classes on upper html elements starting from .group.

1 Like
6

Yeah, that seems to be what was done on Discourse Category Banners in order to get the right content up above #main-outlet. Extra js will probably remain on my wish/todo list for quite a while and I’ll just do what I can with CSS for now.

7

Here is an ugly way to do it. Adding the class is easy. This will add a groupname to your main id, where groupname = whatever the name of the group is, ie <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>

The problem is the class stays there once you navigate away. We need a way to remove that class when we leave the page. There is probably an easy way to do this but I don’t really know js so I’m not clever enough to figure it out. Hopefully you can figure out a better way to do it, but the ugly way to do it is to change the end of the script to

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

This will remove any possible groupname class you’ve added. But it seems like a really ugly way to do it, and you have to change the code any time you add a new group.

1 Like
8

The problem was I couldn’t figure out how to pass a variable from getGroupInfo() to api.onPageChange(() =>{

Code below accomplishes this with a cookie and should auto add and remove a class "name-of-current-group" to/from div ID main for any group you have.

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