IRCRehberi.Net- Türkiyenin En iyi IRC ve Genel Forum Sitesi - XenForo önek sistemi kullanımı CSS ile Resimli önek oluşturma

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: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=b2b2b2]#b2b2b2[/URL]

}

.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: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=b2b2b2]#b2b2b2[/URL]

}

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