自訂樣式指南

如何自訂評論小工具樣式

您可以透過兩種方式自訂評論小工具的樣式：

選項 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. 捲動到「進階」中的「自訂 CSS」區段
3. 輸入您的自訂 CSS
4. 點選「儲存」

您輸入的自訂 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 Custom 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.