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

<div class="post-metadata">

**Author:** ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)\
**Post date:** [2024年二月2日 07:36 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/295 "2024-02-02T07:36:35Z")

</div>

我也决定在你讨论的时候试试。

我安装了 fbk 作为主题。我还按照说明设置了配色方案，但不知何故，当我按下触发器时，配色方案没有改变。

会不会是默认设置了深色方案的问题？

---

<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:** [2024年二月2日 07:41 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/296 "2024-02-02T07:41:37Z")

</div>

您能检查一下这些设置是否设置正确吗？

> [@Automatic Dark Mode color scheme switching](https://meta.discourse.org/t/automatic-dark-mode-color-scheme-switching/161593?u=don):
>
> You can now set up your Discourse site to automatically switch color schemes when the user’s device is in dark mode. For a quick preview, head over to the [try.discourse.org](http://try.discourse.org) instance and toggle your device’s dark mode on and off to see this new feature in action. (This feature not enabled on meta.) Enabling automatic dark mode To enable this feature on your instance, you can pick the dark mode color scheme in your site settings: Once that setting is set, you can reload your site with …

还有

> [@Dark/Light Mode Toggle](https://meta.discourse.org/t/dark-light-mode-toggle/215585?u=don):
>
> discourse2Summary Dark/Light Mode Toggle adds a clickable toggle color scheme button in the hamburger menu. The toggle switches between a light or dark color scheme for one theme.hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-color-scheme-toggle](https://github.com/discourse/discourse-color-scheme-toggle)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features This component allows a dark/light mode toggle icon on your Discourse forum. It…

如果在用户界面设置中将深色和浅色（默认）配色方案设置为相同的调色板，它将不会改变。

---

<div class="post-metadata">

**Author:** ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)\
**Post date:** [2024年二月2日 07:47 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/297 "2024-02-02T07:47:54Z")

</div>

只有 2 种配色方案可用

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/8/2/882e14e7263f7e474da7b08e2a0abe35da3c0151.png)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/0/5/7/05780d9d62d8111a23370b9a92b58435d430f175.png)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/1/3/f/13f7bbc6538b424c1c43615d586fab37c9d506f9.png)

已设置深色主题

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

自动深色模式已关闭

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/7/6/f76f025004f0732053648ccf75480f33a6aa32e3.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:** [2024年二月2日 08:03 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/298 "2024-02-02T08:03:44Z")

</div>

我认为问题在于，在 FKB Pro 主题页面上， **颜色方案** 对于您的设置是 **FKB - Dark** ，而 `default dark mode color scheme id` 也是 **FKB - Dark** 。这样一来，当您单击按钮时，它将切换到相同的颜色方案。请尝试将 FKB Pro 主题页面上的 **颜色方案** 更改为 **FKB - Light** 。

---

<div class="post-metadata">

