- Uyumlu XF 2 Sürümleri
- 2.2.X
- 2.0.X
- 2.1.X
Merhaba arkadaşlar, ramazan ayının etkisiyle ve bu salgından dolayı tam kapanma dönemini bir şeyler ile uğraşmadan geçirmek zor. O yüzden birlikte xenforo için postbit tasarlıyoruz. Bunu eklenti haline de çevirebilirdim ama gerek yok amaç bir şeylerle uğraşmanızı ve zaman geçirmenizi sağlamak. 
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
Aşağıdaki ile değiştirelim.
Ş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.
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
Aşağıdaki ile değiştirelim.
Şimdi yine kullandığımız temanın
Hemen altına ekleyelim
Şö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
Ş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
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
Özel mesaj görüşmelerinde postbit alanında sorun yaşamamak için
Bununla değiştiriyoruz.
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.
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
İ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.
HTML:
<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
Aşağıdaki ile değiştirelim.
HTML:
<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.
Less:
.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.
HTML:
<div class="message-cell message-cell--user">
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
message_macros
ş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>
extra.less
ş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;
}
}
Şö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.
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.
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.
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.
Dilerseniz eksta alanlara bir border ataması da yapabiliriz. Bunun için
extra.less
şablonumuzu açalım ve aşağıdaki kodları dahil edelim.
CSS:
.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.
HTML:
<div class="message-cell message-cell--user">
Bununla değiştiriyoruz.
HTML:
<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.