FKB Pro - Social theme

[dodesz (Don)]

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

FKB Pro

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. I did not tested it on every page. If you have see any issue please report.

User page

---

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.

---

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

---

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

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.

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

	Preview	Discourse 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

[Jagster (Jakke Lehtonen)]

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

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

[Pixlz]

I love it!

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

[Jagster (Jakke Lehtonen)]

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.

[dodesz (Don)]

Hello,

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

[Jagster (Jakke Lehtonen)]

That was fast.

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

[dodesz (Don)]

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

[Pixlz]

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

[dodesz (Don)]

Thanks I pushed a fix for this.

I’ve added two theme settings.

@Jagster

there is small layout issue with versatile banner

I will check this.

[Jagster (Jakke Lehtonen)]

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.

[dodesz (Don)]

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

[dodesz (Don)]

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

[dodesz (Don)]

@Jagster

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

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

Before

After

[tmn (Tran Nhat)]

very cool theme. pls ad more post for test.

[dodesz (Don)]

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

[png (Team PNG)]

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

[dodesz (Don)]

Hello,

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

FEATURE: Custom sidebar content for Visitor

[tmn (Tran Nhat)]

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/

[Jagster (Jakke Lehtonen)]

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

[Paracelsus]

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.