Standart XenForo önek sistemi kullanımı CSS ile Resimli önek oluşturma

[Root]

Artık Popüler olan 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

Ö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

PHP- Kodu:
font-family: FontAwesome;
Şunu kullanıyoruz.

PHP- Kodu:

font-family:'Font Awesome 5 Pro';
PHP- Kodu:
<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.

PHP- Kodu:

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

PHP- Kodu:

.satilik:before {
    content: "\f155";
}

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.

XenForo Forum istatistik, XenForo eklenti, XenForo Türkiye, XenForo, XenForo tema, XenForo gen Tr teması, XenForo Forum ikonları, XenForo 2 Adsense, XenForo eklenti, XenForo tema, XenForo istatistik eklentisi, XenForo gen Tr teması, XenForo Türkiye, XenForo uyarı sistemi, XenForo Forum ikon, Xenforo 2 postbit, XenForo eklenti, XenForo chat eklentisi, XenForo Türkiye, XenForo istatistik eklentisi, XenForo tema, XenForo Hide eklentisi, XenForo forumları, XenForo 2 exploit, Xtr xenforo, Buy xenforo license, XenForo Türkiye, XenForo tema, XenForo themes, XenForo indir, Xenforo Nedir, XenForo free, XenForo indir, XenForo 2.1 demo, XenForo script, XenForo Tema İndir, XenForo Script yükle, XenForo Script İndir, XenForo Full Script İndir, XenForo 2.1 Tema, XenForo FaceBook Smiley Paketi, XenForo Flat Smilies Flat Tasarım İfadeler, XenForo Oval Avatar Seti, XenForo Animasyonlu 3D Smiley Paketi, XenForo Koyu mavi renki ekli dosya ikonları, XenForo 2.x ingilizce dil paketi, XenForo 1.5.12 Türkçe Yama Dil paketi, XenForo 2.0.9 Türkçe Yama Dil Paketi, Xenforo # kaldırma, XenForo Dosya Tipleri Grafikleri, XenForo Ülke Bayrakları, XenForo Extra Footer Alanı, XenForo 2.0.x Uyarı sistemi, XenForo 2.0.x gelişmiş forum istatistikleri 2.1, XenForo XF2 - Navigasyon Rozeti - [AddonsLab] Navigation Badge, XenForo 2.0.x [AddonFlare] Paid Registrations - Ücretli Kayıt, XenForo 2.0.x Mesajlara link sınırı - [XenMax] - Limit Post Link – Türkçe, XenForo 2.0.x DL6 - Tag Cloud (Etiket Bulutu) Widget, XenForo 2.0.x Aynı kategoriden daha fazla konu - [XenMax] - More Thread Same Category - Türkçe​