Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!
Kaynak ikonu

Kullanım tekniği XenForo önek sistemi kullanımı CSS ile Resimli önek oluşturma

XenForo için kullanım tekniği.
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.

2759



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


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

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.

2762

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.

2763
Yazar
mkucuksari
Görüntüleme
6,193
İlk yayınlama
Son güncelleme
Değerlendirme
4.42 yıldız 12 değerlendirme

mkucuksari ait diğer kaynakar

En son güncellenenler

  1. XF-2.1 Uyumu

    2.1.x Kullanımında sadece şu kod yerine font-family: FontAwesome; Şunu kullanıyoruz...

Son incelemeler

Ekledim kodları fakat resimdeki gibi olmuyor malesef. yazı küçülüyor padding ekliyor o kadar. Bende bu şekilde: https://i.hizliresim.com/g5fwws5.png
Harika olmuş. Teşekkürler
Merhaba Güzel olmuş elinize sağlık, bence font-size: 85%; olabilir ve padding: 2px 5px 0 32px; bu şekilde olursa hem yazı hem ikon daha iyi gibi
Harika, ellerinize sağlık
not running properly

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.