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!
Birlikte xenforo için postbit tasarlıyoruz.

XF 2.2 Eklenti Birlikte xenforo için postbit tasarlıyoruz.

Bu eklenti, add-ons XenForo 2.2.X ile uyumlu ve stabil olarak çalışmaktadır.
Uyumlu XF 2 Sürümleri
  1. 2.2.X
  2. 2.0.X
  3. 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 :D 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.

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.

postbit_1.jpg


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. ;)

postbit_2.jpg


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.

postbit_3.jpg
postbit_4.jpg


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.

postbit_5.jpg


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.

postbit_6.jpg


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;
    }
}

postbit_7.jpg


Ö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.
Yazar
netr0n
Görüntüleme
2,841
İlk yayınlama
Son güncelleme
Değerlendirme
5.00 yıldız 2 değerlendirme

netr0n ait diğer kaynakar

Son incelemeler

böyle türkçe kaynakların olması harika.
Patronlar yine iş başında. Vbullettin forum sistemlerin de eskiden sıkça gördüğümüz postbit görüntüsünü yaşadım bir an :)
netr0n
netr0n
Teşekkürler sis ;)

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.