# 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:** 2

<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: [2022年八月1日 12:59 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/22 "2022-08-01T12:59:04Z")

</div>

> [@Paracelsus](#):
>
> 在桌面模式下，是否可以在最小屏幕宽度（或使用媒体 CSS 规则等设置的多个屏幕宽度）下拥有固定宽度的列？在非常大的显示器（24 或 27 英寸）上，灵活的宽度让我有些头疼，三个列之间的“空白区域”有点尴尬。

嗨 @Paracelsus，感谢您的反馈。 🙂 我合并了一个修复程序 [Fix: main-outlet width on larger screen by VaperinaDEV · Pull Request #7 · VaperinaDEV/fkb-pro-theme · GitHub](https://github.com/VaperinaDEV/fkb-pro-theme/pull/7)

> [@Paracelsus](#):
>
> 我们的论坛中的主题预览没有显示 3 列，只有一个列布局。我怀疑是 CSS 问题，但仍在尝试弄清楚。

我能以某种方式检查一下吗？

> [@Paracelsus](#):
>
> 该主题是否与右侧块组件兼容 [Right Sidebar Blocks - theme-component - Discourse Meta](https://meta.discourse.org/t/right-sidebar-blocks/231067)？如果是，它将使右侧列更有用/功能更丰富。

我会看看的。 🙂

---

<div class="post-metadata">

### Author: ![tmn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tmn/32/267788_2.png) [@tmn](https://meta.discourse.org/u/tmn)
#### Post date: [2022年八月1日 14:35 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/23 "2022-08-01T14:35:20Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/4X/c/3/f/c3f9ba3c3f9bf1cbf2607ed4258ac4721e8bba1a.jpeg)  
一些建议。

---

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [2022年八月2日 00:10 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/24 "2022-08-02T00:10:06Z")

</div>

我刚在我的网站上试着安装它，它看起来_非常_小。

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/0/9/f09e4410e08fe5918d12cc30a229d11b5ade654c.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: [2022年八月2日 06:52 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/25 "2022-08-02T06:52:09Z")

</div>

好的，我很快就会修复它。

---

<div class="post-metadata">

### Author: ![Paracelsus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paracelsus/32/164912_2.png) [@Paracelsus](https://meta.discourse.org/u/Paracelsus)
#### Post date: [2022年八月2日 08:50 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/26 "2022-08-02T08:50:18Z")

</div>

> [@Don](#):
>
> > [@Paracelsus](#):
> >
> > 在桌面模式下，是否可以在最小屏幕宽度（或使用媒体 CSS 规则等多个屏幕宽度）时拥有固定宽度的列？在 24 或 27 英寸的大显示器上，弹性宽度让我有点头疼，三个列之间的“空白区域”有点尴尬。
> 
> 你好 @Paracelsus，感谢你的反馈。 🙂 我合并了一个修复程序 [Fix: main-outlet width on larger screen by VaperinaDEV · Pull Request #7 · VaperinaDEV/fkb-pro-theme · GitHub](https://github.com/VaperinaDEV/fkb-pro-theme/pull/7)
> 
> > [@Paracelsus](#):
> >
> > 我们论坛上的主题预览没有显示 3 列，只有一个列布局。我怀疑是 CSS 问题，但仍在尝试找出原因。
> 
> 我能以某种方式检查一下吗？
> 
> > [@Paracelsus](#):
> >
> > 该主题是否与右侧区块的组件 [Right Sidebar Blocks - theme-component - Discourse Meta](https://meta.discourse.org/t/right-sidebar-blocks/231067) 兼容？如果是，它将使右侧列更有用/功能更丰富。
> 
> 我会看看的。 🙂

感谢修复，现在好多了。 👍  
我会尝试给你一个链接，你可以在其中看到单列问题。

---

<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: [2022年八月2日 11:57 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/27 "2022-08-02T11:57:43Z")

</div>

您好，我合并了一些修复：

> <https://github.com/VaperinaDEV/fkb-pro-theme/commit/0cd38c1e1d1ed2784632aa9c4edb51eafd00a76b>
>
> Take 2: Fix layout issues for larger screens

> <https://github.com/VaperinaDEV/fkb-pro-theme/commit/3f009b8dc303ab3a64fb1541ba273381536b29ec>

---

<div class="post-metadata">

### Author: ![tmn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tmn/32/267788_2.png) [@tmn](https://meta.discourse.org/u/tmn)
#### Post date: [2022年八月3日 10:25 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/28 "2022-08-03T10:25:18Z")

</div>

我在 Meta 上搜索了一下，找到了这个论坛。这正是我想要的。  
[https://community.bettercentury.org/](https://community.bettercentury.org/)

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/9/9/e99c7fda59ee7600d9e25629a591d92cb86b1a64.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: [2022年八月3日 10:34 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/29 "2022-08-03T10:34:12Z")

</div>

啊，我明白了 🙂 这看起来像是 [Fakebook，一个为社交媒体爱好者设计的主题](https://meta.discourse.org/t/fakebook-a-theme-for-social-media-lovers/109079)，我想你找的就是这个。🙂

---

<div class="post-metadata">

### Author: ![tmn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tmn/32/267788_2.png) [@tmn](https://meta.discourse.org/u/tmn)
#### Post date: [2022年八月3日 10:36 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/30 "2022-08-03T10:36:06Z")

</div>

嗨 @Don。非常感谢你的主题。😍

---

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [2022年九月23日 22:10 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/31 "2022-09-23T22:10:29Z")

</div>

仍有一些问题。

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/6/3/563927b03fe1da3c50c017dfdd7d22c217352b4b.jpeg)

---

<div class="post-metadata">

### Author: ![Tiago\_santos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tiago_santos/32/249753_2.png) [@Tiago\_santos](https://meta.discourse.org/u/Tiago_santos)
#### Post date: [2022年九月26日 14:05 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/32 "2022-09-26T14:05:01Z")

</div>

恭喜 @Don，我对您的主题非常非常满意。它美观典雅，网站在核心网页指标和 Google 速度分析中的得分也有所提高。  
非常感谢您所做的一切，我真的很钦佩您在 discourse 社区中的工作。  
来自巴西的问候

---

<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: [2022年九月26日 17:31 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/33 "2022-09-26T17:31:11Z")

</div>

> [@darkpixlz](#):
>
> 仍然存在一些问题。
> 
> ![image](https://global.discourse-cdn.com/meta/original/4X/5/6/3/563927b03fe1da3c50c017dfdd7d22c217352b4b.jpeg)

谢谢 @darkpixlz！ 我将更新主题以兼容侧边栏。 🙂

* * *

@Tiago_santos，我很高兴你喜欢它 🙂 非常感谢！ ❤

---

<div class="post-metadata">

### Author: ![Tiago\_santos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tiago_santos/32/249753_2.png) [@Tiago\_santos](https://meta.discourse.org/u/Tiago_santos)
#### Post date: [2022年九月26日 23:00 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/34 "2022-09-26T23:00:51Z")

</div>

你好 @Don  
如何修复此错误（信用卡号字段黑色）discourse 订阅

 ![Captura de tela 2022-09-26 195821](https://global.discourse-cdn.com/meta/original/4X/e/8/4/e840ceb62344a78dc493ad0cf4c6c8b5da6257bc.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: [2022年九月27日 00:05 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/35 "2022-09-27T00:05:07Z")

</div>

好的。我已经[推送了一个修复程序](https://github.com/VaperinaDEV/fkb-pro-theme/commit/8b042be57867361c53f7b94f16baa498ef8ac4ab)…请更新主题。 🙂

---

<div class="post-metadata">

### Author: ![Tiago\_santos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tiago_santos/32/249753_2.png) [@Tiago\_santos](https://meta.discourse.org/u/Tiago_santos)
#### Post date: [2022年九月27日 00:32 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/36 "2022-09-27T00:32:10Z")

</div>

太棒了，很漂亮，非常感谢。

---

<div class="post-metadata">

### Author: ![Tiago\_santos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tiago_santos/32/249753_2.png) [@Tiago\_santos](https://meta.discourse.org/u/Tiago_santos)
#### Post date: [2022年十月5日 19:50 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/39 "2022-10-05T19:50:16Z")

</div>

你好 @Don  
我正在关注此帖子，了解 discourse 插件广告（内部广告）

> [@\[PAID\] Make House Ads Responsive](https://meta.discourse.org/t/paid-make-house-ads-responsive/127537/3):
>
> If you read House ads post, they give you the way to set a desktop picture and a mobile one. \<a href="" class="banner-ad" target="\_blank"\> \<img class="desktop" src=""\> \<img class="mobile" src=""\> \</a\> Just set the images for each (Less width for phones and more width for desktop) and thats it! I personally use this dimensions: Mobile: 1282x311 Desktop 755x90 Then create a component and add this CSS: $cta-background-color: #FE4644; $cta-text-color: #FFFFFF; .banner-ad { displa…

显然，广告插件与 fakebook pro 不兼容（存在 bug）

在移动版本中，图片超出了屏幕（尺寸过大）

在 fakepro 主题中，无法区分哪个图片是移动版，哪个图片是桌面版

你能帮忙检查一下吗？

---

<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: [2022年十月6日 03:26 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/40 "2022-10-06T03:26:26Z")

</div>

您好 Tiago，

您能再解释一下吗？ 如果能提供一些截图、您的实际代码以及您的广告出现的位置，将非常有帮助。 谢谢 🙂

---

<div class="post-metadata">

### Author: ![Tiago\_santos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tiago_santos/32/249753_2.png) [@Tiago\_santos](https://meta.discourse.org/u/Tiago_santos)
#### Post date: [2022年十月6日 14:01 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/41 "2022-10-06T14:01:24Z")

</div>

您好，非常抱歉

图片在移动版本上更大  
在默认主题中，它工作正常

## 我的代码（联盟广告）

```plaintext

<a href="https://cursos.growthafiliados.com.br" class="banner-ad" target="_blank">

<img class="desktop" src="https://growthafiliados.com.br/uploads/default/original/2X/3/33bcb1003b66be344648d3ba84d1e05f8bf36c75.png" style="display: block; margin-left: auto; margin-right: auto;width: auto;">

</a>

```

## 移动版

 ![WhatsApp Image 2022-10-06 at 10.56.20](https://global.discourse-cdn.com/meta/original/4X/7/0/4/70434c0678d7aa915a84836c319ef7fec4a47646.jpeg)

**即使我在上面的代码中将桌面切换到移动版，问题仍然存在**

## 桌面版（没问题）

 ![Captura de tela 2022-10-06 105652](https://global.discourse-cdn.com/meta/original/4X/f/a/b/fab03ebdffa7fb997b292adeeb07ec089eab8bfd.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: [2022年十月6日 14:44 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/42 "2022-10-06T14:44:01Z")

</div>

你好，

是的，我认为你还需要使用一些 CSS 来使其响应式。🙂

类似这样的代码应该可以工作：

```xml
<a href="https://cursos.growthafiliados.com.br" class="banner-ad" target="_blank">
  <img class="banner-img" src="https://growthafiliados.com.br/uploads/default/original/2X/3/33bcb1003b66be344648d3ba84d1e05f8bf36c75.png">
</a>

```

通用 / CSS

```scss
.house-creative.house-post-bottom {
  max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + (12px * 2));
  margin: 8px 0 8px auto;
  .mobile-view & {
    max-width: 100%;
    .banner-ad {
      .banner-img {
        max-width: 100%;
      }
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![Tiago\_santos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tiago_santos/32/249753_2.png) [@Tiago\_santos](https://meta.discourse.org/u/Tiago_santos)
#### Post date: [2022年十月6日 15:08 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/43 "2022-10-06T15:08:15Z")

</div>

非常好。非常感谢  
它运行完美。  
再次感谢您的关注。您的 Discourse 主题是最好的

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

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