自訂樣式指南

如何自訂評論小工具樣式

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

選項 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 - 不需要特殊的前處理器

留言框周圍的邊框由文字區域自身的邊框加上小工具在其周圍繪製的幾條細線組成。若要更改其顏色或圓角，請設定這些 CSS 變數，而不是直接為 textarea 設定樣式。這些變數會一次重新設定邊框的每個部分，因此圓角和顏色始終保持一致。

將 CSS 新增至 Widget Customization 頁面 上的 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 class，因此您可以為深色模式設定不同的值：

深色模式的邊框顏色

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，那些線條將保持預設樣式，邊框看起來會不一致，例如一條方形線條穿過圓角。上述變數會同時更改兩者。