# FKB Pro - 소셜 테마

**URL:** <https://meta.discourse.org/t/fkb-pro-social-theme/234323>\
**Category:** Theme\
**Created:** [7월 28, 2022, 8:58오후 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323 "2022-07-28T20:58:41Z")\
**Posts on this page:** 1\
**Showing post:** 1

<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:** [7월 28, 2022, 8:58오후 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/1 "2022-07-28T20:58:42Z")

</div>

| | | |
| --- | --- | --- |
| 👓 | **미리보기** | [Theme Creator](https://discourse.theme-creator.io/theme/Don/fkb-pro) |
| 🛠 | **저장소** | [FKB Pro 테마](https://github.com/VaperinaDEV/fkb-pro-theme) |
| ❤ | **도움이 되셨나요?** | [\> ./support --coffee](https://meta.discourse.org/u/don) |
| ❓ | **설치 가이드** | [테마 또는 테마 컴포넌트 설치 방법](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **디스커스 테마를 처음 사용하시나요?** | [디스커스 테마 사용 입문 가이드](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

**FKB Pro** 는 고도로 수정되고 세밀하며 전문적인 소셜 테마이지만, 여전히 사용자 친화적입니다. 🚀

> ⚠ **이 테마는 매우 민감하여 사용 중인 다른 테마 컴포넌트나 플러그인과 호환되지 않을 수 있습니다!** 사용 전에 반드시 테스트하세요. 보통 몇 가지 css 수정이 필요합니다. 문제가 발생하면 보고해 주시면 수정하겠습니다.

* * *

## 레이아웃

**데스크톱:** 3단 레이아웃.

 ![Screenshot 2023-01-02 at 19.53.05](https://global.discourse-cdn.com/meta/original/4X/5/4/3/543b344600b8fb6ae6dccc92c77cecc46646b004.jpeg)

사이드바 지원

 ![Screenshot 2023-01-02 at 19.51.55](https://global.discourse-cdn.com/meta/original/4X/a/e/9/ae96c37c29d4d946ff2168e63b4b2383fee42ad3.jpeg)

* * *

**모바일:**

 ![Screenshot 2023-01-02 at 19.56.45](https://global.discourse-cdn.com/meta/original/4X/c/b/1/cb101211f3558a64d8b19ff040c956930e5ac52f.png) ![Screenshot 2023-01-02 at 20.20.41](https://global.discourse-cdn.com/meta/original/4X/7/6/1/761917687f96e0e3abed63d770270c0f604ecace.png)

* * *

### 둥근 모서리

FKB Pro는 기본적으로 모든 곳에 매우 둥근 모서리를 적용하지만, 모든 사용자가 좋아하지는 않으므로 더 쉽게 커스터마이즈할 수 있도록 몇 가지 테마 설정을 추가했습니다.

 ![Screenshot 2023-01-02 at 19.58.51](https://global.discourse-cdn.com/meta/original/4X/1/f/c/1fccacf5171aea5548d48c50a43b7e7a1702fdac.png)

둥근 모서리를 원하지 않으시면… 이 값을 `0`으로 설정하세요.

 ![Screenshot 2023-01-02 at 20.00.25](https://global.discourse-cdn.com/meta/original/4X/2/0/7/2075508e1fc874b289921f8f870f8fa450fb4387.jpeg)

* * *

### 토픽 카드

 ![topic-list-card](https://global.discourse-cdn.com/meta/original/4X/6/f/4/6f46b983b5ac24004bd0c7c59c0613d6e2409957.jpeg)

주요 섹션

1. **제목** _(클릭 시 마지막 게시물로 이동)_
2. **발췌** _(클릭 시 원문 게시물로 이동)_
3. **이미지** _(클릭 시 마지막 게시물로 이동)_

기타 섹션

1. **왼쪽 위** : 작성자 정보(아바타, 이름, 사용자 이름) 및 토픽 생성 날짜.  
_(클릭 시 사용자 카드 열림)_
2. **오른쪽 위** : 카테고리 배지
3. **가운데 아래** : 태그
4. **왼쪽 아래** : 토픽 좋아요 수 및 조회 수  
_(클릭 시 원문 게시물로 이동하며, 가능하면 토픽 요약 표시)_
5. **오른쪽 아래** : 마지막 작성자 아바타, 날짜 및 답변 수.  
_(아바타 클릭 시 사용자 카드 열림, 날짜 클릭 시 마지막 게시물로 이동, 답변 수 클릭 시 답변 선택 열림)_

배지 스타일

1. 불릿  
 ![Screenshot 2022-07-28 at 13.20.14](https://global.discourse-cdn.com/meta/original/4X/6/c/d/6cdc5a7403117371168c27ef3daf7d9f7a2d938c.png)

2. 바  
 ![Screenshot 2022-07-28 at 13.17.04](https://global.discourse-cdn.com/meta/original/4X/6/8/1/68116756d66aa507c89a51c0bacddadbcefc1767.png)

3. 박스  
 ![Screenshot 2022-07-28 at 13.18.34](https://global.discourse-cdn.com/meta/original/4X/b/9/c/b9c3856761448819fa18792e068b87bc3aca51c8.png)

* * *

### 카테고리 페이지

중앙 영역의 크기가 제한적이므로, 1단 카테고리 페이지 스타일을 사용하세요. 이 테마에 더 잘 맞도록 일부 커스터마이즈를 적용했습니다.

**카테고리만, 카테고리 및 최신 토픽, 카테고리 및 인기 토픽**

 ![Screenshot 2023-01-02 at 20.02.30](https://global.discourse-cdn.com/meta/original/4X/3/d/6/3d6c37cb89e561cbfde519599f0c2631b3f0dcab.png)

**카테고리 박스**

 ![Screenshot 2023-01-02 at 20.07.37](https://global.discourse-cdn.com/meta/original/4X/0/a/2/0a23eb3924f520031dbe110c2c8cb9e74f1b6429.png)

**또는**

@jordan.vidrine가 만든 [모던 카테고리 + 그룹 박스](https://github.com/jordanvidrine/discourse-category-group-boxes.git) 테마 컴포넌트를 사용할 수 있습니다.

* * *

## FKB 패널

**데스크톱:** 오른쪽 사이드바.

**비로그인 방문자** 에게는 환영 메시지가 표시됩니다. 이 메시지는 `js.signup_cta.value_prop`와 동일합니다. 헤더의 `Welcome` 텍스트는 테마 번역에서 변경할 수 있습니다.

 ![Screenshot 2022-07-28 at 12.10.27](https://global.discourse-cdn.com/meta/original/4X/e/8/9/e89499d24c72dc1631bdb711bf842e210b0e9bf1.png)

**또는**

**비로그인 방문자** 를 위해 커스텀 사이드바를 활성화하는 옵션이 있습니다. 이미지와 설명과 같은 커스텀 콘텐츠를 사이드바에 추가할 수 있습니다.

 ![Screenshot 2022-07-31 at 14.47.37](https://global.discourse-cdn.com/meta/original/4X/c/a/6/ca621fe3ac598fe90abc69c3308401595ab925fa.png)

 ![Screenshot 2022-07-31 at 14.44.05](https://global.discourse-cdn.com/meta/original/4X/a/4/2/a42331de7028c5f81318ec4a660b3d916ca40d78.png)

* * *

**로그인된 사용자** 에게는 프로필 사진, 통계, 배지 및 사용자 카드 이미지를 배경으로 사용하는 등 사용자 정보가 표시됩니다. 또한 하단에 몇 가지 빠른 버튼이 포함되어 있습니다.

 ![Screenshot 2022-07-28 at 12.58.34](https://global.discourse-cdn.com/meta/original/4X/1/9/9/1995c08ba14320f61760adb91b9b39fe5df0d9e7.png)

* * *

## 컬러 스킴

 ![Screenshot 2023-01-02 at 20.10.14](https://global.discourse-cdn.com/meta/original/4X/7/d/8/7d890aedc66b78523545ab6b223aa94870ff4a65.jpeg)

 ![Screenshot 2023-01-02 at 20.12.55](https://global.discourse-cdn.com/meta/original/4X/b/3/b/b3bc25823b2149ac961ce2e4e5112ce555c9f582.jpeg)

테마에는 **FKB Pro - 라이트** 및 **FKB Pro - 다크** 두 가지 컬러 스킴이 포함되어 있습니다.

> **Color Schemes**
>
> FKB Pro - Light
> 
> - primary `#242526`
> - secondary `#ffffff`
> - tertiary `#147efb`
> - quaternary `#147efb`
> - header\_background `#ffffff`
> - header\_primary `#242526`
> - highlight `#147efb`
> - danger `#f8745c`
> - success `#42b72a`
> - love `#fa6c8d`
> 
> FKB Pro - Dark
> 
> - primary `#ffffff`
> - secondary `#242526`
> - tertiary `#147efb`
> - quaternary `#4267b2`
> - header\_background `#242526`
> - header\_primary `#ffffff`
> - highlight `#147efb`
> - danger `#f8745c`
> - success `#42b72a`
> - love `#fa6c8d`

설정에서 변경할 수 있는 몇 가지 커스텀 컬러 스킴도 있습니다.

> **Custom Color Schemes**
>
> fkb-bg
> 
> - light `#f0f2f5`
> - dark `#18191a`
> 
> fkb-header-btn
> 
> - light `#e1e5eb`
> - dark `#3a3b3e`
> 
> fkb-header-btn-hover
> 
> - light `#d2d8e1`
> - dark `rgba(var(--primary-rgb),.1)`
> 
> fkb-btn
> 
> - light `#e1e5eb`
> - dark `#383838`
> 
> fkb-btn-hover
> 
> - light `#d2d8e1`
> - dark `rgba(var(--primary-rgb),.1)`

* * *

최신 업데이트에 대한 자세한 내용 🔽

> [@FKB Pro - 소셜 테마](https://meta.discourse.org/t/fkb-pro-social-theme/234323/56?u=dodesz):
>
> Hello, I’ve create a bigger update on this theme. I will merge this soon. slightly_smiling_face[https://github.com/VaperinaDEV/fkb-pro-theme/pull/13](https://github.com/VaperinaDEV/fkb-pro-theme/pull/13) Changes change layout from flexbox to grid sidebar compatibility new revamped user menu (redesign) clean up the code redesign chat floating navigation controls (notification, create topic button) on mobile desktop version navigation bar on mobile redesign oneboxes and quotes removed avatar and stats (fkb panel) from topic list on mobile remov…

그리고 여기 🔽

> [@FKB Pro - 소셜 테마](https://meta.discourse.org/t/fkb-pro-social-theme/234323/57?u=dodesz):
>
> Hello, I’ve added more updates, fixes etc: improve responsive layout added Discourse Reactions support added sticky new topic banner (floating from top) I testing it a little bit more and after I can merge these changes. slightly_smiling_face Responsive Sticky new topic banner Desktop Mobile

언급하지 않은 수많은 다른 커스터마이즈 옵션도 있습니다. 🙂

* * *

> **크레딧** ❤ [Fakebook](https://meta.discourse.org/t/fakebook-a-theme-for-social-media-lovers/109079) 테마를 만든 @awesomerobot 과 Fakebook 모던 테마를 만든 @jordan.vidrine 에게 큰 감사를 드립니다.

---

_[View the full topic](https://meta.discourse.org/t/fkb-pro-social-theme/234323)._