FKB Pro - Social theme

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

FKB Pro

:warning: 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.

Below you can see theme components and plugins fixes to work with this theme. This is a WIKI topic so I will add these patches to this post. These fixes we handle as a theme component so you can simple install it.


Layout

On desktop: Three column layout.


On mobile: This theme has got two layout on mobile. The default is boxed with the default padding on sides so the rounded corners is appear everywhere.

The other is full width, without padding. This can add some space on smaller screen mobile devices. On some pages we don’t use this, for example: private messages, badges etc… You can enable it with Theme Settings. :warning: I did not tested it on every page. If you have see any issue please report.

User page
Screenshot 2022-07-28 at 13.30.45 Screenshot 2022-07-28 at 13.31.36


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

  1. Left top: Author datas (avatar, name, username) and the date when the topic created.
    (click open user card)
  2. Right top: Category badge
  3. Center bottom: Tags
  4. Left bottom: Topic likes and views
    (click goes to OP and summarize topic if available)
  5. 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
    Screenshot 2022-07-28 at 13.20.14

  2. bar
    Screenshot 2022-07-28 at 13.17.04

  3. box
    Screenshot 2022-07-28 at 13.18.34


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.

Screenshot 2022-07-28 at 12.10.27

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.

Screenshot 2022-07-31 at 14.47.37

Screenshot 2022-07-31 at 14.44.05


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.

Screenshot 2022-07-28 at 12.58.34


On mobile: This section is appears under navigation section without user card background.

Screenshot 2022-07-28 at 12.24.58
Screenshot 2022-07-28 at 13.00.33


Color Schemes

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

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

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

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)

Fixes

Theme Components fixes

:hammer_and_wrench: Under development

Component Name
Theme Component COMPONENT_LINK
Repository REPOSITORY_LINK

Plugins fixes

Discourse Reactions
Plugin’s topic Discourse Reactions
Repository for the fix Discourse Reactions fix

Plugin Name
Plugin PLUGIN_LINK
Repository REPOSITORY_LINK

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

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

19 Likes

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

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

3 Likes

I love it!

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

1 Like

Another small one:

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

You know better how I hide those two :wink:

Verkkosieppaus_29-7-2022_15239_foorumi.katiska.eu

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.

3 Likes

Hello,

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

4 Likes

That was fast.

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

1 Like

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

2 Likes

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 :slightly_smiling_face: I pushed a fix for this.

I’ve added two theme settings.
Screenshot 2022-07-29 at 1.42.05

I will check this.

2 Likes

I must be pain in the tender places :rofl:

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.

2 Likes

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

1 Like

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

1 Like

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

Before

After

1 Like

very cool theme. pls ad more post for test.

1 Like

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

2 Likes

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

2 Likes

Hello,

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

Screenshot 2022-07-31 at 14.52.00

1 Like

thank for updated this theme.

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

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

I disagree :wink:

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…)

1 Like

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.
2 Likes