自定义样式指南

如何自定义评论小部件样式

您可以通过两种方式自定义评论小部件的样式：

选项 1：通过 customCSS 参数

在初始化小部件时，将自定义 CSS 作为字符串传递给 customCSS 参数：

window.fcConfigs = [{
    target: '#fastcomments-widget',
    tenantId: 'your-tenant-id',
    customCSS: `
        .fast-comments .comment {
            background-color: #f0f0f0 !important;
            border-radius: 8px !important;
        }
    `
}];

选项 2：通过管理仪表板

1. 在管理仪表板中转到 小部件自定义页面
2. 向下滚动到 "Advanced" 下的 "Custom CSS" 部分
3. 输入您的自定义 CSS
4. 点击 "Save"

您的自定义 CSS 将应用到您网站上的所有评论小部件。

提示

• 如有需要，使用 !important 覆盖默认样式
• 针对特定选择器，以免影响站点的其他部分
• 在不同浏览器中测试您的 CSS 以确保兼容性
• 该小部件使用标准 CSS —— 不需要特殊的预处理器

评论框周围的边框由文本区域自身的边框加上小组件在其周围绘制的几条细线组成。要更改其颜色或圆角，请设置这些 CSS 变量，而不是直接对 textarea 进行样式设置。这些变量会同时重新设置边框的每个部分，因此圆角和颜色始终保持一致。

将 CSS 添加到小组件自定义页面上的 Custom CSS 框中，或通过 customCSS 选项传入。您只需设置想要更改的变量。

您还可以使用 Custom CSS 框正下方的 Comment box border 辅助工具，它会为您自动生成这些 CSS。

更改边框颜色

边框颜色

Copy

1

2:root {

3 --fc-input-border-color: #d1d5db;

4}

5

输入时更改边框颜色

输入时的边框颜色

Copy

1

2:root {

3 --fc-input-border-color-focus: #2563eb;

4}

5

将四个角全部设为圆角

默认情况下左上角是方形的。将两个圆角变量都设置相同的值即可将四个角全部设为圆角：

将四个角全部设为圆角

Copy

1

2:root {

3 --fc-input-border-radius: 12px;

4 --fc-input-border-start-start-radius: 12px;

5}

6

方形边角

方形边角

Copy

1

2:root {

3 --fc-input-border-radius: 0;

4}

5

匹配您的品牌

品牌颜色和边角

Copy

1

2:root {

3 --fc-input-border-color: #c7d2fe;

4 --fc-input-border-color-focus: #4f46e5;

5 --fc-input-border-radius: 8px;

6 --fc-input-border-start-start-radius: 8px;

7}

8

深色模式下的不同颜色

当小组件处于深色模式时，它会带有 dark 类，因此您可以为深色模式设置不同的值：

深色模式边框颜色

Copy

1

2:root {

3 --fc-input-border-color: #d1d5db;

4}

5.dark {

6 --fc-input-border-color: #444;

7 --fc-input-border-color-focus: #aaa;

8}

9

为什么不直接对文本区域进行样式设置？

小组件会在文本区域周围自行绘制评论框边框的一部分。如果您只在 textarea 上设置 border-color 或 border-radius，这些线条将保持默认样式，边框看起来会不协调，例如一条方形线条穿过圆角。上述变量会同时更改两者。