XenForo yazılımında her kategoriye özel bir ikon veya görsel eklemek oldukça kolaydır. Bu işlemi yapmak için yalnızca bir adet CSS kodu eklemeniz yeterlidir. Aşağıdaki adımları izleyerek birkaç dakika içinde forum kategorilerinize özel ikonlar ekleyebilirsiniz. İlk olarak XenForo yönetici panelinize giriş yapın. Sol menüden Görünüm ve Diller → Şablonlar sekmesine tıklayın. Açılan sayfada, arama kutusuna extra.less yazarak kendi temanıza ait şablonu bulun. (Burada dikkat etmeniz gereken nokta, seçtiğiniz şablonun etkin temaya ait olmasıdır. Şablon başlığında tema adınız görünmelidir.) extra.less dosyasını açtıktan sonra, en alt kısma aşağıdaki CSS kodunu ekleyin. Bu kod, XenForo’nun varsayılan ikonlarını gizler ve tüm kategorilerde özel bir görsel ikon gösterir.
CSS:
/* Varsayılan ikonları gizle */
.node-icon i,
.node-icon svg {
display: none !important;
}
/* Özel ikon – tüm kategorilerde /
.node-icon {
width: 36px;
height: 36px;
background-image: url('/data/assets/style_properties/greenmarijuana.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
margin-top: 4px; / Dikey hizalama */
margin-left: 10px;
border-radius: 6px;
}
/* Ana kategori yapısında hizalama düzeltmesi */
.node-body {
display: flex;
align-items: center;
}
.node-main {
flex: 1;
}background-image: url('/data/assets/style_properties/sizinikonunuz.png'); Görselin boyutunu veya hizalamasını değiştirmek için width, height veya margin değerlerini düzenleyebilirsiniz. Tüm değişiklikleri kaydettikten sonra forum ana sayfanıza dönün ve kategorilerinizin yanında özel ikonların başarıyla göründüğünü kontrol edin. Eğer ikonlar görünmüyorsa, büyük olasılıkla CSS önbelleği temizlenmemiştir — tarayıcınızı yenileyin veya Ctrl + F5 tuşlarına basarak sayfayı tamamen yeniden yükleyin.
CSS yapısı oldukça basit olduğundan, küçük düzenlemelerle ikon konumunu veya boyutunu kolayca değiştirebilirsiniz. Bu yöntem sayesinde XenForo kategorilerinize sade ama dikkat çekici ikonlar ekleyebilir, forumunuzun görünümünü özelleştirebilirsiniz.
Tek yapmanız gereken, extra.less dosyasına doğru CSS kodunu eklemek ve görsel yolunu kendi ikonunuzla değiştirmek.
