自定义样式指南

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

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

选项 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 —— 不需要特殊的预处理器

The border around the comment box is made of the text area's own border plus a few thin lines the widget draws around it. To change its color or corner roundness, set these CSS variables instead of styling the textarea directly. The variables restyle every part of the border at once, so the corners and colors always line up.

Add the CSS to the 自定义 CSS box on the Widget Customization page, or pass it with the customCSS option. You only need to set the variables you want to change.

You can also use the Comment box border helper right under the Custom CSS box, which writes this CSS for you.

更改边框颜色

边框颜色

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

圆化四个角

By default the top-left corner is square. Set both radius variables to round all four corners the same:

圆化四个角

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

暗模式下的不同颜色

When the widget is in dark mode it has the dark class, so you can set different values for dark mode:

暗模式边框颜色

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

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

The widget draws part of the comment box border itself, around the text area. If you set border-color or border-radius only on the textarea, those lines keep the default style and the border looks mismatched, for example a square line running through a rounded corner. The variables above change both at once.