FKB Pro - Social theme

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

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!

1 Like

Hello @codergautam,

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

You can change the image height :arrow_down_small:

You need to create a new component for this. :slightly_smiling_face:

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

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

Hope to fix incompatibilities with other theme components

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

1 Like

Hi @mecay,

There are some theme-component for rounding stuffs. :slightly_smiling_face:


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

2 Likes