- Katılım
- 20 Ara 2025
- Mesajlar
- 37
- Tepkime puanı
- 4
- Puanları
- 8
Uyumlu XF 2 Sürümleri
Geçtiğimiz günlerde bir kaç konu da denk geldim, avatar büyük olsun diyenler, vBulletin'den aşina olduğumuz postbit tasarımlarını isteyenlerde oldu. Ah bu vBulletin alışkanlıklarımız yok mu Bu tarz bir şey yapalım bizde. Bakalım ne çıkaracağız. Bu konuyu açarken daha önceden çalışmasını yaptığım bir postbit yok, tamamen doğaçlama gideceğim.
İlk olarak avatarı büyük yapmamız gerekiyor. Avatar yüklemelerinde crop işlemine tabii olacağı için, crop işleminden az etkilenmesini sağlayabiliriz. Bunun için kullanmış olduğumuz
şablonumuzu açalım ve en üst kısımlarda bulunan (default temada) 8. satırda bulunan aşağıdaki kodu bulalım.
Şimdi herhangi bir konuya girdiğimiz de avatarların aşağıdaki gibi büyük olduğunu görebilirsiniz.
Buna biraz biçimlendireceğiz ama bundan önce avatarın konumlanacağı alanı ayarlamamız gerekiyor. Gördüğünüz gibi hem konumlanacağı alana sığmadı hem de çirkin bir görüntü oluşturdu.
şablonumuzu açıyoruz ve aşağıdaki kodları ekliyoruz.
Avatarı ayarladığımıza göre, şimdi vBulletin'de yapmış olduğumuz çevrim içi ve çevrim dışı alanlarını yapalım. Bakalım nasıl olacak.
Öncelikle kullandığımız temanın
şablonunu açalım ve aşağıdaki kodu bulalım.
Evet arkadaşlar, benim anlatacaklarım bu kadar. Mantığı anladığınızı düşünüyorum. Diğer alanları düzenlemek zaten hem basit hem de sizin hayal gücünüze kalmış.
Herkese kolay gelsin.
- 2.2.X
- 2.0.X
- 2.1.X
Geçtiğimiz günlerde bir kaç konu da denk geldim, avatar büyük olsun diyenler, vBulletin'den aşina olduğumuz postbit tasarımlarını isteyenlerde oldu. Ah bu vBulletin alışkanlıklarımız yok mu
Bu tarz bir şey yapalım bizde. Bakalım ne çıkaracağız. Bu konuyu açarken daha önceden çalışmasını yaptığım bir postbit yok, tamamen doğaçlama gideceğim.İlk olarak avatarı büyük yapmamız gerekiyor. Avatar yüklemelerinde crop işlemine tabii olacağı için, crop işleminden az etkilenmesini sağlayabiliriz. Bunun için kullanmış olduğumuz
message_macrosşablonumuzu açalım ve en üst kısımlarda bulunan (default temada) 8. satırda bulunan aşağıdaki kodu bulalım.
İçeriği görüntülemek için Giriş yapın veya Kayıt olun.
Şimdi herhangi bir konuya girdiğimiz de avatarların aşağıdaki gibi büyük olduğunu görebilirsiniz.
Buna biraz biçimlendireceğiz ama bundan önce avatarın konumlanacağı alanı ayarlamamız gerekiyor. Gördüğünüz gibi hem konumlanacağı alana sığmadı hem de çirkin bir görüntü oluşturdu.
extra.lessşablonumuzu açıyoruz ve aşağıdaki kodları ekliyoruz.
İçeriği görüntülemek için Giriş yapın veya Kayıt olun.
Avatarı ayarladığımıza göre, şimdi vBulletin'de yapmış olduğumuz çevrim içi ve çevrim dışı alanlarını yapalım. Bakalım nasıl olacak.
Öncelikle kullandığımız temanın
post_macrosşablonunu açalım ve aşağıdaki kodu bulalım.
Kod:
<div class="message-cell message-cell--user">
Kod:
Aşağıdaki ile değiştirelim.
HTML:
<div class="message-cell message-cell--user xgt-postbit-cell">
Şimdi yine kullandığımız temanın
[icode]message_macros[/icode]
şablonunu açalım ve aşağıdaki kodumuzu bulalım.
HTML:
<section itemscope itemtype="https://schema.org/Person" class="message-user">
Hemen altına ekleyelim
HTML:
<xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
<div class="xgt-onlineKapsama">
<div class="onlineDurum">Durumu:</div>
<div class="xgt-online">Çevrim İçi</div>
</div>
<xf:else />
<div class="xgt-offlineKapsama">
<div class="offlinDurum">Durumu:</div>
<div class="xgt-offline">Çevrim dışı</div>
</div>
</xf:if>
[icode]extra.less[/icode]
şablonumuzu açalım ve içerisine aşağıdaki kodları dahil edelim.
Less:
.xgt-onlineKapsama {
display: flex;
justify-content: space-between;
background-color: #50ec09;
padding: 4px;
color: #FFF;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.xgt-offlineKapsama {
display: flex;
justify-content: space-between;
background-color: #dc0545;
padding: 4px;
color: #FFF;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.xgt-postbit-cell {
padding: 1px;
}
.message-cell.message-cell--user.xgt-postbit-cell {
.message-userArrow {
display: none;
}
}
Buraya kadar iyi gidiyoruz. Kullanıcı ekstra ve detay alanlarını biraz düzenleyelim. Padding değerlerini değiştirdiğimiz için sağa, sola yapıştı. Bunları çözelim. Bunun için
[icode]extra.less[/icode]
şablonuna aşağıdaki kodlarımızı dahil etmemiz yeterli olacaktır.
Less:
.xgt-postbit-cell {
.message-userExtras {
padding: 0 5px;
}
.message-userDetails {
padding: 0 5px;
}
}
Şimdi baktığımız da her şeyin güzel gittiğini görebiliriz.
[ATTACH type="full"]958[/ATTACH]
Burada dikkat ederseniz, çevrim içi ibaresi hem üst alanda hem de alt alanda var. Alt alandakini masaüstü cihazlarda kaldıralım. Mobil cihazlarda açalım. Aynı şekilde mobil cihazlarda da yukarıdakini kaldıralım. Bunun için
[icode]extra.less[/icode]
şablonuna aşağıdaki kodları ekleyelim.
Less:
.xgt-postbit-cell .message-avatar-online {
display: none;
}
@media (max-width: 650px) {
.xgt-postbit-cell .message-avatar-online {
display: block;
}
.xgt-onlineKapsama {
display: none;
}
}
Evet, şimdi baktığımız da her şeyin istediğimiz gibi gittiğini görebiliyoruz.
[ATTACH type="full"]957[/ATTACH]
Dilerseniz eksta alanlara bir border ataması da yapabiliriz. Bunun için
[icode]extra.less[/icode]
şablonumuzu açalım ve aşağıdaki kodları dahil edelim.
CSS:
.message-userExtras {
.pairs.pairs--justified {
border-bottom: 1px dotted #ccc;
}
}
[ATTACH type="full"]955[/ATTACH][ATTACH type="full"]956[/ATTACH]
Özel mesaj görüşmelerinde postbit alanında sorun yaşamamak için
[icode]conversation_message_macros[/icode]
şablonu açıyoruz ve aşağıdaki kodu buluyoruz.
HTML:
<div class="message-cell message-cell--user">
Bununla değiştiriyoruz.
HTML:
<div class="message-cell message-cell--user xgt-postbit-cell">Herkese kolay gelsin.
- Meta Title
- XenForo Eklenti ve Tema Paketleri – XF2.2 & XF2.3 Uyumluluk
- Meta Description
- XenForo forumlarınız için geliştirilmiş eklentiler ve modern temalar. XF2.2 ve XF2.3 sürümleri ile tam uyumlu, mobil dostu ve kullanıcı deneyimini artıran çözümler.
