Renk & Font Ayarları (SCSS)

Tasarım & İçerik > SCSS Ayarları sayfasından mağazanızın renk paleti ve yazı tiplerini kod yazmadan görsel arayüzle yönetebilirsiniz. Yapılan değişiklikler kaydedildikten sonra sayfanın altındaki SCSS DÖNÜŞTÜR butonuna tıklanarak site genelinde uygulanır.

Sayfa Düzeni

Sayfa iki bölümden oluşur:

Bölüm	İçerik
Sol — Font Ayarları	Site geneli, Arapça ve metin yazı tiplerini yönetin
Sağ — SCSS Değişkenleri	Renk, boyut ve köşe yarıçapı gibi tasarım değişkenlerini düzenleyin

Font Ayarları

Üç ayrı font değişkeni tanımlanabilir:

Değişken	Açıklama
`fontMaster`	Site genelinde kullanılan ana yazı tipi
`fontArabic`	Arapça içerik için kullanılan yazı tipi
`fontText`	Paragraf ve metin alanlarında kullanılan yazı tipi

Her değişkenin sağındaki 🔍 arama butonuna tıklandığında font seçim paneli açılır. Panel üç sekme sunar:

1. Google Font Seç

Google Fonts kütüphanesinden yazı tipi seçmenizi sağlar.

Kullanım adımları:

Arama kutusuna font adını yazın (örn: Roboto, Inter, Poppins)
Listede her fontu canlı önizleme ile görüntüleyin
Seçmek istediğiniz fontu bulup → butonuna tıklayın
Açılan Variant Seçiniz panelinde kalınlık/stil seçin:
- regular → Normal ağırlık
- 700 → Kalın (bold)
- italic → İtalik
- 700italic → Kalın italik
Birden fazla variant seçilebilir (yeşil kenarlık = seçili)
Seçim otomatik kaydedilir

İlk 10 Font

Liste performans için başlangıçta 10 font gösterir. Load More Font butonu ile 10'ar 10'ar daha fazla yükleyebilirsiniz.

Seçilen Google Fonts, SCSS DÖNÜŞTÜR işlemi sırasında otomatik olarak sayfaya eklenir — ayrıca @import yazmaya gerek yoktur.

2. Manuel Font Yükle

Satın aldığınız veya özel bir fontu sisteme yüklemenizi sağlar. Yükleme işlemi transfonter.org üzerinden yapılmalıdır.

Adımlar:

transfonter.org adresine gidin
Font dosyanızı (.ttf, .otf vb.) yükleyin
Dönüştür seçeneğinde sadece tek bir font seçin
Fonts directory değerini /data/font/ olarak ayarlayın
Dönüştürülen ZIP dosyasını indirin
Panel'de TRANSFORTER Zip Dosyası Seç & Yükle butonuyla bu ZIP'i yükleyin

Dikkat

Zip dosyası yalnızca transfonter.org çıktısı olmalıdır
Tek seferde yalnızca bir font dönüştürülüp yüklenmelidir
Fonts directory mutlaka /data/font/ olarak ayarlanmalıdır; aksi halde font sisteme doğru yüklenmez

3. Tarayıcı Fontu Seç

Ek yükleme veya dış kaynak gerektirmeden tarayıcıların varsayılan olarak desteklediği sistem fontlarını kullanmanızı sağlar. Çoklu seçim desteklenir — seçilen fontlar CSS'te font-family dizisi olarak tanımlanır.

Kullanılabilir tarayıcı fontları:

Font	Tür
Arial	Sans-serif
Helvetica	Sans-serif
Tahoma	Sans-serif
Verdana	Sans-serif
Trebuchet MS	Sans-serif
Georgia	Serif
Garamond	Serif
Times New Roman	Serif
Courier New	Monospace
Courier	Monospace
monospace	Genel monospace
sans-serif	Genel sans-serif
serif	Genel serif
Brush Script MT	El yazısı
cursive	Genel el yazısı

Seçim yapıldıktan sonra KAYDET butonuna basın.

SCSS Değişkenleri

Sayfanın sağ bölümünde site genelini etkileyen CSS değişkenleri yer alır. Renk değişkenleri renk seçici + hex kutusu ile, metin değişkenleri ise doğrudan giriş alanıyla düzenlenir.

Her değişkenin sağındaki 💾 kaydet ikonuna tıklayarak o değişkeni bağımsız olarak kaydedebilirsiniz.

Ana Değişkenler

Değişken	Açıklama	Tür
`$primary`	Sitenin ana rengi (butonlar, vurgular, linkler)	Renk
`$secondary`	İkincil renk	Renk
`$light`	Açık arka plan tonu	Renk
`$bodyBg`	Sayfa genel arka plan rengi	Renk
`$bodyText`	Varsayılan metin rengi	Renk
`$footerBg`	Footer arka plan rengi	Renk
`$bodyFontSize`	Temel yazı boyutu (örn: `16px`)	Metin
`$radius`	Genel köşe yuvarlaklığı (örn: `8px`)	Metin

Gelişmiş Renkler

Gelişmiş Renkler başlığı altında gizli bölümde durum renkleri ve kenarlık rengi yer alır. Başlığa tıklayarak açılır/kapanır.

Değişken	Kullanım Yeri
`$success`	Başarı bildirimleri, onay ikonları
`$warning`	Uyarı mesajları
`$danger`	Hata mesajları, silme uyarıları
`$info`	Bilgilendirme mesajları
`$border`	Genel kenarlık rengi

Renk Değiştirme

Bir renk kutusuna tıkladığınızda renk seçici açılır. Rengi seçip veya hex kodunu yazıp kaydet ikonuna tıklayın. Sayfa üzerinde henüz değişiklik görünmez — sayfanın altındaki SCSS DÖNÜŞTÜR butonuna basmanız gerekir.

SCSS DÖNÜŞTÜR

Sayfanın altında sabit konumda duran kırmızı SCSS DÖNÜŞTÜR butonu, yapılan tüm değişiklikleri siteye uygular.

Bu buton şunları yapar:

Kaydedilen tüm SCSS değişkenlerini okur
Font tanımlamalarını (Google Fonts import dahil) oluşturur
Tailwind CSS yapılandırmasını günceller
SCSS dosyalarını CSS'e derler
Önbelleği yenileyerek değişikliklerin site ön yüzüne yansımasını sağlar

Her Değişiklikten Sonra Dönüştürün

Renk veya font kaydettikten sonra SCSS DÖNÜŞTÜR'e basmadan site görünümü güncellenmez. Her kayıt işleminin ardından sistem sizi "SCSS Dönüştürmeyi Unutmayın!" uyarısıyla hatırlatır.

Değişkenler Şablonlarda Nasıl Kullanılır?

Tanımlanan SCSS değişkenleri, blok şablonlarında hem SCSS/CSS hem de Tailwind üzerinden kullanılabilir.

SCSS/CSS içinde:

.my-button {
    background-color: var(--primary);
    border-radius: var(--radius);
    color: var(--bodyText);
}

Tailwind sınıfı olarak (tema konfigürasyonuna bağlı):

<div class="bg-primary text-bodyText rounded-radius">
    İçerik
</div>

$primary gibi değişkenler hem --primary CSS custom property hem de Tailwind temasında renk olarak tanımlanır. Bu sayede değişkenler kod içinde tutarlı biçimde kullanılabilir ve tek noktadan yönetilir.