Kullanım tekniği - XenForo önek sistemi kullanımı CSS ile Resimli önek oluşturma | XenGenTr - Türkiye'nin XenForo Türkçe destek topluluğu

Uyumlu XF 2 Sürümleri

Xenforo Önek kullanımı ve CSS ile RESIMLI Yeni önekleri nasıl oluştururum?
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

Kod:

font-family: FontAwesome;

Şunu kullanıyoruz.

Kod:

font-family:'Font Awesome 5 Pro';

Kod:

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

Kod:

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

Kod:

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