맞춤 스타일링 가이드

댓글 위젯 스타일 사용자 지정 방법

댓글 위젯 스타일은 다음 두 가지 방법으로 사용자 지정할 수 있습니다:

옵션 1: customCSS 매개변수 사용

위젯을 초기화할 때 customCSS 매개변수에 사용자 정의 CSS를 문자열로 전달하세요:

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.

댓글 상자 주변의 테두리는 텍스트 영역 자체의 테두리와 위젯이 그 주위에 그리는 몇 개의 얇은 선으로 구성됩니다. 색상이나 모서리 둥글기를 변경하려면 textarea를 직접 스타일링하는 대신 이러한 CSS 변수를 설정하세요. 이 변수들은 테두리의 모든 부분을 한 번에 다시 스타일링하므로 모서리와 색상이 항상 일치합니다.

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.

CSS를 Custom CSS 상자에 추가하거나, customCSS 옵션으로 전달하세요. 변경하고 싶은 변수만 설정하면 됩니다.

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

또한 Custom CSS 상자 바로 아래에 있는 Comment box border 도우미를 사용하면 이 CSS를 자동으로 작성해 줍니다.

Change the Border Color

테두리 색상

Copy

1

2:root {

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

4}

5

Change the 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:

기본적으로 좌상단 모서리는 사각형입니다. 두 반경 변수를 모두 설정하여 네 모서리를 동일하게 둥글게 만들 수 있습니다.

네 모서리 모두 둥글게

Copy

1

2:root {

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

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

5}

6

Square Corners

사각형 모서리

Copy

1

2:root {

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

4}

5

Match Your Brand

브랜드 색상 및 모서리

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 클래스가 적용되므로 다크 모드용으로 다른 값을 설정할 수 있습니다.

다크 모드 테두리 색상

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.

위젯은 텍스트 영역 주위에 댓글 상자 테두리의 일부를 직접 그립니다. textarea에만 border-color나 border-radius를 설정하면 해당 선들은 기본 스타일을 유지해 테두리가 맞지 않게 보입니다. 예를 들어 둥근 모서리를 가로지르는 사각형 선이 나타날 수 있습니다. 위의 변수들은 두 가지를 한 번에 변경합니다.