Kullanım tekniği Xenforo Less ve Extra.Less Kullanımı: Tema Düzenlemelerinde Doğru Yaklaşım

Fox · Bugün 00:53

XenForo LESS ve extra.less Kullanımı
Tema düzenlemelerinde doğru, temiz ve güncelleme dostu yaklaşım

Bu rehber XenForo 2.3.10 sürümüne göre hazırlanmıştır. XenForo’da stil düzenlemeleri CSS mantığına dayanır; ancak sistem LESS desteğiyle daha esnek bir yapı sunar.

Tema düzenlerken en sık kullanılan alanlardan biri extra.less şablonudur. Bu şablon, seçili stile özel CSS/LESS eklemek için güvenli bir alandır.

extra.less, XenForo’nun mevcut stil dosyalarından sonra yüklenen ek stil alanıdır. Bu nedenle küçük tasarım dokunuşları için idealdir.

Buton renkleri.
Forum liste aralıkları.
Header veya footer düzenlemeleri.
Mobil görünüm düzeltmeleri.
Küçük tema iyileştirmeleri.

Not: Büyük ve eklentiye ait stiller için ayrı LESS dosyası oluşturmak daha doğru olabilir. Basit tema dokunuşlarında extra.less yeterlidir.

Admin panelinde şu yolu izleyebilirsiniz:

Admin Paneli > Görünüm ve Diller > Şablonlar

Arama kutusuna extra.less yazarak ilgili şablonu bulabilirsiniz. Eğer child style kullanıyorsanız değişikliği child style üzerinde yapmanız önerilir.

Kod:

.p-body-header
{
    margin-bottom: 16px;
}

Bu örnek sayfa başlığı alanının alt boşluğunu artırır.

XenForo arayüzünde birçok temel sınıf bulunur. Örnekler:

.p-header
.p-nav
.p-body
.block
.message
.button

Bu sınıfları kullanırken mümkün olduğunca hedefi dar tutun. Çok genel yazılan CSS, beklenmeyen alanları etkileyebilir.

Fazla genel kullanım:

Kod:

a
{
    color: red;
}

Bu kullanım sitedeki tüm linkleri etkiler.

Daha hedefli kullanım:

Kod:

.p-nav-list .p-navEl-link
{
    font-weight: 600;
}

Bu kullanım yalnızca ana navigasyon linklerini hedefler.

Mobil görünüm için media query kullanabilirsiniz.

Kod:

@media (max-width: 650px)
{
    .p-title-value
    {
        font-size: 20px;
    }
}

Bu örnekte küçük ekranlarda sayfa başlığı boyutu düşürülür.

!important bazen gerekli olabilir; ancak sürekli kullanmak CSS bakımını zorlaştırır. Önce selector’ı daha doğru ve hedefli yazmayı deneyin.

Dikkat: Her sorunu !important ile çözmek, ileride başka düzenlemelerin neden çalışmadığını anlamayı zorlaştırır.

Aşağıdaki durumlarda extra.less yerine ayrı LESS dosyası daha temizdir:

Eklentiye ait stiller yazılıyorsa.
Çok sayıda sınıf ve bileşen varsa.
Stil farklı şablonlarda tekrar kullanılacaksa.
Kodun başka projeye taşınması gerekiyorsa.

Bir şablona LESS dosyası dahil etmek için:

Kod:

<xf:css src="my_custom.less" />

9. Bakım İçin Öneriler

Kodları bölüm bölüm ayırın.
Aynı selector’ı tekrar tekrar yazmayın.
Gereksiz renk ve ölçü tekrarlarını azaltın.
Mobil görünümü mutlaka test edin.
Tema güncellemesinden sonra değişiklikleri kontrol edin.

Eşleşme	Forum	İplik	Yazar	İstatistikler
60%	XenForo	İpucu En ideal şekilde Xenforo TEMA Kurulumu, Upgrade ve Kullanımı XenForo · DT · 0 · 100	DT	0 100
48%	XenForo Kullanım Teknikleri	Kullanım tekniği XenForo Roto filtesi kullanımı ve örnekleri 1.1.1 XenForo Kullanım Teknikleri · DT · 0 · 93	DT	0 93
47%	XenForo Kullanım Teknikleri	Kullanım tekniği Xenforo Child Style Kullanımı: Ana Temayı Bozmadan Profesyonel Özelleştirme Rehberi XenForo Kullanım Teknikleri · Fox · 0 · 36	Fox	0 36

Kullanım tekniği Xenforo Less ve Extra.Less Kullanımı: Tema Düzenlemelerinde Doğru Yaklaşım

Fox

Code Manager

9. Bakım İçin Öneriler

Konu 'IFGT - 2026 Dünya Kupası Özel Sohbet ⚽'

Kaynak 'NoMercy v05'

Konu 'Kategorilerdeki Hızlı Konu Açma Barını Nasıl Kaldırırız?'

Kaynak 'Brivium Krypton'

Kaynak '[MMO] Verified Badge Türkçe yama 1.0.0'

Eşleşen Konular

En iyi kaynaklar

Son mesajlar

Son konular

Kullanım tekniği Xenforo Less ve Extra.Less Kullanımı: Tema Düzenlemelerinde Doğru Yaklaşım

Code Manager

9. Bakım İçin Öneriler​

Eşleşen Konular

9. Bakım İçin Öneriler