FKB Pro - Social theme

But could it be done with CSS/whatever? :smile:

EDIT: Ignore all of the below. The issue was the Discourse Topic List Author component.
Also, any idea what happened to this bar? I refreshed my page last night and it randomly turned into this and I can’t figure out how to fix it. It still looks fine on mobile, though. The bar is really wide now and when you click on it, the text color is the same color (in light and dark modes) and things aren’t fully in the box now.

I’ve compared my theme’s CSS with yours here for the topic-list-header and they’re the same, so I have no idea what’s causing this.

@Don Hey, real quick, is there any good way to adjust these buttons so that they aren’t so crowded on mobile?

Kind of messy how it is currently. Maybe “Reply” could be moved next to the “2/2” area/wrench icon and Tracking could be moved next to Topic Controls. Something more clean.

Also, the Discourse Topic List Author component makes the little box at the bottom become really wide for some reason. Any way around this? Took forever for me to figure out it was this component causing the issue, haha.

I’ve made some adjustment here:

I think the default theme has same alignment. :thinking: I don’t think we should change this. Anyway users don’t have wrench button.

I don’t think the Topic List Author theme component is compatible with this theme. As both the FKB theme and the Topic List Author are override the topic list item template.

1 Like

Thanks a ton! Will check these out in a minute. Quick question, though:
What’s the proper way to update this theme if I’ve forked it on GitHub?

Basically, I forked it, I make my own changes locally & push the updates to my GitHub and then update the theme in my site’s Admin themes panel. But how do I update it by keeping what I’ve changed locally while also including the changes you make to it? When I go to sync my fork of the theme with the changes you make, I get this:

So if I discard my own changes, won’t that make all of my changes disappear? I want to keep the edits I’ve made while also receiving the changes you make to the core of the theme.

EDIT: I updated theme with your latest edits. Looks like Tracking area/icon are adjusted to the left of the screen now and the “2/2” page area is now rounded. Is this correct? It does look a little better on mobile now, but even on a regular user account, there’s still that awkward empty space on mobile next to the page number.

EDIT 7hrs later: So, does this theme not have options for “selected” and “hover” on the color schemes? I see all of the color options except the last 2: selected & hover.

Hey, @Don, in addition to my above reply, is it possible to make something so that instead of longer posts having “Read more…” on them and once clicked, it making you enter the topic, it will instead show all of the topic’s content dropped down instead of entering the actual topic? Like how actual FaceBook works/worked?

EDIT 17hrs later: Also, is there a way to have the comment button on the main forums page take you directly to the comments instead of picking the original or most recent post?

Yeah that’s by design.

I’ve merged this. :+1:

1 Like

Hi @Don

Thanks for the awesome theme!
I was wondering how I could change the settings to have the third badge style below, as my site currently shows the first badge style

1 Like

Hello :wave:

Thanks :heart: Yeah, there was some changes in core with category badges. I will add a setting to change the style of these. :slightly_smiling_face:

1 Like

Thank you.

And then it’s not major, but I’ve also noticed 3 CSS issues:

1) The search banner doesn’t show the search bar properly on desktop/tablet, only on mobile view…


Mobile (which looks good):

2) The Docs view on mobile extends beyond the screen on the right:

3) The category boxes (for subcategories) are cutting the words off once it becomes 3 columns responsively:


Is there any way to perhaps fix these as well?

1 Like

Hello @Clo :wave:

Thanks for the report. :slightly_smiling_face: This update cover pretty much everything you mentioned.

It contains a new setting where you can choose from category badge styles.
It isn’t contain the bar style yet.

category badge style

  • bullet (default)
  • box

Also added some support for Search Bar theme component and fixed the Docs topic list view on mobile.

I assume this is the GitHub - discourse/discourse-minimal-category-boxes theme component. But I can’t repro it. :thinking: Could you clarify more? Is this happens on other themes e.g. default theme too?

Hi @Don

Thanks so much, the search bar and categories are now looking great!

The Docs on mobile view unfortunately still needs some padding, I think. See the image below:

The text still extends beyond the screen on the right.

And regarding the category boxes, they haven’t done this with any of the other themes I previously used or the default theme. It might be because this theme has a sidebar on the right, which the other ones don’t have, so now the three columns have to squeeze into the middle?

These are the components I’m using:


The same issue happens with the main categories page:

It looks like the line break for the screen size is too late, causing the boxes to become too small for the text, then it cuts off the text.

Can you please share you forum url or send me in PM? I can check then these thing more easier. :slightly_smiling_face:

Hi, @Don, had a question. How do I change the sidebar colors for dark and light modes?

The background highlight color I want to change is listed at:


but I don’t see “highlight-background” in the GitHub repo. I know how to change it locally, but if I change it from var(--primary-low); to #000000;, for example, it effects both modes. How do I have a different color for each mode? Note: this also effects the bottom area here, which I also need different for each mode:

Also, is there a way to have the comment button on the main forums page take you directly to the comments instead of picking the original or most recent post?

Mine shows like this, not attached to the box border. How do I get mine like this?

Thank you!

Hey, @Don, did one of your recent updates to the theme break installing it? My export that I happened to have from yesterday uploads fine, but when I fork the most recent version and try to install a .zip of it or from the GH repository, I get a 500 Error.

In my Logs, I get:

Failed to process hijacked response correctly : ActiveRecord::RecordNotUnique : PG::UniqueViolation: ERROR: duplicate key value violates unique constraint “theme_field_unique_index”
DETAIL: Key (theme_id, target_id, type_id, name)=(50, 5, 1, common/fkb-c-alternative-voting-category) already exists.

Everytime I try to import the theme, the theme_id is going up by one, so it isn’t a theme_id issue at least…

Hello :wave:

Is this your fork?

It seems you created a stylesheets folder which duplicates the scss folder files. This cause the problem because the files duplicated and it tried to import from both folders. If you want to make changes on the style then please create a new theme component or change it in the scss folder or you can use stylesheets name too for folder, but not both. But it is better to keep scss as used by the main repo.

Hi, I’m unsure how this is happening. I have a “stylesheets” folder in every backup from when I backup the theme; I never created it myself. It looks like this and I’ve done a lot of changes to files in it.

You’re saying to delete it?

Yeah, this is because you export it from admin? I assume this folder contains your modification. I am not sure which version is this I made some changes in these days. But you can upload these files into the scss folder.

1 Like

Thanks! Would it be possible to move this around and remove the category name completely?

EDIT 6hrs later: Also, would your theme work properly if I combined all of the .scss files into one big file? I am trying to optimize my site as much as possible and some performance test sites say it has to load a lot of css & js files, mainly from the theme. It recommended cutting down on files and put stuff into one.

Conflicts with discourse-tab-bar-theme, it is recommended to add a custom button height