# 박스 카테고리 배경색 변경

**URL:** https://meta.discourse.org/t/change-category-background-color-for-boxes/238748
**Category:** UX
**Created:** [9월 12, 2022, 8:49오전 UTC](https://meta.discourse.org/t/change-category-background-color-for-boxes/238748 "2022-09-12T08:49:02Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)
#### Post date: [9월 12, 2022, 8:49오전 UTC](https://meta.discourse.org/t/change-category-background-color-for-boxes/238748/1 "2022-09-12T08:49:02Z")

</div>

카테고리 박스의 카테고리 색상 배경을 변경하는 방법을 알아내려고 애를 쓰고 있습니다:

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/f/5/7f59c4719b0e7139b07d116aea964995f28c9f8a.png)

목표는 메인 카테고리 색상을 상속받아 배경에 투명도를 추가하는 것입니다:

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/c/b/3cbae29e824a31df7967204779ebb5d61b3d6be1.png)

이걸 어떻게 하면 되는지 아는 분 계신가요?

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [9월 12, 2022, 3:45오후 UTC](https://meta.discourse.org/t/change-category-background-color-for-boxes/238748/2 "2022-09-12T15:45:41Z")

</div>

안녕하세요,

CSS와 템플릿의 약간의 수정으로 가능합니다. 🙂

데스크톱에서 카테고리 테두리는 배경색으로도 사용할 수 있는 색상 변수가 있습니다.

이는 테두리 색상인 `--category-color` 변수입니다.  
 ![Screenshot 2022-09-12 at 17.25.56](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/optimized/4X/c/e/f/ceface350d899dc2bf332b8ffeb4a8669b1e8a93_2_690x53.png)

하지만 이 변수는 16진수(hex) 값이므로 투명도를 설정할 수 없습니다. 대신 투명도도 설정할 수 있는 `::before` 의사 요소에 추가할 수 있습니다.

원하시는 대로 설치하거나 포크하여 수정할 수 있도록 컴포넌트로 만들었습니다. 🙂

컴포넌트: [GitHub - VaperinaDEV/discourse-category-background-color · GitHub](https://github.com/VaperinaDEV/discourse-category-background-color)

* * *

데스크톱용 CSS는 다음과 같습니다:

> <https://github.com/VaperinaDEV/discourse-category-background-color/blob/main/desktop/desktop.scss>

* * *

모바일에서는 템플릿에 이 색상 변수가 누락되어 있으므로, 여기에서 해당 스타일을 추가해야 합니다:

> <https://github.com/VaperinaDEV/discourse-category-background-color/blob/22c37769cbf26dced77cba213ac7a17c90f78448/javascripts/discourse/templates/mobile/components/parent-category-row.hbs#L3>

* * *

이후 데스크톱과 유사하게 `--category-color` 변수를 사용할 수 있습니다:

> <https://github.com/VaperinaDEV/discourse-category-background-color/blob/main/mobile/mobile.scss>

**데스크톱**

 ![Screenshot 2022-09-12 at 17.42.23](https://global.discourse-cdn.com/meta/original/4X/e/b/b/ebbb931b3c1f10bda12c044a0df542862e4a4c47.png)  
 ![Screenshot 2022-09-12 at 17.44.09](https://global.discourse-cdn.com/meta/original/4X/8/a/6/8a64df46f4a22c90dbbf7d3d8e090bb08eddb782.png)

**모바일**

 ![Screenshot 2022-09-12 at 17.43.11](https://global.discourse-cdn.com/meta/original/4X/b/0/9/b091c4eea8bbc1e685e336477055165d4605e2a8.png)

---

<div class="post-metadata">

### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)
#### Post date: [9월 12, 2022, 3:55오후 UTC](https://meta.discourse.org/t/change-category-background-color-for-boxes/238748/3 "2022-09-12T15:55:23Z")

</div>

최고예요!

설명해 주셔서 감사합니다. 이거 좀 가지고 놀아 볼게요!

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [9월 12, 2022, 4:21오후 UTC](https://meta.discourse.org/t/change-category-background-color-for-boxes/238748/4 "2022-09-12T16:21:33Z")

</div>

안녕하세요 @MarcP, 카테고리 박스에 이걸 적용하고 싶으셨다는 걸 완전히 놓치고 있었네요. 😃 데스크톱 CSS를 업데이트해서 카테고리 박스에서도 작동하도록 수정했습니다.

---

<div class="post-metadata">

### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)
#### Post date: [9월 12, 2022, 4:31오후 UTC](https://meta.discourse.org/t/change-category-background-color-for-boxes/238748/5 "2022-09-12T16:31:25Z")

</div>

아, 감사합니다. 이미 박스를 어떻게 작동시킬지 알아보고 있었거든요! 생각보다 더 복잡하네요. 정말 감사합니다!