- Uyumlu XF 2 Sürümleri
- 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.<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
Aşağıdaki ile değiştirelim.
<xf:avatar class="xgt-postbit" user="$user" size="o" defaultname="{$fallbackName}" itemprop="image" />
Ş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..message-cell.message-cell--user {
flex: 0 0 190px !important;
}
.avatar.avatar--o.xgt-postbit {
width: 187px;
height: 200px;
font-size: 230px;
border-radius: 2px;
}
Eve şimdi baktığımız da gayet düzgün bir şekilde görünüyor.
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.<div class="message-cell message-cell--user">
Aşağıdaki ile değiştirelim.
<div class="message-cell message-cell--user xgt-postbit-cell">
Şimdi yine kullandığımız temanın
message_macros
şablonunu açalım ve aşağıdaki kodumuzu bulalım.<section itemscope itemtype="https://schema.org/Person" class="message-user">
Hemen altına ekleyelim
<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>
extra.less
şablonumuzu açalım ve içerisine aşağıdaki kodları dahil edelim..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;
}
}
Şöyle bir görüntümüz olacak.
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
extra.less
şablonuna aşağıdaki kodlarımızı dahil etmemiz yeterli olacaktır..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.
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
extra.less
şablonuna aşağıdaki kodları ekleyelim..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.
Dilerseniz eksta alanlara bir border ataması da yapabiliriz. Bunun için
extra.less
şablonumuzu açalım ve aşağıdaki kodları dahil edelim..message-userExtras {
.pairs.pairs--justified {
border-bottom: 1px dotted #ccc;
}
}
Özel mesaj görüşmelerinde postbit alanında sorun yaşamamak için
conversation_message_macros
şablonu açıyoruz ve aşağıdaki kodu buluyoruz.<div class="message-cell message-cell--user">
Bununla değiştiriyoruz.
<div class="message-cell message-cell--user xgt-postbit-cell">
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.