Temalar ve Tasarım

Özel CSS Ekleme

nuvinode mağazanıza özel CSS’yi nereye ekleyeceğinizi, hangi güvenlik kısıtlamalarının geçerli olduğunu öğrenin ve yaygın örnekleri inceleyin.

nuvinode2 dk okuma

Ö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:

  1. Ayarlar > Temalar > Özelleştir seçeneğine gidin.
  2. Sayfanın altındaki "Özel CSS" bölümüne kaydırın.
  3. Kod düzenleyicisine CSS'inizi girin.
  4. "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ılamazexpression(), url(javascript:)ve olay işleyicileri kaldırılır.
  • Harici içe aktarmalar yasaktır@import harici 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 özelliklericolor, font-size, margin, display, gridve flex gibi 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.