FKB Pro - Social theme

FKB Pro is a highly modified, detailed, professional social theme, but still user-friendly.

This theme is quite sensitive and maybe not well compatible with other theme components or plugins you use! Please test it before use. These usually need some css modification. If you have any issue please report and will fix it.

Layout

On desktop: Three column layout.

Sidebar ready

On mobile:

Rounded corners

FKB Pro has highly rounded corners everywhere by default, but I know not everyone likes it so I added some Theme Settings to make it easier to customize it.

If you don’t like rounded corners… set these value to 0.

Topic Card

Main sections

1. Title (click goes to the last post)
2. Excerpt (click goes to the OP)
3. Image (click goes to the last post)

Other sections

4. Left top: Author datas (avatar, name, username) and the date when the topic created.
   (click open user card)
5. Right top: Category badge
6. Center bottom: Tags
7. Left bottom: Topic likes and views
   (click goes to OP and summarize topic if available)
8. Right bottom: Last poster avatar, date and replies count.
   (click avatar open user card, date go to last post and replies count open reply selection)

Badges style

1. bullet
   

2. bar
   

3. box
   

Category Page

Because of the limited size on center please use, one column category page styles. I made some customization on these to fit more to this theme.

Categories Only, Categories and Latest Topics, Categories and Top Topics

Categories Boxes

OR

You can use the Modern Category + Group Boxes theme component created by @jordan.vidrine

FKB Panel

On desktop: The right sidebar.

For anon visitors it is show a Welcome message. This message is same as js.signup_cta.value_prop. The header Welcome text you can change in Theme Translation.

OR

For anon visitors there is an option to enable a custom sidebar. You can add custom content to the sidebar like image and description.

For logged in users it is contains the user informations such as profile picture, statistics, badges and also use the user card image to background. Also contains some quick buttons on bottom.

Color Schemes

The theme contains two color schemes FKB Pro - Light and FKB Pro - Dark.

There are some custom color schemes too which you can change on settings.

More about the latest updates

and here

There are so many other customizations what I didn’t mention.

Credit Huge thanks to @awesomerobot to created Fakebook theme and @jordan.vidrine to created Fakebook Modern theme.

	Preview	Theme Creator
	Repository	FKB Pro theme
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

With iPad it is quite… wide. I mean, really wide

That is because of there is no sidebar, I guess. Any ideas why?

I love it!

My only suggestion is to make the hamburger menu wider and then add padding

Another small one:

• my forum doesn’t use solved-plugin
• we don’t use badges

You know better how I hide those two

Otherwise… this theme looks really promising on desktops and mobiles (tablets are little bit problematic)

BTW — there is small layout issue with versatile banner. It pushes content below it a little bit too much to left.

Hello,

I pushed a fix to tablet view. Please update the theme.

That was fast.

Much better, thanks. I got a new default theme…

Thanks Yep, I think this is default. The first item is in focus when you open menu.

Yeah, I was just sugesting that there’s a bit of space inbetween them, besides that the theme looks good for how much I hate facebook and meta haha

Thanks I pushed a fix for this.

I’ve added two theme settings.

I will check this.

I must be pain in the tender places

There is one issue. Not for me, but for my top 5 contributers it is matter of life and dead — well, that was perhaps too much but they really want this.

Category settings:

It normally shows something like this (on iPad, but you understand what I’m meaning)

Your layout breaks if there is a description or name of category is longer than few characters:

Disabling show subcategory list above… solves out this, of course.

But I’m moving toward using only top-level categories and heavily relying on tags anyway (and then your theme is actually quite suitable in many ways) — so if fixing that would take a little bit too much work and/or you have something more important to do, I’m totally ok if you work with this later.

Hello, I’ve added a fix for Discourse Reactions.
You can install it as a theme component.

Thanks for the report @Jagster. I have pushed a fix for this issue. FIX: Topic list category layout by VaperinaDEV · Pull Request #3 · VaperinaDEV/fkb-pro-theme · GitHub

Hello, I have pushed a fix for this. Thanks Please update the theme.

Before

After

very cool theme. pls ad more post for test.

Thanks I updated the OP with the theme creator preview link so now you can try it on Discourse Theme Creator too.

Awesome theme! If I can figure out a way to get a freaking domain and an email server ill def use this theme.

Hello,

I’ve added a new feature Now you can add custom sidebar content for visitors.

thank for updated this theme.

It would be so great if you develope this theme like blog (forget facebook theme )

suggestion from https://www.newsbreak.com/

I disagree

Blogish needs are different than trying to offer more SoMe-style for those who thinks Faceboom/insta/etc are the best possible UX/UI-experience.

So — out there could be a theme that looks a bit more like blog (what ever that now is meaning…). But this is just fine as it is now.

(WordPress is much more superior as blog-platform than Discourse; those are two totally different tools for different purposes…)

Hi, great theme!

The theme preview in our forum doesn’t show with 3 columns, only a one-column layout. I suspect some css problem, but still trying to figure it out.

2 questions:

