Οδηγός Προσαρμοσμένου Στυλ

Πώς να προσαρμόσετε τα στυλ του widget σχολίων

Μπορείτε να προσαρμόσετε το στυλ του widget σχολίων με δύο τρόπους:

Επιλογή 1: Μέσω της παραμέτρου customCSS

Περάστε το προσαρμοσμένο CSS ως συμβολοσειρά στην παράμετρο customCSS κατά την αρχικοποίηση του widget:

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

Επιλογή 2: Μέσω του Πίνακα Διαχείρισης

1. Μεταβείτε στη Σελίδα Προσαρμογής Widget στον πίνακα διαχείρισης
2. Κάντε κύλιση στην ενότητα "Προσαρμοσμένο CSS" κάτω από "Για προχωρημένους"
3. Εισάγετε το προσαρμοσμένο CSS σας
4. Κάντε κλικ στο "Αποθήκευση"

Το προσαρμοσμένο CSS σας θα εφαρμόζεται σε όλα τα widgets σχολίων στον ιστότοπό σας.

Συμβουλές

• Χρησιμοποιήστε !important για να παρακάμψετε τα προεπιλεγμένα στυλ, αν χρειάζεται
• Στοχεύστε συγκεκριμένους selectors για να αποφύγετε την επίδραση σε άλλα μέρη του ιστότοπού σας
• Δοκιμάστε το CSS σας σε διαφορετικούς περιηγητές για συμβατότητα
• Το widget χρησιμοποιεί κανονικό CSS - δεν απαιτούνται ειδικοί προεπεξεργαστές

Το περίγραμμα γύρω από το κουτί σχολίων αποτελείται από το δικό του περίγραμμα της περιοχής κειμένου συν μερικές λεπτές γραμμές που σχεδιάζει το widget γύρω του. Για να αλλάξετε το χρώμα ή την στρογγυλότητα των γωνιών, ορίστε αυτές τις μεταβλητές CSS αντί να στυλιζάτε άμεσα το textarea. Οι μεταβλητές επαναστυλιζούν όλο το περίγραμμα ταυτόχρονα, ώστε οι γωνίες και τα χρώματα να ταιριάζουν πάντα.

Προσθέστε το CSS στο πεδίο Custom CSS στη Widget Customization page, ή περάστε το με την επιλογή customCSS. Χρειάζεται μόνο να ορίσετε τις μεταβλητές που θέλετε να αλλάξετε.

Μπορείτε επίσης να χρησιμοποιήσετε τον βοηθό Comment box border ακριβώς κάτω από το πεδίο Custom CSS, ο οποίος δημιουργεί αυτόματα αυτό το 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

Ταιριάξτε το Brand Σας

Χρώματα 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

Διαφορετικά Χρώματα σε Dark Mode

Όταν το widget βρίσκεται σε dark mode έχει την κλάση dark, οπότε μπορείτε να ορίσετε διαφορετικές τιμές για dark mode:

Χρώματα Περιγράμματος σε 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

Γιατί να Μην Στυλιζάτε Άμεσα το Text Area;

Το widget σχεδιάζει μέρος του περιγράμματος του κουτιού σχολίων γύρω από την περιοχή κειμένου. Αν ορίσετε border-color ή border-radius μόνο στο textarea, αυτές οι γραμμές διατηρούν το προεπιλεγμένο στυλ και το περίγραμμα φαίνεται ασύμφωνο, π.χ. μια τετράγωνη γραμμή που διασχίζει μια στρογγυλεμένη γωνία. Οι παραπάνω μεταβλητές αλλάζουν και τα δύο ταυτόχρονα.