FKB Pro - 소셜 테마

커스터마이징 테마
482

Also you can ask for help at:

https://ask.discourse.com

483

How to make the right sidebar displaying everywhere? Not only the homepage and categories.

484

It doesn’t work for the "add topic“ button

1개의 좋아요
485

Hmm… works fine for me when previewing on Theme Creator.

If you want to specifically target the New Topic button, try:

button#create-topic {
  // add stuff here...
}
486

image
image734×142 1.56 KB

After this update, there seems to be an issue with this part of the CSS.

488

When having

  • a private message
  • with a tag
  • viewing without sidebar

The width becomes very small

image
image1333×504 24 KB

Cause:

.navigation-topics,
.categories-list,
body[class*="tag-"]:not(.archetype-regular):not(.archetype-banner),
body[class*="category-"]:not(.archetype-regular):not(.archetype-banner):not(.archetype-banner):not(.archetype-private_message) {

in fkb-d-topic-list.scss is being applied, and it shouldn’t.

I suspect it needs :not(.archetype-private_message)
However, I wonder why it is targeting these archetypes so specifically at all? Is it just trying to see whether it’s on a topic list (vs topic view?)

2개의 좋아요
489

I’m loving this theme but I’m either encountering a bug or I broke something.

For some reason there doesn’t seem to be any padding above topics so the rounded corners sort of disappear and there’s no visible separation between each topic.

image
image757×904 112 KB

490

Looks like something with the new modern foundation experimental change is causing this behaviour. Turning that off seems to set the padding back to normal.

491

Title:
[Bug] Theme crashes on Discourse 2026.4.0-latest — Could not find module 'ember-this-fallback/js-component'

Description:

After updating Discourse to v2026.4.0-latest (commit 19374472fd), the FKB Pro theme causes a fatal frontend crash, making the forum partially unusable. Discourse shows the orange banner:

“由于主题/组件有错误，您的站点可能无法正常运行。由 ‘FKB Pro theme’ 引起。”
(Translation: “Due to an error in the theme/component, your site may not work properly. Caused by ‘FKB Pro theme’.”)

Root Cause:

The theme (or one of its components) still references the ember-this-fallback/js-component module, which has been removed from Discourse core in recent versions. This module was a compatibility shim for the deprecated Ember this-property-fallback pattern, which allowed templates to use {{foo}} instead of {{this.foo}}. Discourse officially announced the removal of this shim and required all themes/plugins to migrate to explicit this. bindings.

Error from browser console:

Failed to load theme 4 from https://www.sitetalk.net/...
Error: Could not find module 'ember-this-fallback/js-component' imported from (require)

[THEME 4 'FKB Pro theme'] Error: Could not find module 'ember-this-fallback/js-component' imported from (require)
  at vendor.js
  at requireModule (vendor.js)
  at Object.lookup (chunk.js)
  ...
  at reportThemeError (chunk.js)

(Discourse version shown in console: v2026.4.0-latest, Ember v6.10.1)

Environment:

Item Value
Discourse version v2026.4.0-latest (commit 19374472fd)
Ember version v6.10.1
Theme FKB Pro (default install from this repo)
Reproduction 100% reproducible after upgrading Discourse

We hope that the developers can fix this issue. Thanks!!!

4개의 좋아요
492

Hello, after updating Discourse to v2026.4.0-latest — Ember v6.10.1, an error occurred, making the forum unusable:

client-error-handler.js:109 [THEME 28 ‘FKB Pro theme’] Error: Could not find module ember-this-fallback/this-fallback-helper imported from (require)
at loader.js:247:1
at a (loader.js:258:1)
at requireModule (loader.js:24:1)
at Object.lookup (app.js:36:12)

We hope this can be fixed.

4개의 좋아요
493

Any news on getting this fixed yet?

Ember-this-fallback deprecations crash in the deprecation handler
494

Any news on getting this fixed yet?

495

I have a report that GitHub - literatecomputing/fkb-pro-theme: FKB Pro is a highly modified, detailed, professional social theme, but still user-friendly. · GitHub is working. I made a pull request.

https://github.com/VaperinaDEV/fkb-pro-theme/pull/73

4개의 좋아요
496

Hi Don,

First of all, absolutely stunning theme! I recently deployed FKB Pro for my local education community, Jiwa.now, and the card-based UI looks gorgeous and highly professional.

Jiwa.now
Jiwa.now1440×3200 507 KB

While testing on mobile, I noticed a UX issue regarding the clickable areas on the topic cards. Currently, the clickable zones feel inconsistent. For example, users can click on the very edges of the card to enter a topic, but clicking on other blank areas (like on the right of the avatar row or in the middle of footer) does nothing.

This “hit-or-miss” interaction makes users feel confused, and it often leads to accidental clicks when they are simply trying to swipe and scroll through the feed.

:light_bulb: A Suggestion for Future Updates: It would be a UX improvement if the theme could refine this by default—making only the core content (Title, Image, and Excerpt) clickable to enter the topic, while disabling the card’s background to prevent swipe misclicks.

In the meantime, to make the mobile touch experience 100% reliable for my users, I wrote a CSS snippet using a pointer-events “whitelist” approach. It neutralizes the background click entirely and specifically re-enables clicks only on the actual interactive elements.

I thought I’d share it here for anyone looking to refine their touch targets, and perhaps it could be a useful reference for developers:

/* Fix for mobile card click/touch conflicts (Smart Whitelist Approach) */

/* 1. Neutralize the entire card background to prevent swipe-clicks */
.topic-list-item {
    pointer-events: none !important;
}

/* 2. Re-enable all native links and buttons (Avatars, Tags, Titles) */
.topic-list-item a,
.topic-list-item button {
    pointer-events: auto !important;
}

/* 3. Re-enable image clicks */
.topic-list-item .topic-image,
.topic-list-item .topic-thumbnail,
.topic-list-item img {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 4. Re-enable the entire footer stats area */
.topic-list-item .topic-item-stats,
.topic-list-item .topic-footer,
.topic-list-item .post-activity,
.topic-list-item .activity,
.topic-list-item .num,
.topic-list-item .topic-meta-data {
    pointer-events: auto !important;
}

/* 5. Kill any overlapping stretched-link pseudo-elements */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
    pointer-events: none !important;
    display: none !important;
}

Thx!

Leo

2개의 좋아요
497

@Don 테마가 정말 훌륭해요. 이렇게 멋진 테마를 공유해 주셔서 감사합니다 :high_five: . 커뮤니티를 위해 이 테마를 만들기까지 많은 시간을 투자하셨을 텐데, 그 노고를 인정하는 것이 중요하다고 생각해서 감사의 마음을 전하고 싶었어요!!

3개의 좋아요
498

안녕하세요 @gilles :waving_hand: 좋은 말씀 감사합니다! :hugs:
제 프로필에 작은 지원 섹션이 있어요. 제 작업을 응원하고 싶으시다면 언제든 이용해 주세요: > ./support --coffee

1개의 좋아요
499

FKB Pro v2 - 무엇이 새로워졌나요?

공지가 조금 늦었습니다. v2는 약 두 주 전에 출시되었거든요. 하지만 늦어도 나아서 나쁘진 않죠. :slightly_smiling_face:

FKB Pro v2는 내부적으로 상당히 큰 업데이트입니다. 전반적인 외관과 느낌은 익숙한 그대로이지만, 테마의 상당한 부분이 재설계되고 최적화되며 정리되었습니다.

:desktop_computer: 개선된 데스크톱 레이아웃

데스크톱 주제 목록은 이제 Discourse 사이드바와 FKB Pro 자체 패널과 훨씬 더 잘 어울리는 유연한 레이아웃을 사용합니다.

이 레이아웃은 사용 가능한 공간이 변함에 따라 자동으로 조정되며, 작은 화면과 모바일 기기를 위한 전용 브레이크포인트를 제공합니다.

:triangular_ruler: 더 나은 반응형 동작

좁은 레이아웃과 넘치는 콘텐츠 처리에 많은 공을 들였습니다.

긴 주제 제목, 사용자 이름, 태그 및 기타 콘텐츠는 이제 레이아웃이 사용 가능한 너비를 초과하도록 밀어내는 것을 방지하고 훨씬 더 안정적으로 처리됩니다.

모바일 레이아웃도 뷰포트 기반 크기를 의존하는 대신 실제 컨테이너 너비로 작동하도록 조정되었습니다.

:high_voltage: 주제 목록 성능

주제 목록에도 일부 성능 최적화가 적용되었습니다.

화면 밖의 주제 카드는 적절한 경우 브라우저가 이를 건너뛸 수 있으며, 주제 이미지와 그 컨테이너는 더 나은 포함(containment) 규칙을 사용합니다.

이것은 특히 긴 주제 목록에서 유용할 것입니다.

:locked_with_key: 개선된 FKB 패널 캐싱

FKB 패널은 이제 사용자별 버전화된 캐시 키를 사용합니다.

일반적인 캐시 항목을 공유하는 대신 사용자 데이터가 현재 Discourse 사용자와 연결되어 저장되므로, 같은 브라우저에서 사용자를 전환할 때 캐시된 정보가 계정 간에 누출되는 것을 방지합니다.

캐시는 또한 만료와 잘못된 항목을 더 안정적으로 처리합니다.

:high_voltage: 더 빠른 패널 로딩

사용자 요약 및 카드 데이터는 이제 다음 요청을 시작하기 전에 하나의 요청이 완료되기를 기다리는 대신 병렬로 요청됩니다.

활성 사용자가 변경된 후 오래된 요청이 데이터를 덮어쓰는 것을 방지하는 추가적인 보호 장치도 있습니다.

:control_knobs: 새로운 패널 상태 관리

FKB 패널의 표시/숨김 상태는 전용 상태 서비스로 이동되었습니다.

이것은 동작을 더 예측 가능하고 유지보수하기 쉽게 만들 뿐만 아니라, 패널 토글 자체도 다음과 같이 개선되었습니다:

  • 적절한 aria-expanded 상태
  • 설명적인 라벨
  • 동적 아이콘
  • 영구적인 표시/숨김 상태

:wheelchair_symbol: 접근성 개선

여러 인터랙티브 요소가 더 나은 접근성 지원을 받았으며, 특히 FKB 패널 컨트롤 주위에 그러합니다.

패널 토글은 이제 보조 기술에 상태를 올바르게 노출하고 더 유용한 라벨과 제목을 제공합니다.

:mobile_phone: 모바일 개선

주제 목록, 카테고리, 개인 메시지, 사용자 페이지, 그룹 및 주제를 포함한 다양한 모바일 레이아웃이 정리되고 더 견고해졌습니다.

그 목표는 FKB Pro가 Discourse의 반응형 레이아웃과 싸우는 대신 그 안에서 더 자연스럽게 작동하도록 만드는 것이었습니다.

:puzzle_piece: 더 모듈화된 코드

업데이트의 큰 부분은 또한 코드베이스를 유지보수하기 쉽게 만드는 것이었습니다.

FKB 패널은 사용자 정보, 통계, 배지, 방문자 등을 위한 더 작은 컴포넌트로 분리되었습니다.

주제 목록 카드도 개별 헤더, 본문, 메타, 목록 섹션 컴포넌트로 재구성되었습니다.

이것은 사용자가 보는 것을 반드시 바꾸지는 않지만, 향후 개발을 훨씬 더 쉽게 만듭니다.

요약

FKB Pro v2는 단순한 시각적 업데이트가 아닙니다. 더 나은 반응형 동작, 성능, 캐싱, 접근성 및 유지보수성에 초점을 맞춘 테마의 여러 부분에 대한 상당히 중요한 재작성입니다.

FKB Pro를 사용하고 문제를 보고하거나 개선을 제안해 주신 모든 분들께 감사드립니다. :heart:

> ./support --coffee :heart:

2개의 좋아요
500

Screenshot_20260829-165717_Chrome
Screenshot_20260829-165717_Chrome720×1600 142 KB

설명으로 인해 모바일에서 레이아웃이 깨지는 문제가 있습니다. 해결 방법을 찾아보았지만 방법을 모르겠습니다. 저만 이런 문제를 겪고 있는 건지 모르겠습니다.

1개의 좋아요
501

모바일용 scss 수정을 성공적으로 했습니다

/* 설명 텍스트가 줄바꿈되도록 강제 */
.category-heading__content p,
.category-heading__content span,
.category-heading__content div {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

그리고 더 좋은 방법이 있을 수도 있겠죠 :rofl:

502

이것은 핵심 문제처럼 보입니다. :thinking: 기본 테마에서도 저에게도 동일한 문제가 발생합니다.

다만, 이 섹션은 grid로 처리하는 것이 더 적합할 것 같습니다. 다음과 같은 방식입니다:

.category-heading {
  &.--has-logo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
  }

  &__content {
    min-width: 0;

    .badge-category__wrapper {
      max-width: 100%;
    }
  }
}

특히 카테고리 이름이 긴 경우를 제외하고는 가용 공간을 더 안정적으로 처리하는 것 같습니다.

1개의 좋아요