Özel CSS Sistemi

Neden Özel CSS?

Tema güncellemeleri sırasında doğrudan tema dosyalarında yapılan CSS değişiklikleri kaybolabilir. MarkaClick'in Özel CSS sistemi, özelleştirmelerinizi veritabanında saklayarak bu sorunu çözer.

Nasıl Çalışır?

Kullanım

1. Admin paneline giriş yapın
2. Görünüm → Tema Özelleştir sayfasına gidin
3. Sol menüden "Gelişmiş" sekmesine tıklayın
4. "Özel CSS" alanına CSS kodlarınızı yazın
5. "Kaydet & Uygula" butonuna tıklayın

/* Header arka plan değiştirme */
.navbar {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
}

/* Buton stilini özelleştirme */
.btn-primary {
    border-radius: 25px;
    padding: 12px 30px;
}

/* Footer yazı rengi */
footer {
    color: #ffffff;
}

Kullanım Örnekleri

Renk Değiştirme

/* Ana rengi değiştir */
:root {
    --primary-color: #ff6600;
}

/* Belirli bir elementin rengini değiştir */
.navbar {
    background-color: #1a1a2e !important;
}

Yazı Tipi Değiştirme

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* Tüm siteye uygula */
body {
    font-family: 'Poppins', sans-serif;
}

/* Sadece başlıklara uygula */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

Element Gizleme

/* Belirli bir elementi gizle */
.istenmeyen-element {
    display: none !important;
}

/* Mobilde gizle, masaüstünde göster */
@media (max-width: 768px) {
    .sadece-desktop {
        display: none !important;
    }
}

Boyut ve Boşluk

/* Container genişliğini artır */
.container {
    max-width: 1400px;
}

/* Header yüksekliğini artır */
.navbar {
    padding: 20px 0;
}

/* Ürün kartları arası boşluk */
.product-card {
    margin-bottom: 30px;
}

İpuçları ve Dikkat Edilecekler

CSS Değişkenleri

MarkaClick'in tanımladığı CSS değişkenlerini kullanarak tutarlı bir görünüm sağlayabilirsiniz:

/* Mevcut CSS değişkenleri */
:root {
    --primary-color: #007AFF;      /* Ana renk */
    --secondary-color: #5856D6;    /* İkincil renk */
    --header-bg-color: #ffffff;    /* Header arka plan */
    --header-text-color: #1d1d1f;  /* Header yazı rengi */
    --slider-height: 500px;        /* Slider yüksekliği */
    --slider-border-radius: 12px;  /* Slider köşe yuvarlaklığı */
}

/* Değişkenleri kullanarak özelleştirme */
.my-element {
    background: var(--primary-color);
    color: var(--header-text-color);
}

Sorun Giderme