XF 2.2 Eklenti - Birlikte xenforo için postbit tasarlıyoruz. | XenGenTr - Türkiye'nin XenForo Türkçe destek topluluğu

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

Tepkiler: blackpoint, blidi4ever, NorvecRehberi ve 16 diğerleri

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

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

netr0n ait diğer kaynakar

Bu kaynağı paylaş

Son incelemeler

Foruma hoş geldin 👋, Ziyaretçi

Gizliliğinize değer veriyoruz