FKB Pro - Social theme

[hoangphuctran93 (Hoàng Phúc Trần)]

You can use css with Aspect ratio
Example code: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
You can check my site https://businesslab.vn with ratio 16:10

[codergautam (gautam)]

How I can set this in the Discourse? Like where and which css do I set?

---

Also, there is this minor issue when setting Google Ads:

I assume the sidebar profile card should be below the ad, not right on top of it.

Thanks!

[Don]

Hello @codergautam,

I have merged a fix for Discourse Ad plugin - Google Adsense. Please update the theme.

@codergautam

Any way to hide the image preview / make it smaller?

You can change the image height

You need to create a new component for this.

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.
   

   

4. Click Create button.

5. The component created. Now select FKB Pro theme to activate it.
   

6. Click the Edit CSS/HTML button.
   

7. Click the Common tab and paste the below code to the CSS section.
   

   

If you want to set the image height separately on desktop and mobile, use those tabs instead of Common. Common means this code will be active on desktop and mobile too.

.topic-list {
  .main-link {
    .link-middle-line {
      .topic-image {
        height: 280px; // Default 300px
      }
    }
  }
}

If you want to hide the image, use this

.topic-list {
  .main-link {
    .link-middle-line {
      .topic-image {
        display: none;
      }
    }
  }
}

[xiaokong23357 (Ms.sw)]

Hope to fix incompatibilities with other theme components

[danielabc (Daniela)]

How do you just round the buttons and stuff? I just wanted to do this in my current theme

[Don]

Hi @danielabc,

There are some theme-component for rounding stuffs.

Discourse Button Styles

This theme component includes basic settings for changing button colors without writing CSS. Github repo: https://github.com/awesomerobot/discourse-button-styles Installation: How do I install a Theme or Theme Component? Preview: Example of what you can style with the settings in this theme [25%20AM] What the settings look like: [37%20AM] There are 6 button sets that can be styled in this component, along with a global style for adding rounded corners to all buttons (border-radius): b…

Rounded Borders for images, oneboxes, blockquotes & more

Created a very simple component to change the borders of images, oneboxes, blockquotes and staff notices shown in topics. Allows change of the following settings set image rounding intensity set image border width set image border color set onebox rounding intensity change onebox border width change onebox border color change onebox background color set rounding blockquotes intensity remove left border from blockquotes set ‘staff color’ rounding intensity topic thumbnail support for: list r…

---

Hello @xiaokong23357, can you clarify which theme-component do you mean?

[xiaokong23357 (Ms.sw)]

Right Sidebar Blocks

Can’t it be displayed on the category list, I installed it here and feel like I haven’t installed it

[xiaokong23357 (Ms.sw)]

@Don How do I introduce the binding HTML meta tag into an FBK theme?

Hope it will be solved

[xiaokong23357 (Ms.sw)]

@Don I mean, I don’t know if the theme can load these things

Format layout recommendation: Optimized, simple, compact, and wide

[Don]

Hello, sorry for the delay… Yeah I think it’s possible to replace the default right panel with Right Sidebar Blocks. I will check this.

[xiaokong23357 (Ms.sw)]

One more thing ， @Don
My forum uses your theme, now my forum is going to be ready to be added to the Microsoft Bing search engine, but now it needs to do HTML meta tag detection for the forum, how do I do to incorporate this HTML meta tag into the theme
It is very needed now, and I am very grateful for being able to solve it

[Don]

Create a new theme component in admin like this I introduced above. FKB Pro - Social theme - #88 by dodesz you can change the component name whatever but don’t paste the css I pasted to CSS tab. Copy and Paste the Bing HTML Meta tag into the HEAD tab to the component you created and save it.

[xiaokong23357 (Ms.sw)]

@Don

Create a new theme component in admin like this I introduced above. FKB Pro - Social theme - #88 by dodesz you can change the component name whatever but don’t paste the css I pasted to tab. Copy and Paste the Bing into the tab to the component you created and save it. CSS HTML Meta tag HEAD

Like this?

Then I configure the custom html and then I need to enable the theme before captcha？

[Don]

Nope, as I see this is a theme. You need to create a component. Which is the other tab or you can convert this to a component with the convert button which is on the bottom of the page. Just follow the instructions I show above.

[xiaokong23357 (Ms.sw)]

Thank you very much, problem solved!
@Don

[Don]

I’ve merged an update to add: Compatibility with Right Sidebar Blocks theme component by VaperinaDEV · Pull Request #18 · VaperinaDEV/fkb-pro-theme · GitHub

It contains a setting: right sidebar blocks enabled. It will adds some support for the Right Sidebar Blocks theme component and will replaces the default right sidebar (fkb panel) with it.

[xiaokong23357 (Ms.sw)]

I have an idea that the sidebar can be made by you in this style and merged into a theme file, and people who need it can turn on the corresponding feature in the theme settings @Don

[Don]

Hello,

Yes I think this is possible with modify the style if you mean the title is separate from content and it seems this sidebar is not sticky.

Try something like this.

Create a new theme component like this FKB Pro - Social theme - #88 by dodesz or add it to an existing one.

Desktop / CSS

.full-width .tc-right-sidebar {
  position: relative;
  top: unset;
  padding: 0;
  background: none;
  box-shadow: none;
  overflow-y: unset;
  .rs-component {
    h3 {
      border-bottom: none;
      padding-bottom: 0;
    }
    > div {
      background: var(--secondary);
      padding: 1em;
      border-radius: var(--d-default-border-radius);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
  }
}

[Jagster (Jakke Lehtonen)]

FYI: both /login and /signup as links gives spinning circle, not opening the modal. iPad on latest everything.

[Don]

Hey Jakke I just checked this on your site with and the modals shows up correctly for me on /login and /signup.