Custom Styling Guide

How to Customize Comment Widget Styles

You can customize the comment widget styling in two ways:

Option 1: Via customCSS Parameter

Pass your custom CSS as a string to the customCSS parameter when initializing the widget:

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

Option 2: Via Admin Dashboard

1. Go to the Widget Customization page in your admin dashboard
2. Scroll to the "Custom CSS" section under "Advanced"
3. Enter your custom CSS
4. Click "Save"

Your custom CSS will be applied to all comment widgets on your site.

Tips

• Use !important to override default styles if needed
• Target specific selectors to avoid affecting other parts of your site
• Test your CSS in different browsers for compatibility
• The widget uses standard CSS - no special preprocessors required

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.

Change the Border Color

Border Color

Copy

1

2:root {

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

4}

5

Change the Border Color While Typing

Border Color While Typing

Copy

1

2:root {

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

4}

5

Round All Four Corners

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

Round All Four Corners

Copy

1

2:root {

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

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

5}

6

Square Corners

Square Corners

Copy

1

2:root {

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

4}

5

Match Your Brand

Brand Colors and Corners

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

Different Colors in Dark Mode

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

Dark Mode Border Colors

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

Why Not Style the Text Area Directly?

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.