- Uyumlu XF 2 Sürümleri
Forum sistemlerinde önek vaz geçilmez bir uygulama ve özelliktir. Her forum yazılımda oluğu gibi XenForo sisteminde de önek sistemi mevcuttur.
NOT: Resimsiz önek oluşturma ile ilgili olarak daha önce paylaşılan şu konuya bakabilirsiniz
Kullanım tekniği - XenForo önek sistemi kullanımı CSS ile önek oluşturma
Önek sistemi nedir ?
Önek sistemi konu başlıklarının yanı eklenen kısa bilgi,uyarı yada dikakt çekici bir uygulamadır.
Nasıl kullanılır ?
Konu açma sırasında başlık yazılan kutunun solunda beliren bir kutudan seçilip eklenebilir. Hangi bölümde hangi önekin seçileceği aşağıda önek tanımlama sırasında belirtilir.
Nasıl önek oluşturulur?
1 - Önek Grubu Oluşturma (Opsiyonel)
Öncelikle isterseniz önekleri belli gruplar içinde toplayabilirsiniz. Bunun için
/admin.php?thread-prefixes/
sayfasında bulunan "Önek Grubu Ekle" butonuna basılarak grup tanımlaması yapılır. Bu işlem zorunlu değildir.2 - Önek Tanımlama
Opsiyonel olan "Önek grubu"muzu oluşturduk şimdi gelelim esas olan "önek" oluşturmaya.
Yine
/admin.php?thread-prefixes/
sayfasındayız. Bu sefer "Önek Ekle" butonuna tıklayarak aşağıdaki benzer şekilde yeni önek tanımlamızı yapıyoruz.Başlık : Yeni Önekimizin görünecek adını burada tanımlıyoruz.
Görünüm tarzı : Resimli ve özel bir format kullanmak için burada "Diğer, özel CSS sınıf adı kullanarak" seçiyoruz ve şöyle bir tanımlama yapıyoruz
rc_onek satilik
rc_onek satilik
Bu tanımla iki kısımdan oluşuyor.NOT: Bu isim ile "extra.less" eklenen kodlarda isimler uyumsuz olursa, yapacağımız işlem düzgün çalışmayacaktır.
a-) Birinci kısım olan "rc_onek" birazdan aşağıda "extra.less" şablonuna eklenen ve genel olarak kullanacağımız öneklerin formatını belirleyen kısım ile aynı ismi sahip olmalı
b-) 2. kısım olan "satilik" kısmıda yine extra.less eklenen ve bu önek özel renk ve resimleri belirtildiği kısımdır.
Önek grubu: Tanımladığımız öneki bir önek grubun altında göstermek istersek, uygun önek grubunu seçiyoruz.
Kullanabilcek guruplar : Bu öneki kullanabilecek üye gruplarını belirliyoruz.
Kullanılabilir forumlar : Bu önekin kullanılabileceği bölümleri seçiyoruz.
Son olarak geldik kodları ilave etmeye. Bunun için "Görünüm ve diller > Tema ve Şablonlar > Şablonlar" kısmında kullandığımız temanın "extra.less" şablonuna şu kodları ilave ediyoruz.
NOT: 2.1.x kullanımı sırasında şu kod yerine
font-family: FontAwesome;
font-family:'Font Awesome 5 Pro';
<xf:comment> ONEK CSS Tanimi </xf:comment>
.rc_onek {
color: rgba(255,255,255,0.8);
border-radius: 2px;
display: inline-block;
position: relative;
font-size: 90%;
padding: 0 5px 0 32px;
cursor: pointer;
font-size: 80%;
font-weight: normal;
&:before {
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
border-top-right-radius: 40px;
border-right: 2px solid rgba(0, 0, 0, 0.1);
top: 0;
bottom: 0;
left: 0;
padding: 2px 4px 0 2px;
width: 20px;
font-family: FontAwesome;
text-align: center;
}
}
<xf:comment> SATILIK ONEK CSS Tanimi </xf:comment>
.satilik {
background-color: #b2b2b2;
}
.satilik:before {
content: "\f155";
}
Önekimizin zemin rengini değiştirmek için aşağıdaki kodda bulunan "#b2b2b2" kısmını istediğimiz renkle değiştirebiliriz.
.satilik {
background-color: #b2b2b2;
}
Önekimizin sol tarafında bulunan resmi değiştirmek için aşağıdaki kodda bulunan "\f155" kısmını değiştirmemiz yeterli.
.satilik:before {
content: "\f155";
}
NOT: Farklı resimleri aşağıdaki linkten erişebilirsiniz.
Font Awesome 5 Cheatsheet
NOT: Eğer bazı bölümlerde default olarak tanımladığımız bir önek gelmesini istiyorsak "Forumlar > Kategori ve forumlar" gelip istediğimiz forumu seçerek "Varsayılan konu öneki" seçmemiz yeterli.
Ayrıca istersek yine aynı bölüm için önek seçimini zorunlu hale getirebiliriz.