Notifilix alert'in stillendirmesini değiştirmek
Notiflix alert'i yeni keşfettim. güzel ve benim anlayacağım şekilde temiz çalışıyor
ancak görüntüsü sanki biraz eski duruyor. direk css'e müdahale etmek istiyorum. ama yeniyim kodlamada. bilen varsa ve yardımcı olursa çok müteşekkir olurum. teşekkürler.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (3)
Bende Notiflix kullanıyorum. Zaten kendi içerisinde stillendirmeye olanak sağlıyor. Sadece init ederken bunları belirtmen lazım.
Aşağıda benim örnek kullandığım stillendirmeyi paylaşıyorum. Bu confirm için geçerli. Hepsi için uygulayabiliyorsun.
https://notiflix.github.io/documentation daha detaylısı burada var.
Notiflix.Confirm.init({
className: 'notiflix-confirm',
width: '300px',
zindex: 4003,
position: 'center',
distance: '10px',
backgroundColor: '#f8f8f8',
borderRadius: '0.3rem',
backOverlay: true,
backOverlayColor: 'rgba(0,0,0,0.5)',
rtl: false,
fontFamily: 'Quicksand',
cssAnimation: true,
cssAnimationDuration: 300,
cssAnimationStyle: 'fade',
plainText: true,
titleColor: '#04c9a6',
titleFontSize: '16px',
titleMaxLength: 34,
messageColor: '#1e1e1e',
messageFontSize: '14px',
messageMaxLength: 110,
buttonsFontSize: '15px',
buttonsMaxLength: 34,
okButtonColor: '#f8f8f8',
okButtonBackground: '#04c9a6',
});
hali hazirda gelen classlari ezebilirsin,
incele yaptiginds style vermek istedigin elemanin classini al
kendin bir css yaz eger degisiklik olmazsa yazdigin propertyinin sonuna !important koyabilirsin
Yazıyla anlatmak zor. Bir yol sunayım:
- Öncelikle css dosyası projenin içinde olmalı.
- Düzeltmek istediğin alan sağ tık > Inspect dedikten sonra stillerini görebiliyorsun.
- Bu stiller üzerinde istediğin bir değişiklik yaptın. Tarayıcıda gözüne hoş görünür hale getirdin.
- Bu düzelttiğin stilin sağ üst tarafında stil dosyasının adı yazıyor. Ona basıyorsun.
- Sources sekmesinde ilgili stil dosyası tarayıcının gördüğü haliye açılıyor. Az önce yaptığın değişiklikler de burada. Bu dosyanın içindeki her şeyi kopyala ve sendeki asıl dosyaya yapıştır.
- Böyle adım adım göre göre değişikliklerini yapabilirsin.