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

[XFSkins]

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.

1. extra.less Ne İşe Yarar?​

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.

2. extra.less Nereden Düzenlenir?​

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.

3. Basit Kullanım Örneği​

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

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

4. XenForo Sınıflarını Hedeflemek​

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.

5. Kötü ve İyi Selector Örneği​

Fazla genel kullanım:

a
{
    color: red;
}

Bu kullanım sitedeki tüm linkleri etkiler.

Daha hedefli kullanım:

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

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

6. Responsive Düzenleme​

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

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

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

7. !important Kullanımı​

!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.

8. Ayrı LESS Dosyası Ne Zaman Kullanılı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:

<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.

---

Özet: extra.less, XenForo tema düzenlemelerinde güçlü ve pratik bir araçtır. Ancak temiz selector, child style ve kontrollü LESS kullanımı uzun vadede çok daha sağlıklı sonuç verir.​