מדריך לעיצוב מותאם אישית

כיצד להתאים את סגנונות ווידג'ט התגובות

ניתן להתאים את עיצוב ווידג'ט התגובות בשתי דרכים:

אפשרות 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 מיוחדים

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.