FKB Pro - Social theme

Also you can ask for help at:

https://ask.discourse.com

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

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

1 Like

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...
}

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

When having

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

The width becomes very small

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 Likes

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.

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.

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 Likes

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 Likes

Any news on getting this fixed yet?

Any news on getting this fixed yet?

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 Likes

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.

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 Likes

@Don your theme is awesome, thanks for sharing this beautiful theme :high_five:. It was just a little thank-you note because I think it’s important to acknowledge the hours of work that went into it for the community’s enjoyment !!

3 Likes

Hey @gilles :waving_hand: Thank you for the kind words! :hugs:
I have a small support section on my profile if you ever feel like supporting my work: > ./support --coffee

1 Like

FKB Pro v2 - What’s new?

A little late with the announcement - v2 was released about two weeks ago - but hey, better late than never. :slightly_smiling_face:

FKB Pro v2 is a fairly substantial update under the hood. While the overall look and feel remains familiar, quite a few parts of the theme have been redesigned, optimized, and cleaned up.

:desktop_computer: Improved desktop layout

The desktop topic list now uses a more flexible layout that works much better with the Discourse sidebar and FKB Pro’s own panel.

The layout adapts automatically as the available space changes, with dedicated breakpoints for smaller screens and mobile devices.

:triangular_ruler: Better responsive behavior

A lot of work went into handling narrow layouts and overflowing content.

Long topic titles, usernames, tags, and other content are now handled much more reliably instead of being able to push the layout beyond its available width.

Mobile layouts were also adjusted to work with the actual container width rather than relying on viewport-based sizing.

:high_voltage: Topic list performance

The topic list received some performance optimizations as well.

Off-screen topic cards can now be skipped by the browser when appropriate, while topic images and their containers use better containment rules.

This should be especially useful on longer topic lists.

:locked_with_key: Improved FKB Panel caching

The FKB Panel now uses user-specific, versioned cache keys.

Instead of sharing generic cache entries, user data is stored against the current Discourse user, which prevents cached information from leaking between accounts when switching users in the same browser.

The cache also now handles expiration and invalid entries more reliably.

:high_voltage: Faster panel loading

User summary and card data are now requested in parallel instead of waiting for one request to finish before starting the next.

There is also additional protection against outdated requests overwriting data after the active user has changed.

:control_knobs: New panel state management

The FKB Panel’s show/hide state has been moved into a dedicated state service.

This makes the behavior more predictable and easier to maintain, while also improving the panel toggle itself with:

  • proper aria-expanded state

  • descriptive labels

  • dynamic icons

  • persistent show/hide state

:wheelchair_symbol: Accessibility improvements

Several interactive elements received better accessibility support, particularly around the FKB Panel controls.

The panel toggle now exposes its state correctly to assistive technologies and provides more useful labels and titles.

:mobile_phone: Mobile improvements

Various mobile layouts were cleaned up and made more robust, including topic lists, categories, private messages, user pages, groups, and topics.

The goal was to make FKB Pro behave more naturally inside Discourse’s responsive layout rather than fighting against it.

:puzzle_piece: More modular code

A large part of the update was also about making the codebase easier to maintain.

The FKB Panel has been split into smaller components for things such as user information, statistics, badges, and visitors.

The topic list cards have also been reorganized into separate header, body, meta, and list-section components.

This doesn’t necessarily change what users see, but it makes future development considerably easier.

In short

FKB Pro v2 isn’t just a visual update. It’s a fairly significant rewrite of several parts of the theme, with a focus on better responsive behavior, performance, caching, accessibility, and maintainability.

Thanks to everyone using FKB Pro and reporting issues or suggesting improvements. :heart:

> ./support --coffee :heart:

2 Likes

I have a display issue on mobile caused by the description. I tried to see if I could do something about it, but I can’t figure it out. I don’t know if I’m the only one experiencing this.

1 Like

I managed to make a scss tweak for mobile

/* Force the description text to wrap */
.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;
}

after that, there might be a better way :rofl:

This looks like a core issue. :thinking: It happens for me on the default theme as well.

However, I think this section would be better handled with grid. Something like:

.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%;
    }
  }
}

This seems to handle the available space more reliably, especially when the category name is long.

1 Like