FKB Pro - Social theme

(post deleted by author)

You have to create a new theme component where you can add the modifications you want like this :arrow_down_small:

Ok, I got the code shown, but when we enter the default theme, we can reach the css code part from there, there is no that option in your theme, where can I get it?

I believe Don already answered this question when you asked it previously in the post you deleted. To make changes in addition to the theme, you would need to create a theme component and attach it to your theme(s). There are more detailed instructions in the post Don linked above.

This doesn’t appear to be a question regarding this specific theme though. For more general questions you should use the other topic you created. :+1:


Hello, but I want to find the header part of the theme, not to install components.

How do I get to the header of this theme?


You can’t edit directly a remote theme since Restrict editing of remote themes.

Instead of editing it directly you can create a new component what you can attach to the theme.

I assume you want to add an icon to the header signup button.

Follow these steps to achieve it:

  1. Go to /admin/customize/themes/
    Customize → Themes

  2. Click the Components tab and then the Install button

  3. On the popup window click Create new button and type the new component name.
    Screenshot 2023-04-17 at 8.53.07

  4. Click Create button.

  5. The component created. Now select FKB Pro theme to activate it.
    Screenshot 2023-02-15 at 19.04.28

  6. Click the Edit CSS/HTML button.
    Screenshot 2023-02-15 at 19.05.17

  7. Click the Header tab and paste the below code to that section.

<script type="text/discourse-plugin" version="0.8.13">
api.reopenWidget("header-buttons", {
      tagName: "span.header-buttons",

  html(attrs) {
    if (this.currentUser) {

    const buttons = [];

    if (attrs.canSignUp && !attrs.topic) {
        this.attach("button", {
          label: "sign_up",
          className: "btn-primary btn-small sign-up-button",
          action: "showCreateAccount",
          icon: "user"

      this.attach("button", {
        label: "log_in",
        className: "btn-primary btn-small login-button",
        action: "showLogin",
        icon: "user"
    return buttons;
  1. Click Save

Ok, now I understand, it’s very detailed, thank you very much.

1 Like

Hi friends,
is the default theme better than the TKP Pro theme, which do you think is more convenient in terms of seo? I am currently using the default theme.??

1 Like

Matter of taste.

On my forum FKB Pro is default for users, but I’m using more simplifier theme, because I don’t need that much look.

For SEO there is no matter at all.


Hey @Diyorki,

Definitely, the default theme is better. Just think about default theme like a skeleton. You can customize it. So these themes mostly just add a skin to the default theme. If you want to your site looks like different or have other functions too you need a theme or theme-component. These themes mostly not changes any core feature which can cause seo damage. Hovewer it is possible to cause this kind of issue with simple css styling too but if you notice this kind of issue we can fix it. :slightly_smiling_face:

When you activate a theme and something wrong with it you can always switch back to the default theme. You can use themes as separate optional theme next to the default theme. So users can select from different themes but the site default theme is still be the default (light). :slightly_smiling_face:


I didn’t think you would reply so fast :grin: that’s why I love you

This is my website please let me know if you see any mistakes or errors :slightly_smiling_face:


Hello, Diyor ki :slight_smile:

You’re not using the FKB Pro theme, so your request might be quite off-topic here. :slight_smile:

1 Like

Sorry :pensive: Birdaha olmaz…

Hello, I think this code is for the input in the header section.

My site is only for members, when the guest enters, it redirects to the login section, I need the code for that, how should we add it, thank you.



Yeah the previous one is for the header signup button. :slightly_smiling_face: I think in this case the easiest way is to override the core template to add icon. We can do it with plugin outlet too but I think on this page it doesn’t really matter because if we use plugin outlet then we have to create new buttons and hide the default buttons section.

You can delete the previous version component what you created because that is not relevant and won’t solve your problem.

I made a simple theme component what you can install. I added some settings where you can change these buttons icons (Sign Up and Log In).


Thank you very much, good work, I congratulate you, I wish you success :+1:

1 Like

Hey dom, thank you very much, it’s working smoothly, good luck to you.

I have one more question, users want to turn off the theme option, how can I turn it off, choosing a theme in the settings is turned off, but the user chooses themes in her profile, how can I turn this option off.

1 Like

Ok, I found it, sorry for bothering you, thank you very much for everything.

There is a shift in the usernames for your information, the username is a little above

1 Like

@Don How do I pull in different logos for the theme? For example… a mobile logo?

EDIT: I forgot to add… this is an awesome theme… thank you!


You would have to export theme & download or download it from github.

Your better to use a component to augment the theme vs forking the theme. As with forking you would need to keep it upto date yourself if any changes cause breakage.

Just make a component called something like Fakebook extension snd put your mod/overrides.