Stil Özelleştirme

Widget görünümü iki katmanda belirlenir: marka teması tüm yüzeylerin ortak görünümünü verir, widget stil ayarları bu widget'a özel farkları tanımlar.

Katman sırası

1. Marka teması        → tüm yüzeyler için ortak renk, köşe, yazı tipi
2. Widget stil ayarları → bu widget'a özel geçersiz kılma
3. Custom CSS          → son söz

Çoğu durumda 1. katman yeterlidir. Her widget'ı ayrı ayrı renklendirmek, marka renginizi değiştirdiğinizde hepsini tek tek güncellemek anlamına gelir.

Stil bölümleri

Widget tipine göre şu bölümler görünür:

Bölüm	İçindekiler
Colors	Arka plan, metin, buton renkleri
Layout	Genişlik, hizalama, iç boşluk
Size & Shape	Boyut ve köşe yuvarlaklığı
Typography	Yazı tipi, boyut, kalınlık
Effects	Gölge, animasyon
Close Button	Kapatma düğmesinin görünümü ve varlığı
Overlay	Modal arkasındaki karartma
Image	Görsel boyutu ve hizalaması
Position	Kenar boşlukları

Bir bölüm görünmüyorsa o widget tipi için anlamlı değildir — örneğin duyuru çubuğunda Overlay yoktur.

Marka temasını miras almak

Bir renk alanını boş bırakırsanız widget marka temasındaki karşılığını kullanır. Renk seçtiğinizde bağ kopar: marka renginizi sonradan değiştirseniz bu widget değişmez.

Pratik kural: rengi yalnızca bilerek farklı olmasını istediğinizde belirtin.

Custom CSS

Her widget'ın kendi CSS alanı vardır. Marka değişkenlerini burada da okuyabilirsiniz:

.selwise-widget-title {
  font-family: var(--selwise-font-heading, var(--selwise-font, inherit));
  color: var(--selwise-text, #111);
}

Değişkenlerin tam listesi: Marka Teması.

Mobil

Stil ayarları mobil ve masaüstünde aynıdır; ayrı bir mobil stil seti yoktur. Mobilde farklı bir görünüm gerekiyorsa custom CSS içinde medya sorgusu kullanın:

@media (max-width: 640px) {
  .selwise-widget { padding: 12px; font-size: 14px; }
}

Önizleme

Editörün sağındaki önizleme, widget'ın gerçek render koduyla çalışır. Ancak sitenizin kendi CSS'i önizlemede yoktur — sitenizde farklı görünüyorsa sebebi genellikle sitenizin stillerinin widget'a sızmasıdır.