# FKB Pro - 社交主题

**URL:** <https://meta.discourse.org/t/fkb-pro-social-theme/234323>\
**Category:** Theme\
**Created:** [2022年七月28日 20:58 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323 "2022-07-28T20:58:41Z")\
**Posts on this page:** 20\
**Page:** 5

<div class="post-metadata">

**Author:** ![hoangphuctran93](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hoangphuctran93/32/290976_2.png) [@hoangphuctran93](https://meta.discourse.org/u/hoangphuctran93)\
**Post date:** [2023年二月15日 01:22 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/86 "2023-02-15T01:22:45Z")

</div>

您可以使用 CSS 配合纵横比。  
示例代码：[How To - Aspect Ratio / Height Equal to Width](https://www.w3schools.com/howto/howto_css_aspect_ratio.asp)  
您可以检查我的网站 [https://businesslab.vn](https://businesslab.vn)，纵横比为 16:10。

---

<div class="post-metadata">

**Author:** ![codergautam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codergautam/32/261083_2.png) [@codergautam](https://meta.discourse.org/u/codergautam)\
**Post date:** [2023年二月15日 13:50 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/87 "2023-02-15T13:50:55Z")

</div>

我该如何在 Discourse 中设置这个？例如，在哪里以及设置哪个 CSS？

* * *

另外，在设置 Google Ads 时存在这个小问题：

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/8/0/b8074cdf226f6d9e5fe6d24090f85e54365c9b84.png)

我认为侧边栏个人资料卡应该在广告下方，而不是直接覆盖在广告上方。

谢谢！

---

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2023年二月15日 18:19 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/88 "2023-02-15T18:19:25Z")

</div>

您好 @codergautam，

我已合并 Discourse Ad 插件 - Google AdSense 的修复程序。请更新主题。🙂

> [@codergautam](#):
>
> 有什么办法可以隐藏图片预览/使其变小吗？

您可以更改图片高度 🔽  
您需要为此创建一个新组件。🙂

1. 转到 `/admin/customize/themes/`  
自定义 → 主题

2. 点击 **Components** 选项卡，然后点击 **Install** 按钮  

3. 在弹出窗口中，点击 **Create new** 按钮并键入新组件名称。  

4. 点击 **Create** 按钮。

5. 组件已创建。现在选择 FKB Pro 主题以激活它。  

6. 点击 **Edit CSS/HTML** 按钮。  

7. 点击 **Common** 选项卡，并将以下代码粘贴到 **CSS** 部分。  
如果您想分别设置桌面和移动设备上的图片高度，请使用那些选项卡而不是 Common。Common 意味着此代码将在桌面和移动设备上都生效。

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

```

如果您想隐藏图片，请使用此 🔽

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

```

---

<div class="post-metadata">

**Author:** ![xiaokong23357](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xiaokong23357/32/321957_2.png) [@xiaokong23357](https://meta.discourse.org/u/xiaokong23357)\
**Post date:** [2023年三月17日 23:51 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/90 "2023-03-17T23:51:17Z")

</div>

希望修复与其他主题组件的不兼容问题

---

<div class="post-metadata">

**Author:** ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)\
**Post date:** [2023年三月19日 16:58 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/91 "2023-03-19T16:58:53Z")

</div>

如何使按钮等元素圆角？我想在当前主题中实现此功能。

---

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2023年三月19日 21:19 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/92 "2023-03-19T21:19:31Z")

</div>

你好 @danielabc，

有一些用于圆角效果的 #customization:theme-component。🙂

> [@Discourse 按钮样式](https://meta.discourse.org/t/discourse-button-styles/88154?u=dodesz):
>
> This theme component includes basic settings for changing button colors without writing CSS. [Github repo](https://github.com/awesomerobot/discourse-button-styles): https://github.com/awesomerobot/discourse-button-styles Installation: [Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) Preview: [Example of what you can style with the settings in this theme](https://theme-creator.discourse.org/theme/awesomerobot/button-styles) What the settings look like: 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): basic bu…

> [@图像、oneboxes、引用块等的圆角边框](https://meta.discourse.org/t/rounded-borders-for-images-oneboxes-blockquotes-more/232044?u=dodesz):
>
> 创建了一个非常简单的组件，用于更改主题中显示的图片、onebox、引用和管理员通知的边框。 允许更改以下设置： 设置图片圆角强度 设置图片边框宽度 设置图片边框颜色 设置 onebox 圆角强度 更改 onebox 边框宽度 更改 onebox 边框颜色 更改 onebox 背景颜色 设置引用圆角强度 移除引用的左边框 设置“管理员颜色”圆角强度 [主题缩略图](https://meta.discourse.org/t/topic-list-thumbnails-theme-component/150602) 支持： 列表圆角 网格圆角 占位符背景 占位符图标颜色 网格主题标题背景 浅色模式，10px 圆角，无边框 深色模式，10px 圆角，2px 边框 包括 onebox 支持 引用圆角（15px） 或移除引用的左边框： 圆角管理员颜色 支持 [主题缩略图](https://meta.discourse.org/t/topic-list-thumbnails-theme-component/150602) 列表视图 网格视图 ||| | — | — | — | |:sunglasses:|预览|上方截图 / [实时预览](https://discourse.theme-creator.io/theme/MarcP/rounded-borders)| |:link:|Github 仓库|[圆角图片边框](https://github.com/MarcRez33/discourse-round-image-borders)| |:hammer\_and\_wr…

* * *

你好 @xiaokong23357，你能具体说明一下你指的是哪个 #Customization > Theme component 吗？

---

<div class="post-metadata">

**Author:** ![xiaokong23357](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xiaokong23357/32/321957_2.png) [@xiaokong23357](https://meta.discourse.org/u/xiaokong23357)\
**Post date:** [2023年三月20日 02:37 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/93 "2023-03-20T02:37:39Z")

</div>

> [@Right Sidebar Blocks](https://meta.discourse.org/t/right-sidebar-blocks/231067/54):
>
> Can’t it be displayed on the category list, I installed it here and feel like I haven’t installed it

---

<div class="post-metadata">

**Author:** ![xiaokong23357](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xiaokong23357/32/321957_2.png) [@xiaokong23357](https://meta.discourse.org/u/xiaokong23357)\
**Post date:** [2023年三月26日 01:25 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/94 "2023-03-26T01:25:14Z")

</div>

@Don 如何将绑定的 HTML 元标记引入 FBK 主题？

希望问题能得到解决

---

<div class="post-metadata">

**Author:** ![xiaokong23357](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xiaokong23357/32/321957_2.png) [@xiaokong23357](https://meta.discourse.org/u/xiaokong23357)\
**Post date:** [2023年三月26日 05:34 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/95 "2023-03-26T05:34:06Z")

</div>

@Don 我不知道主题是否可以加载这些内容

 ![12f48b6523fe1e1949895f031dae77c8](https://global.discourse-cdn.com/meta/original/4X/1/7/8/178568db0a96a1c50c7d778a462ce6375fd7cd2f.jpeg)  
 ![f8d70e8ded042655f7ddee792c0d6ebd](https://global.discourse-cdn.com/meta/original/4X/1/2/9/129b9e3b0b1b89b4c2708b795241ac96cf8628b0.jpeg)  
布局格式建议：优化、简洁、紧凑、宽屏

---

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2023年三月26日 06:23 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/96 "2023-03-26T06:23:18Z")

</div>

您好，抱歉延迟了……是的，我认为可以用[右侧边栏块](https://meta.discourse.org/t/right-sidebar-blocks/231067)替换默认的右侧面板。我会检查一下。🙂

---

<div class="post-metadata">

**Author:** ![xiaokong23357](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xiaokong23357/32/321957_2.png) [@xiaokong23357](https://meta.discourse.org/u/xiaokong23357)\
**Post date:** [2023年三月26日 08:39 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/97 "2023-03-26T08:39:46Z")

</div>

还有一件事，@Don  
我的论坛使用了你的主题，现在我的论坛即将被添加到微软必应搜索引擎，但现在需要对论坛进行 HTML meta 标签检测，我该如何将这个 HTML meta 标签整合到主题中  
现在非常需要，非常感谢能解决它

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/1/d/51d71b022c4deb9c8ae06f2cda2902e923836771.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/9/6/09664cf49046facf91f6d20b622c6ec643d67a86.png)

---

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2023年三月26日 09:21 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/98 "2023-03-26T09:21:09Z")

</div>

在管理后台创建一个新的主题组件，就像我在上面介绍的那样。[FKB Pro - Social theme - #88 by Don](https://meta.discourse.org/t/fkb-pro-social-theme/234323/88?u=dodesz) 你可以随意更改组件名称，但不要将我粘贴到 `CSS` 选项卡中的 CSS 代码。将 Bing 的 `HTML Meta tag` 复制并粘贴到你创建的组件的 `HEAD` 选项卡中，然后保存。🙂

---

<div class="post-metadata">

**Author:** ![xiaokong23357](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xiaokong23357/32/321957_2.png) [@xiaokong23357](https://meta.discourse.org/u/xiaokong23357)\
**Post date:** [2023年三月26日 11:05 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/99 "2023-03-26T11:05:28Z")

</div>

> [@Don](#):
>
> 创建一个新的管理后台主题组件，就像我在上面介绍的那样。[FKB Pro - Social theme - #88 by dodesz](https://meta.discourse.org/t/fkb-pro-social-theme/234323/88) 你可以随意更改组件名称，但不要粘贴我粘贴到选项卡中的 CSS。将选项卡中的 Bing 复制并粘贴到你创建的组件中，然后保存。`CSS` `HTML Meta tag` `HEAD` 🙂

像这样吗？

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/f/b/2fbbb1e8ff1b88333a72353435d957932102b045.png)  
然后我配置自定义 HTML，之后我需要在验证码之前启用主题吗？

---

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2023年三月26日 11:22 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/100 "2023-03-26T11:22:43Z")

</div>

不，正如我所见，这是一个主题。您需要创建一个组件。另一个选项卡是，或者您可以使用页面底部的转换按钮将其转换为组件。只需按照我上面显示的说明操作即可。🙂

---

<div class="post-metadata">

**Author:** ![xiaokong23357](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xiaokong23357/32/321957_2.png) [@xiaokong23357](https://meta.discourse.org/u/xiaokong23357)\
**Post date:** [2023年三月26日 11:53 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/101 "2023-03-26T11:53:22Z")

</div>

非常感谢，问题已解决！  
@Don

---

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2023年三月26日 14:09 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/102 "2023-03-26T14:09:19Z")

</div>

我已合并一项更新以添加：[Compatibility with Right Sidebar Blocks theme component by VaperinaDEV · Pull Request #18 · VaperinaDEV/fkb-pro-theme · GitHub](https://github.com/VaperinaDEV/fkb-pro-theme/pull/18)

它包含一个设置：`启用右侧边栏块`。它将为“右侧边栏块”主题组件添加一些支持，并将用它替换默认的右侧边栏（fkb 面板）。

---

<div class="post-metadata">

**Author:** ![xiaokong23357](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xiaokong23357/32/321957_2.png) [@xiaokong23357](https://meta.discourse.org/u/xiaokong23357)\
**Post date:** [2023年三月31日 02:21 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/103 "2023-03-31T02:21:08Z")

</div>

我有一个想法，侧边栏可以由您以这种风格制作，并合并到主题文件中，需要的人可以在主题设置中打开相应的功能 @Don

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/2/e/42e4f29c9cd776c42f03e620d9a6e441a7768b0d.jpeg)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/2/6/1/2618f04791eb30cfea2b0883c24c98af7d024f8d.jpeg)

---

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2023年四月2日 09:28 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/104 "2023-04-02T09:28:02Z")

</div>

你好，

是的，我认为通过修改样式可以实现这一点，如果你指的是标题与内容分开，并且这个侧边栏似乎不是固定的。

试试看。 🙂

创建一个新的主题组件，如下所示：[FKB Pro - Social theme - #88 by Don](https://meta.discourse.org/t/fkb-pro-social-theme/234323/88?u=dodesz%EF%BC%8C%E6%88%96%E8%80%85%E5%B0%86%E5%85%B6%E6%B7%BB%E5%8A%A0%E5%88%B0%E7%8E%B0%E6%9C%89%E7%BB%84%E4%BB%B6%E4%B8%AD%E3%80%82)

桌面 / CSS

```scss
.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);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)\
**Post date:** [2023年四月14日 15:37 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/105 "2023-04-14T15:37:15Z")

</div>

请注意：`/login` 和 `/signup` 这两个链接都会出现旋转的圆圈，而不是打开模态框。iPad 上所有内容都是最新的。

---

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2023年四月14日 15:49 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/106 "2023-04-14T15:49:49Z")

</div>

嘿 Jakke 🙂 我刚在你的网站上检查了，模态框在 `/login` 和 `/signup` 上对我来说显示正常。

[上一頁](https://meta.discourse.org/t/fkb-pro-social-theme/234323.md?page=4)

[下一頁](https://meta.discourse.org/t/fkb-pro-social-theme/234323.md?page=6)