Özel CSS Ekleme
nuvinode temaları, görsel düzenleyici aracılığıyla kapsamlı özelleştirme olanağı sunsa da, bazen belirli öğeler üzerinde daha ayrıntılı kontrol sağlamanız gerekebilir. Özel CSS, stil ayarlarını geçersiz kılmanıza, öğeleri gizlemenize veya tema ayarlarında bulunmayan görsel efektler eklemenize olanak tanır.
Özel CSS'yi Nereye Ekleyebilirsiniz?
Özel CSS'yi tema özelleştirme panelinden ekleyebilirsiniz:
- Ayarlar > Temalar > Özelleştir seçeneğine gidin.
- Sayfanın altındaki "Özel CSS" bölümüne kaydırın.
- Kod düzenleyicisine CSS'inizi girin.
- "Kaydet"i tıklayın — değişiklikler canlı mağaza sayfanıza anında yansıtılır.
Alternatif olarak, AI asistanını kullanabilirsiniz: "Mobil cihazlarda ekmek kırıntılarını gizlemek için özel CSS ekle".
Güvenlik Kısıtlamaları
Güvenlik nedenleriyle nuvinode, kötü amaçlı kodları önlemek için özel CSS'yi temizler:
- JavaScript kullanılamaz —
expression(),url(javascript:)ve olay işleyicileri kaldırılır. - Harici içe aktarmalar yasaktır —
@importharici URL'lere atıfta bulunan kurallar engellenir. - position: fixed kaplamaları yasaktır — Görünüm alanının tamamını kaplayan kaplamalar oluşturamazsınız.
- Standart CSS özellikleri —
color,font-size,margin,display,gridveflexgibi tüm standart CSS özellikleri tam olarak desteklenir.
Yaygın Örnekler
İşte sıkça talep edilen özel CSS kod parçacıkları:
Duyuru Çubuğunu Gizle
.announcement-bar {
display: none !important;
}
Başlık Yazı Tipini Değiştir
h1, h2, h3 {
font-family: 'Georgia', serif !important;
letter-spacing: -0.02em;
}
Ürün Resimlerini Yuvarlaklaştırma
.product-card img {
border-radius: 12px;
}
Mobil Gezinme Boyutunu Ayarlama
@media (max-width: 768px) {
.mobile-nav a {
font-size: 18px;
padding: 12px 16px;
}
}
İpuçları ve En İyi Uygulamalar
- Doğru CSS sınıf adlarını bulmak için tarayıcınızın "Öğeyi İnceleme" aracını kullanın.
- Gerekmedikçe
!important— bu, ileride değişiklik yapmayı zorlaştırır. - Özel CSS ekledikten sonra hem masaüstü hem de mobil cihazlarda test edin.
- Özel CSS'nizi mümkün olduğunca az tutun — standart değişiklikler için tema ayarlarını kullanın.
- CSS'nize
/* ... */kullanarak her kuralın ne işe yaradığını hatırlayın.