FKB Pro - Social theme

Hello,

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) {
      return;
    }

    const buttons = [];

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

    buttons.push(
      this.attach("button", {
        label: "log_in",
        className: "btn-primary btn-small login-button",
        action: "showLogin",
        icon: "user"
      })
    );
    
    return buttons;
  }
});
</script>
  1. Click Save
5 Likes