Dosya Yapısı
Forsid tema mimarisi Laravel Blade şablon sistemi üzerine kurulmuştur. Temalar ve bloklar Bootstrap framework ile oluşturulmuş benzersiz bileşenlerdir.
Laravel Blade şablon motoru + Bootstrap 5 CSS framework kullanılmaktadır. Ek stil tanımlamaları için Kod Editör bölümündeki Custom CSS alanını kullanabilirsiniz.
Temel Yapı
Forsid tema sistemi modüler bir yapıya sahiptir. Her bileşen bağımsız çalışır ve kolayca özelleştirilebilir.
Blade Templates
Laravel'in güçlü şablon motoru ile dinamik içerik yönetimi.
Bootstrap 5
Modern ve responsive CSS framework ile tutarlı tasarım.
Custom CSS
Kod editörü ile özel stil tanımlamaları.
Blade Şablon Sistemi
Blade, Laravel'in hafif ve güçlü şablon motorudur. PHP kodunu HTML ile temiz bir şekilde birleştirmenizi sağlar. Tüm Blade dosyaları .blade.php uzantısına sahiptir.
Blade Özellikleri
- Şablon Kalıtımı - Ana layout'tan türetilen sayfa yapıları
- Bileşen Sistemi - Yeniden kullanılabilir UI parçaları
- Direktifler - Koşullu ve döngü kontrol yapıları
- Otomatik XSS Koruması - Güvenli veri çıktısı
Temel Blade Syntax
<!-- Veri yazdırma -->
{{ $urun->baslik }}
<!-- HTML içeren veri -->
{!! $urun->aciklama !!}
<!-- Koşullu içerik -->
@if($urun->stok > 0)
<span class="badge bg-success">Stokta</span>
@else
<span class="badge bg-danger">Tükendi</span>
@endif
<!-- Döngü -->
@foreach($urunler as $urun)
<div class="urun-karti">{{ $urun->baslik }}</div>
verbatim@endforeach@endverbatim
<!-- Bileşen dahil etme -->
@include('bloklar.slider')Tema Dosya Yapısı
Forsid tema dosyaları aşağıdaki yapıda organize edilmiştir:
resources/views/
├── theme/
│
├── partials/
│ ├── header.blade.php # Site üst bölümü
│ ├── footer.blade.php # Site alt bölümü
│ ├── navigation.blade.php # Menü yapısı
│ └── meta.blade.php # SEO meta etiketleri
│
├── bloklar/
│ ├── slider/
│ │ ├── standart.blade.php
│ │ ├── hero.blade.php
│ │ └── minimal.blade.php
│ ├── banner/
│ │ ├── tekli.blade.php
│ │ ├── ikili.blade.php
│ │ └── grid.blade.php
│ └── urun/
│ ├── grid.blade.php
│ ├── carousel.blade.php
│ └── sekmeli.blade.php
│
└── pages/
├── anasayfa.blade.php
├── kategori.blade.php
└── urun-detay.blade.php
public/assets/
├── css/
│ ├── theme.css
│ ├── blocks.css
│ └── custom.css
├── js/
│ ├── theme.js
│ └── blocks.js
└── img/Bootstrap Kullanımı
Tüm bloklar Bootstrap 5 grid sistemi ve bileşenleri üzerine inşa edilmiştir. Bu sayede responsive tasarım ve tutarlı görünüm sağlanır.
Grid Sistemi
<!-- 3 kolonlu ürün grid'i -->
<div class="container">
<div class="row g-4">
@foreach($urunler as $urun)
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100">
lt;img src="{{ $urun->resim }}" class="card-img-top">
<div class="card-body">
<h5 class="card-title">{{ $urun->baslik }}</h5>
<p class="card-text">{{ $urun->fiyat }} TL</p>
</div>
</div>
</div>
@endforeach
</div>
</div>Custom CSS Kullanımı
Tema görünümünü özelleştirmek için Kod Editör bölümündeki Custom CSS alanını kullanabilirsiniz. Burada yazdığınız stiller tema stillerinin üzerine yazılır.
Custom CSS'te yapılan değişiklikler tema güncellemelerinden etkilenmez. Ancak !important kullanımını minimize edin.
Custom CSS'e Erişim
- Mağaza Ayarları'na gidin
- Temalar → Kod Editör bölümünü açın
- Custom CSS sekmesini seçin
- Stil kodlarınızı yazın ve kaydedin
CSS Örnekleri
Buton Rengini Değiştirme:
/* Ana buton rengi */
.btn-primary {
background-color: #73b894;
border-color: #73b894;
}
.btn-primary:hover {
background-color: #5a9a78;
border-color: #5a9a78;
}Ürün Kartı Özelleştirme:
/* Ürün kartı hover efekti */
.product-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius: 12px;
overflow: hidden;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
/* Ürün başlığı */
.product-card .product-title {
font-size: 1rem;
font-weight: 600;
color: #1d4346;
}
/* Fiyat stili */
.product-card .product-price {
font-size: 1.125rem;
font-weight: 700;
color: #73b894;
}Header Özelleştirme:
/* Sabit header */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
/* Logo boyutu */
.site-header .logo img {
max-height: 45px;
width: auto;
}
/* Menü linkleri */
.site-header .nav-link {
font-weight: 500;
color: #374840;
}
.site-header .nav-link:hover {
color: #73b894;
}Footer Özelleştirme:
/* Footer arka plan */
.site-footer {
background: linear-gradient(135deg, #1d4346 0%, #243330 100%);
color: #ffffff;
padding: 60px 0 30px;
}
/* Footer başlıkları */
.site-footer h5 {
color: #73b894;
font-weight: 600;
margin-bottom: 1.5rem;
}
/* Footer linkleri */
.site-footer a {
color: rgba(255, 255, 255, 0.7);
}
.site-footer a:hover {
color: #ffffff;
}CSS Değişkenleri
Tema genelinde tutarlılık için CSS değişkenleri kullanılmaktadır:
:root {
/* Marka Renkleri */
--theme-primary: #73b894;
--theme-primary-dark: #1d4346;
--theme-primary-light: #eef6f2;
/* Metin Renkleri */
--theme-text: #374840;
--theme-text-light: #6b7f73;
/* Arka Plan */
--theme-bg: #ffffff;
--theme-bg-light: #f8faf9;
/* Kenar */
--theme-border: #e2e8e5;
--theme-radius: 8px;
/* Gölge */
--theme-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
/* Kullanım örneği */
.custom-box {
background: var(--theme-bg-light);
border: 1px solid var(--theme-border);
border-radius: var(--theme-radius);
box-shadow: var(--theme-shadow);
}CSS değişkenlerini kullanarak tema renklerini tek bir yerden değiştirebilirsiniz. :root içindeki değişkenleri Custom CSS'te override edebilirsiniz.