맞춤 스타일링 가이드

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

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

옵션 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를 사용합니다 - 별도의 전처리기가 필요하지 않습니다

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

Widget Customization page의 Custom CSS 상자에 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

네 모서리 모두 둥글게 만들기

기본적으로 왼쪽 위 모서리는 사각형입니다. 네 모서리를 모두 동일하게 둥글게 만들려면 두 radius 변수를 모두 설정하세요:

네 모서리 모두 둥글게

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

다크 모드 테두리 색상

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를 설정하면, 그 선들은 기본 스타일을 유지하여 테두리가 어울리지 않게 보입니다. 예를 들어 둥근 모서리를 가로지르는 사각형 선이 나타날 수 있습니다. 위의 변수들은 두 부분을 한 번에 변경합니다.