# Unique CSS class for Group pages?
**URL:** https://meta.discourse.org/t/unique-css-class-for-group-pages/40541
**Category:** UX
**Created:** [3월 3, 2016, 10:12오후 UTC](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541 "2016-03-03T22:12:05Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@downey](https://meta.discourse.org/u/downey)
#### Post date: [3월 3, 2016, 10:12오후 UTC](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541/1 "2016-03-03T22:12:05Z")
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.
---
### Author:  [@downey](https://meta.discourse.org/u/downey)
#### Post date: [2월 16, 2020, 10:42오후 UTC](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541/2 "2020-02-16T22:42:06Z")
4년이 지났으니 이번에는 더 많은 관심이 있는지 확인하려고 다시 한번 질문해 봅니다.
개별 그룹 페이지를 스타일링할 수 있으면 좋겠지만, `/g`의 메인 그룹 목록에 있는 `groups-page`처럼 `` 태그에 전용 클래스를 사용하지 않고 그렇게 하려면 IMHO(제 생각에는) 꽤 까다로울 것 같습니다.
혹시 이 기능을 원하시는 분이 계신가요? 아니면 개별 그룹 목록 페이지에 더 자세한 CSS 스타일링을 적용하는 방법을 알아내신 분이 계신가요?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2월 17, 2020, 12:59오전 UTC](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541/3 "2020-02-17T00:59:24Z")
어떤 종류의 수정을 원하시나요?
제가 이해하기로는 그룹 페이지를 대상으로 하려는 것 같습니다. 이렇게 접두사를 붙여 사용할 수 있습니다:
```CSS
#main-outlet .container.group.FOO {
//
}
```
---
### Author:  [@downey](https://meta.discourse.org/u/downey)
#### Post date: [2월 17, 2020, 1:06오전 UTC](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541/4 "2020-02-17T01:06:46Z")
감사합니다. 꽤 근접한 해결책이 될 것 같습니다. 보통 이러한 셀렉터는 ``에 적용되어 있어서 거기를 찾고 있었습니다.
@awesomerobot님이 만든 (아름다운) [Discourse Category Banners](https://meta.discourse.org/t/discourse-category-banners/86241) 테마 컴포넌트와 더 잘 어울리는 것을 만들어 보고 싶은데, 출력된 HTML을 기준으로 할 수 있을지 확신이 서지 않습니다. 일단 직접 조만해 보겠습니다.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2월 17, 2020, 10:22오전 UTC](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541/5 "2020-02-17T10:22:07Z")
JS를 사용하여 .group 요소에서 시작하여 상위 HTML 요소에 클래스를 설정할 수 있습니다.
---
### Author:  [@downey](https://meta.discourse.org/u/downey)
#### Post date: [2월 17, 2020, 10:39오후 UTC](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541/6 "2020-02-17T22:39:55Z")
네, [Discourse Category Banners](https://meta.discourse.org/t/discourse-category-banners/86241)에서 `#main-outlet` 위에 올바른 콘텐츠를 표시하기 위해 그렇게 한 것 같습니다. 추가적인 JS 작업은 아마도 제 위시리스트/할 일 목록에 꽤 오랫동안 남아있을 것이고, 당분간은 CSS로 할 수 있는 것만 해보겠습니다.
---
### Author:  [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [2월 18, 2020, 3:13오전 UTC](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541/7 "2020-02-18T03:13:07Z")
여기서는 좀 투박한 방법으로 처리합니다. 클래스를 추가하는 것 자체는 쉽습니다. 이 방법은 `main` id에 `groupname`을 추가하는데, 여기서 groupname은 그룹의 이름(예: ``)입니다.
```plaintext
```
문제는 페이지를 벗어나도 해당 클래스가 그대로 남아 있다는 점입니다. 페이지를 떠날 때 그 클래스를 제거하는 방법이 필요합니다. 아마도 쉬운 방법이 있을 텐데, 저는 자바스크립트에 대해 잘 알지 못해서 그걸 알아낼 만큼 영리하지는 않습니다. 여러분이 더 나은 방법을 찾아주셨으면 좋겠지만, 투박한 방법은 스크립트의 끝부분을 다음과 같이 변경하는 것입니다.
```plaintext
api.onPageChange(() =>{
document.getElementById("main").classList.remove("group1");
document.getElementById("main").classList.remove("group2");
document.getElementById("main").classList.remove("group3");
getGroupInfo();
});
```
이렇게 하면 추가된 모든 가능한 groupname 클래스를 제거할 수 있습니다. 하지만 이 역시 매우 투박한 방법처럼 보이며, 새 그룹을 추가할 때마다 코드를 수정해야 합니다.
---
### Author:  [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [2월 18, 2020, 6:23오후 UTC](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541/8 "2020-02-18T18:23:55Z")
문제는 ` getGroupInfo()` 에서 `api.onPageChange(() =>{` 로 변수를 전달하는 방법을 찾지 못했다는 것이었습니다.
아래 코드는 쿠키를 사용하여 이 문제를 해결하며, 사용자가 속한 모든 그룹에 대해 `div ID main` 에 현재 그룹 이름인 `"name-of-current-group"` 클래스를 자동으로 추가하고 제거합니다.
```plaintext
```