# Unique CSS class for Group pages?

**URL:** <https://meta.discourse.org/t/unique-css-class-for-group-pages/40541>\
**Category:** UX\
**Created:** [March 3, 2016, 10:12pm UTC](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541 "2016-03-03T22:12:05Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)\
**Post date:** [February 18, 2020, 3:13am UTC](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541/7 "2020-02-18T03:13:07Z")

</div>

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

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

```plaintext
    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.

---

_[View the full topic](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541)._