**Author:** ![Harrison\_Jhonson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/harrison_jhonson/32/258721_2.png) [@Harrison\_Jhonson](https://meta.discourse.org/u/Harrison_Jhonson)\
**Post date:** [2024年二月2日 08:31 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/299 "2024-02-02T08:31:42Z")

</div>

默认暗模式配色方案 ID - 在 **FKB** -light 上更改，切换时无效  
 ![image](https://global.discourse-cdn.com/meta/original/4X/6/9/1/69178848f5c493e0230052ee96f5c0102835c4e9.png) ![image](https://global.discourse-cdn.com/meta/original/4X/d/8/9/d891b0dd10c26cb5263dbe1ae0e2253599093d9a.png)

---

<div class="post-metadata">

**Author:** ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)\
**Post date:** [2024年二月2日 08:40 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/300 "2024-02-02T08:40:29Z")

</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:** [2024年二月2日 08:47 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/301 "2024-02-02T08:47:34Z")

</div>

这也取决于您的个人偏好。您可以在此处找到它 [preferences/interface](https://meta.discourse.org/my/preferences/interface)。更改 **Color Scheme** 部分。

它对匿名用户有效，因为网站设置使  
默认配色方案：FKB - 浅色  
深色配色方案：FKB - 深色

但我认为它被您的个人设置覆盖了。

---

<div class="post-metadata">

**Author:** ![Harrison\_Jhonson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/harrison_jhonson/32/258721_2.png) [@Harrison\_Jhonson](https://meta.discourse.org/u/Harrison_Jhonson)\
**Post date:** [2024年二月2日 08:59 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/302 "2024-02-02T08:59:03Z")

</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:** [2024年二月2日 09:14 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/303 "2024-02-02T09:14:08Z")

</div>

在 FKB Pro 主题页面将 **颜色方案** 更改为 **FKB - Dark** ，并将 `default dark mode color scheme id` 设置为 **FKB - Light** ，技术上是可行的。但不建议这样做。当用户切换到暗黑模式时，它会使用 FKB - Light 方案，这不太用户友好。所以我不认为这是一个好主意。侧边栏切换也将反向工作。

如果您确实想这样做，那么禁用自动颜色方案更改的网站设置会稍微好一些。这样暗/亮颜色方案更改将不会自动工作。但用户可以在他们的 [偏好设置/界面](https://meta.discourse.org/my/preferences/interface) 页面上选择首选颜色方案。

---

<div class="post-metadata">

**Author:** ![Harrison\_Jhonson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/harrison_jhonson/32/258721_2.png) [@Harrison\_Jhonson](https://meta.discourse.org/u/Harrison_Jhonson)\
**Post date:** [2024年二月2日 09:20 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/304 "2024-02-02T09:20:19Z")

</div>

啊。我有很多用户不想注册并阅读指南。可惜的是，无法通过面板上的一个按钮将配色方案从深色（默认）更改为次要白色。

---

<div class="post-metadata">

**Author:** ![restivulmu](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@restivulmu](https://meta.discourse.org/u/restivulmu)\
**Post date:** [2024年二月18日 02:03 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/305 "2024-02-18T02:03:23Z")

</div>

您好，我正在使用此主题和“Topic Ratings Plugin”插件。我已经完成了所有更新。

评分星出现在任何主题标题页面上。

但在主页上，我看到的是帖子的评分星的 [object Object] 而不是评分星。

我该如何解决这个问题？

\*注意：问题发生在更新后（Discourse 和 Topic Ratings Plugin）。

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/6/e/a6e8c4cdaeaf45bfec84f705575d9872d26f3d66.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:** [2024年二月18日 06:07 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/306 "2024-02-18T06:07:40Z")

</div>

你好 @restivulmu 👋

请尝试切换到其他主题，例如默认主题。该主题只有一个关于主题评分的小 CSS 片段，这不会导致此类问题。你是否也更新了你的 Discourse 版本？

---

<div class="post-metadata">

**Author:** ![restivulmu](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@restivulmu](https://meta.discourse.org/u/restivulmu)\
**Post date:** [2024年二月18日 10:50 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/307 "2024-02-18T10:50:15Z")

</div>

谢谢。当我切换到不同的主题时，问题仍然存在。然后主题没有问题。

一切都是最新版本，我不知道问题的根源。

---

<div class="post-metadata">

**Author:** ![harithwick](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/harithwick/32/346693_2.png) [@harithwick](https://meta.discourse.org/u/harithwick)\
**Post date:** [2024年二月22日 00:06 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/308 "2024-02-22T00:06:01Z")

</div>

很棒的主题！

---

<div class="post-metadata">

**Author:** ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)\
**Post date:** [2024年二月22日 16:32 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/309 "2024-02-22T16:32:54Z")

</div>

@Don 你好！这个组件可以兼容吗？

> [@Topic Cards](https://meta.discourse.org/t/discourse-topic-cards/296048):
>
> discourse2Summary Topic Cards restyle the topic list to display as cards with a thumbnaileyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-cards)hammer_and_wrenchRepository [https://github.com/discourse/discourse-topic-cards](https://github.com/discourse/discourse-topic-cards)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component information_source This theme component may cause conflicts with other customisations to the topic list Features This component …

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/a/3/8a30ce051999d125551659a939d7fe2c971bbd4e.jpeg)

---

<div class="post-metadata">

**Author:** ![45thj5ej](https://avatars.discourse-cdn.com/v4/letter/4/34f0e0/32.png) [@45thj5ej](https://meta.discourse.org/u/45thj5ej)\
**Post date:** [2024年三月29日 06:21 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/311 "2024-03-29T06:21:27Z")

</div>

你好。如何将底部区域与红线对齐？

 ![mmmmm](https://global.discourse-cdn.com/meta/original/4X/4/9/6/49609194449a4047a44b1e6574b516a86ed47dc2.png)

它与上面的主题/帖子区域没有对齐，这让我很抓狂，哈哈。  
另外，@Don，如何将顶部的这个标签向右移动？我尝试过修改CSS但没弄明白。我不喜欢它覆盖了部分主题。

 ![ggggg](https://global.discourse-cdn.com/meta/original/4X/7/0/6/706ec7d9dda652ec68c75bcd66d94ba9d76cc053.png)

---

<div class="post-metadata">

**Author:** ![45thj5ej](https://avatars.discourse-cdn.com/v4/letter/4/34f0e0/32.png) [@45thj5ej](https://meta.discourse.org/u/45thj5ej)\
**Post date:** [2024年三月29日 16:43 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/312 "2024-03-29T16:43:19Z")

</div>

如果有人对“低垂”的字母（例如字母“g”）被截断感到恼火，如下图所示，解决方法是：  
转到 `fkb-c-topic-list.scss` 文件，并将第 123 行（至少默认情况下）从  
`line-height: var(--line-height-small);`  
更改为  
`line-height: 1.1rem;`。这样显示正常，不会被截断。

 ![cccc](https://global.discourse-cdn.com/meta/original/4X/8/7/5/8753c907cc0c162471ec2fe49d531cca6776ac04.png)

---

<div class="post-metadata">

**Author:** ![45thj5ej](https://avatars.discourse-cdn.com/v4/letter/4/34f0e0/32.png) [@45thj5ej](https://meta.discourse.org/u/45thj5ej)\
**Post date:** [2024年三月30日 02:22 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/313 "2024-03-30T02:22:56Z")

</div>

在我上面的两条回复之外，@Don，是否有可能为垂直图片和水平图片的图片背景使用混合主题？

例如：如果发布了垂直图片，我希望它能像这样完全显示，这样图片就不会被裁剪，并且有模糊效果。

 ![ddddd](https://global.discourse-cdn.com/meta/original/4X/2/9/3/29320fcc0b7c49bfe8bf51917ea025727aea297b.jpeg)

然后，如果发布了水平图片，我希望它能占据整个空间而无需模糊，如下所示：

 ![bbbb](https://global.discourse-cdn.com/meta/original/4X/5/c/2/5c2b9e441846739b4e692998cae425c738a3c33a.png)

如果能实现这一点那就太好了，这和 Facebook 的实际做法一样。

---

<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:** [2024年三月30日 15:34 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/314 "2024-03-30T15:34:55Z")

</div>

> [@Festinger](#):
>
> 我想知道是否可以将主页替换为主题列表而不是卡片？

你好 @Festinger 👋 谢谢！你的意思是使用默认的主题列表模板吗？ 我还不确定，但我会试试的。如果有效，那么[这个](https://meta.discourse.org/t/fkb-pro-social-theme/234323/309?u=don)也应该有效。

* * *

> [@45thj5ej](#):
>
> 我怎样才能将底部区域移动到与红线对齐？
> 
> ![mmmmm](https://global.discourse-cdn.com/meta/original/4X/4/9/6/49609194449a4047a44b1e6574b516a86ed47dc2.png)
> 
> 它与上面的主题/帖子部分没有对齐，这让我的强迫症快要发作了，哈哈。

你好 @45thj5ej 👋 实际上，它与主题头像 + 主题正文的宽度是完美对齐的 😃

但如果你愿意，也可以更改它 🔽

桌面 CSS

```scss
.topic-area > .loading-container,
.topic-above-footer-buttons-outlet.presence,
#topic-footer-buttons,
.more-topics__container {
    width: var(--wo-avatar-width); // 不含头像宽度
    margin-left: calc(60px + 1em); // 头像宽度 + 头像与正文之间的距离
  }
}

```

> [@45thj5ej](#):
>
> 我尝试过修改 CSS，但没弄明白。我不喜欢它覆盖了部分主题。

是的，这个元素比较棘手，因为它有固定位置。我认为我们无法很好地移动它，因为在不同尺寸的屏幕上，侧边距离总会不同。

> [@45thj5ej](#):
>
> 如果有人对“低垂”的字母（例如字母“g”）被截断感到恼火

谢谢，我已经增加了行高。

> [@45thj5ej](#):
>
> 是否可以混合使用主题图像背景，以适应垂直和水平图像？

不行，目前使用此主题无法实现。

---

<div class="post-metadata">

**Author:** ![45thj5ej](https://avatars.discourse-cdn.com/v4/letter/4/34f0e0/32.png) [@45thj5ej](https://meta.discourse.org/u/45thj5ej)\
**Post date:** [2024年三月30日 15:42 UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/315 "2024-03-30T15:42:08Z")

</div>

> [@Don](#):
>
> 不，使用此主题目前无法实现。

但是否可以通过 CSS/其他方式实现？😄

**编辑：忽略以下所有** 内容。问题出在 Discourse Topic List Author 组件。  
另外，有人知道这个条形图怎么了吗？我昨晚刷新了页面，它随机变成了这样，我找不到如何修复它。不过在手机上看起来还是正常的。条形图现在非常宽，当你点击它时，文本颜色与（浅色和深色模式下的）颜色相同，并且内容不再完全在框内。

 ![ffff](https://global.discourse-cdn.com/meta/original/4X/f/2/2/f22e7099492acb7df042f42c286af2697c018a04.png)  
我已经将我的主题的 CSS 与[你在这里的 CSS](https://github.com/search?q=repo%3AVaperinaDEV%2Ffkb-pro-theme%20topic-list-header%26type=code) 进行了比较，针对 `topic-list-header`，它们是相同的，所以我不知道是什么原因造成的。

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

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