• Is it possible to have fixed width columns upon a minimum screen width (or several, using for instance media css rules) on desktop-mode? The flexible width gives me a bit of headaches in very large monitors (24 or 27’') and the “dead space” between the three columns is a bit awkward
• Is the theme compatible with the component for right side blocks Right Sidebar Blocks - theme-component - Discourse Meta? If so, it makes the right column more useful/feature rich.

Hi @Paracelsus, Thanks for the feedback. I merged a fix Fix: main-outlet width on larger screen by VaperinaDEV · Pull Request #7 · VaperinaDEV/fkb-pro-theme · GitHub

Can I check this somehow?

I’ll take a look at it.

Just tried installing it on my site and it looks really small.

Yeah, I’ll fix it soon.

Thanks for the fix, it’s better now.
I’ll try to get you an url where you can see the one-column issue.

Hello, I merged some fixes:

Just search around Meta and found this forum. This is what I looking for.

Ah I see This is looks like Fakebook, a theme for social media lovers I think you looking for that.

Hi @Don. Thank so much for your theme.

Still having some issues.

Congratulations @Don , I am very very happy with your theme. It is beautiful and elegant and the site has also increased the scores in core web vitals and google speed insights
Thank you so much for everything, I really admire your work in the discourse community
greetings from Brazil

Thank you @darkpixlz! I will update the theme to work with sidebar.

@Tiago_santos, I am really glad you like it Thank you so much!

hi @Don
how to fix this bug (field credit card number black) discourse subscription

Thanks. I’ve pushed a fix for this…please update the theme.

perfect, it’s beautiful, thank a lot

Hello @Don
i am following this post for discourse plugin ads (house ads)

apparently the ads plugin is not compatible with fakebook pro (bugs)

In the mobile version, the image is off the screen (large)

in the fakepro theme it cannot differentiate which image is mobile and which image is desktop

can you please check it

Hi Tiago,

Can you please clarify it a little bit? Some screenshots, your actual code and where is your advert appear would be very helpful. Thank you

Hi, so sorry

The image is bigger in the mobile version
in the default theme it works normally

My code (house ads)

<a href="https://cursos.growthafiliados.com.br" class="banner-ad" target="_blank">
    <img class="desktop" src="https://growthafiliados.com.br/uploads/default/original/2X/3/33bcb1003b66be344648d3ba84d1e05f8bf36c75.png" style="display: block; margin-left: auto; margin-right: auto;width: auto;">
    
</a>

Mobile

even if I switch desktop to mobile in the code above, the problem remains

Desktop (it´s ok)

Hello,

Yeah, I think because you have to use some css also to make it responsive.

Something like this should work:

<a href="https://cursos.growthafiliados.com.br" class="banner-ad" target="_blank">
  <img class="banner-img" src="https://growthafiliados.com.br/uploads/default/original/2X/3/33bcb1003b66be344648d3ba84d1e05f8bf36c75.png"> 
</a>

Common / CSS

.house-creative.house-post-bottom {
  max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + (12px * 2));
  margin: 8px 0 8px auto;
  .mobile-view & {
    max-width: 100%;
    .banner-ad {
      .banner-img {
        max-width: 100%;
      }
    }
  }
}

Very great. thank a lot
it’s working perfectly.
Once again, thank you very much for your attention. Your discourse theme is the best

This is already known issue, I’m sure, but I’ll push it up anyway: the new sidebar shows only empty space.

I realize FKB Pro shows quite many things that can be found from the sidebar, and location will raise some conflicts, but then the hamburger icon should be hidden.

Hi. Thanks for great job.

We installed FKB Pro theme by default in our self-hosted Discourse about a month ago, configured it, and everything was OK. Yesterday we installed Discourse telegram-auth plugin. Discourse container was rebuilt from the fresh Discourse official sources and updated to 2.9.0.beta10 version. After it we have a big empty space in the right part of the wide screen. Here’s the screenshot: https://www.lubezniy.ru/screens/34a13ea1a87622d4158d85d15d8e9d65372832.png
Can you say, what and where can we do (check, change, report or something other) to fix it? Thank you.

Hello Victor,

Thank you for the report

Here is the fix: Connectors not rendering - #6 by david

It will working after you update your site to the latest version Discourse.

Greatest thanks, Don. After upgrading, problem was solved.

@Don Hi first thanks for the theme. I use your theme and there are some problems I have.

1. The label pages look corrupt. There is a shift in the page layout.

2. For those who use tablets, the left Sidebar is not lost.

I would be glad if you help with these problems

Hello, Can you share some screenshot about the issues? Thanks

Little update:

We had a conversation privately and successfully fixed the issues.

The first issue has been fixed via FIX: Modify tag page template to fit to the theme by VaperinaDEV · Pull Request #12 · VaperinaDEV/fkb-pro-theme · GitHub

The second issue was related with google adsense. The ads has fixed size width which cause the issue.

Adding width: 100% to ads in a new component Desktop / CSS seems to fix it.

@Don Thanks for your help

Hi @Don,
Any plans to support RTL out of the box?
i installed this once, and did some CSS work, it does not look pretty when you switch to RTL languages.

Still seems to be a bit broken with the sidebar enabled.
Enabled:

Also some issues are present with the new profile buttons.

@Don Hi, I am having the same problem. If you could help with this situation, I would greatly appreciate it.