Özel Stil Rehberi

Yorum Widget Stillerini Nasıl Özelleştirebilirsiniz

Yorum widget stilini iki şekilde özelleştirebilirsiniz:

Seçenek 1: customCSS Parametresi ile

Widget'ı başlatırken özel CSS'inizi customCSS parametresine bir dize olarak iletin:

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

Seçenek 2: Yönetici Paneli Üzerinden

1. Yönetici panelinizdeki Widget Özelleştirme sayfasına gidin
2. "Gelişmiş" altındaki "Özel CSS" bölümüne gidin
3. Özel CSS'inizi girin
4. "Kaydet"e tıklayın

Özel CSS'iniz sitenizdeki tüm yorum widget'larına uygulanacaktır.

İpuçları

• !important gerektiğinde varsayılan stillerin üzerine yazmak için kullanın
• Diğer site bölümlerini etkilememek için belirli seçicileri hedefleyin
• Uyumluluk için CSS'inizi farklı tarayıcılarda test edin
• Widget standart CSS kullanır - özel bir ön işlemci gerekmez

Yorum kutusunun etrafındaki kenarlık, metin alanının kendi kenarlığından ve widget'ın etrafına çizdiği birkaç ince çizgiden oluşur. Rengini veya köşe yuvarlaklığını değiştirmek için textarea öğesini doğrudan stillendirmek yerine bu CSS değişkenlerini ayarlayın. Değişkenler kenarlığın her bölümünü aynı anda yeniden stillendirir, böylece köşeler ve renkler her zaman uyumlu olur.

CSS'i Widget Özelleştirme sayfasındaki Custom CSS kutusuna ekleyin veya customCSS seçeneğiyle iletin. Yalnızca değiştirmek istediğiniz değişkenleri ayarlamanız yeterlidir.

Ayrıca Custom CSS kutusunun hemen altındaki Comment box border yardımcısını da kullanabilirsiniz; bu yardımcı bu CSS'i sizin için yazar.

Kenarlık Rengini Değiştirme

Kenarlık Rengi

Copy

1

2:root {

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

4}

5

Yazarken Kenarlık Rengini Değiştirme

Yazarken Kenarlık Rengi

Copy

1

2:root {

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

4}

5

Dört Köşeyi de Yuvarlatma

Varsayılan olarak sol üst köşe karedir. Dört köşeyi de aynı şekilde yuvarlatmak için her iki yarıçap değişkenini ayarlayın:

Dört Köşeyi de Yuvarlatma

Copy

1

2:root {

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

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

5}

6

Kare Köşeler

Kare Köşeler

Copy

1

2:root {

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

4}

5

Markanıza Uygun Hale Getirme

Marka Renkleri ve Köşeler

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

Karanlık Modda Farklı Renkler

Widget karanlık moddayken dark sınıfına sahiptir, bu nedenle karanlık mod için farklı değerler ayarlayabilirsiniz:

Karanlık Mod Kenarlık Renkleri

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

Metin Alanı Neden Doğrudan Stillendirilmez?

Widget, yorum kutusu kenarlığının bir kısmını metin alanının etrafında kendisi çizer. border-color veya border-radius özelliklerini yalnızca textarea üzerinde ayarlarsanız, bu çizgiler varsayılan stilde kalır ve kenarlık uyumsuz görünür; örneğin yuvarlatılmış bir köşeden geçen kare bir çizgi gibi. Yukarıdaki değişkenler her ikisini de aynı anda değiştirir.