Temayı Özelleştir
Mağaza paneli, mağaza sahibinin kod yazmadan temanın görsel kimliğini düzenlemesini sağlar. 6 renk ve 3 font, T-SOFT tarafından sabit değerler olarak tema motoruna aktarılır; geliştirici bu değerlere hazır semantik Tailwind class'ları (bg-primary, text-body, font-sans…) ile referans verir.
light, form gibi) kullanın veya CSS dosyanızda sabit değer tanımlayın.Panel görünümü
Mağaza sahibi, Tema Ayarları ekranından bu kontrollerle çalışır:
Tipografi Ayarları
├── Font → Montserrat
├── Secondary Font → (Seçilmemiş)
└── RTL Font → (Seçilmemiş)
Renk Ayarları
├── Body Text → #E31414
├── Primary → #000000
├── Secondary → #AB0000
├── Dark → rgb(119 119 119)
├── Light → #F3F3F3
└── Form → rgb(229 231 235)
Değişken ve class listesi
T-SOFT, panel değerlerini Tailwind kurulumuna aktarır: renkler hem tam skalalı Tailwind renk class'ları (bg-primary, text-body… + bg-primary-50…950 + bg-primary/10 opaklık) hem de :root üzerinde CSS değişkeni olarak (--primary, --body… — değerleri rgb(...)) hazır gelir. Fontlar yalnızca Tailwind class'ı olarak sunulur.
Renkler
| Panel etiketi | Tailwind class | CSS değişkeni | Tipik kullanım |
|---|---|---|---|
| Body Text | text-body | --body | Paragraf, açıklama ve nötr metin rengi |
| Primary | bg-primary | --primary | Birincil aksiyon — butonlar, vurgu rengi |
| Secondary | bg-secondary | --secondary | İkincil aksiyon, alternatif vurgu |
| Dark | bg-dark | --dark | Koyu zemin, koyu metin |
| Light | bg-light | --light | Açık zemin, section arka planı |
| Form | border-form | --form | Input, select, textarea kenar / arka planı |
bg-, text-, border- ön ekleriyle kullanılabilir (text-primary, bg-light, border-form …). Skala için bg-primary-100, opaklık için bg-primary/10 yazın. CSS değişkeni rgb(...) döndürdüğü için ham kullanım da geçerlidir (var(--primary)), ancak skala/opaklık istiyorsanız Tailwind class'ını tercih edin.Fontlar
Fontların CSS değişkeni yoktur; doğrudan Tailwind class'ı olarak kullanılır:
| Panel etiketi | Tailwind class | Tipik kullanım |
|---|---|---|
| Font | font-sans | Tüm vücut metni ve başlıklar (varsayılan) |
| Secondary Font | font-secondary | Vurgu başlıkları, kampanya yazıları |
| RTL Font | font-rtl | RTL dilleri (Arapça, İbranice…) için override |
Twig + Tailwind içinde kullanım
Semantik Tailwind class'ları ile
<button class="bg-primary text-white px-6 py-3 rounded-custom">
{{ t.add_to_cart }}
</button>
<input class="border border-form focus:border-primary
rounded-form px-3 py-2">
<h1 class="font-sans text-body">
{{ t.welcome }}
</h1>
theme.css içinde
@layer base {
body {
@apply font-sans text-body bg-light;
}
h1, h2, h3 {
@apply font-secondary;
}
}
@layer components {
.btn-primary {
@apply px-6 py-3 rounded-custom font-medium transition
bg-primary text-white
hover:opacity-90;
}
}
font-secondary ve font-rtl, panelde ilgili font seçilmediğinde Tailwind kurulumunda otomatik olarak Primary fonta (font-sans) geri düşecek şekilde yapılandırılmıştır — ayrıca fallback yazmanıza gerek yoktur.Tema renkleriyle uyum
Mağaza sahibi panelden Primary'yi koyu yeşile çevirirse, temanız tüm "öne çıkma" alanlarında otomatik bu yeşille render olmalıdır. Bunu sağlamak için iki kural:
Sabit hex'ten kaçının
bg-[#fd6905] yazarsanız, mağaza renk şemasını değiştirdiğinde uyumsuzluk olur. bg-primary kullanın.Anlamlı semantik atayın
Eksik değer davranışı
| Senaryo | Davranış |
|---|---|
| Mağaza sahibi Secondary Font seçmediyse | font-secondary otomatik olarak Primary fonta (font-sans) düşer; ek işlem gerekmez. |
| RTL Font seçmediyse | font-rtl aynı şekilde Primary fonta düşer. |
| Tema yeni kurulduysa | T-SOFT varsayılan bir palet uygular; tema kurulumunda boş görünüm oluşmaz. |
En iyi uygulamalar
Sadece 6+3 kullan
Semantik class kullan
bg-primary, text-body, font-sans gibi semantik class'larla ver; sabit hex/px'ten kaçın.Tema renk testi
Component class'la sarmala
bg-primary dizisi 12 yerde tekrarlanıyorsa .btn-primary'ye çek.