XF 2.1 Eklenti - Şık Postbit Yapımı | XenGenTr - Türkiye'nin XenForo Türkçe destek topluluğu

Uyumlu XF 2 Sürümleri

Merhaba arkadaşlar,
Postbit görünümünüzü eklentisiz bu tür güzelleştire bilirsiniz.

1. Postbit Arka Planı:

Admin CP > Görünüm ve diller > Temalarınız > "Temanız" - Şablonlar > message_macros dosyasını açıyoruz.
En başta

Kod:

<xf:macro name="user_info"
    arg-user="!"
    arg-fallbackName="">

kodunun altına

Kod:

<div class="postbit_background" style="background-image: url({$user.Profile.custom_fields.xxx});"></div>

bu kodu yapıştırıyoruz.

Daha sonra extra.less şablonumuzu açarak içerisine

CSS:

.postbit_background {
    opacity: .25;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 268px;
    background-position: center;
    background-size: cover !important;
}
.postbit_background:before{
   
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(to bottom, transparent, #222);
}

Bu kodu yapıştırıyoruz.

Sıra geliyor resimlerimizi url olarak göstertmeye.

Kullanıcılar > Kullanıcı özel alanları'na girerek Alan ekle diyoruz.
Alan kimliği-ID kısmı message_macrosda vermiş olduğum koddaki $user.Profile.custom_fields.xxx şu kısımdaki xxx yeridir. alan kimliğinde belirlediğimiz örn: pstbt yazısını xxx yerinede yazıyoruz.
Başlık: İstediğiniz başlığı girebilirsiniz
Gösterim: Kullanıcı bilgileri
Alan türü: Tek satırlı metin kutusu
Genel seçenekler: Bu kısmı resimdeki gibi ayarlıyoruz.

Sonuç üstde vermiş olduğum gibi arkaplanı kullanıcı istediği gibi haraketli/haraketsiz resimlerle süsleyebilir.
Ek olarak bu özelliği sadece vip ve farklı kullanıcı gruplarında göstermek isterseniz
Custom Fields Permissions bu eklentiyi kullanabilirsiniz.

ve son olarak eğer kullanıcı hiçbir arkaplan göstermemişse belirlediğiniz resim, resim belirlemişsede kendi belirlediği url için ise

Kod:

<xf:if is="{$user.Profile.custom_fields.xxx}">
    <div class="postbit_background" style="background: url({$user.Profile.custom_fields.xxx}) center center / cover no-repeat;">
    </div>
    <xf:else />
    <div class="postbit_background" style="background: url(https://siteniz.com/arkaplan-resmim.jpg) center center / cover no-repeat;">
    </div>
    </xf:if>

ile üstteki kodu değiştiriyorsunuz.

2. Olumlu / Olumsuz , Beğeni / Yorum gibi özelliği postbitde gösterme:

Admin CP > Görünüm ve diller > Temalarınız > "Temanız" - Şablonlar > message_macros dosyasını açıyoruz.

Kod:

<h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="name" /></h4>

altına

Kod:

<div class="d-flex align-items-center justify-content-center flex-wrap post-stats">
                <div class="post-stat">
                    <span class="largetext">
                        <strong style="color:green; text-align: center;">{$user.th_up_votes_qaforum|number}</strong>
                    </span>
                    <br>
                    <span class="x-smalltext text-uppercase" style="font-weight:bold; ">Olumlu</span>
                </div>
                <div class="post-stat">
                    <span class="largetext"><strong style="color:green; text-align: center;">{$user.th_down_votes_qaforum|number}</strong></span>
                    <br> <span class="x-smalltext text-uppercase" style="font-weight:bold;">Olumsuz</span>
                </div>
            </div>

yapıştırıyoruz.
Not:
$user.th_up_votes_qaforum|number ve $user.th_down_votes_qaforum|number alanları eğer [TH] Question and Answer Forums eklentisini kullanıyor iseniz buradakı olumlu ve olumsuz cevaplar için bir veri okuyor. Bu eklentiyi kullanmıyorsanız

Kod:

<div class="d-flex align-items-center justify-content-center flex-wrap post-stats">
                <div class="post-stat">
                    <span class="largetext">
                        <strong style="color:green; text-align: center;">{$user.af_as_award_total|number}</strong>
                    </span>
                    <br>
                    <span class="x-smalltext text-uppercase" style="font-weight:bold; ">Ödüller</span>
                </div>
                <div class="post-stat">
                    <span class="largetext"><strong style="color:green; text-align: center;">{$user.reaction_score|number}</strong></span>
                    <br> <span class="x-smalltext text-uppercase" style="font-weight:bold;">Beğeniler</span>
                </div>
            </div>

Kodunu yapıştırın.
Daha sonra extra.less şablonunu açarak

CSS:

.d-flex {
    display: flex;
}
.d-flex {
    position: relative;
    display: flex !important;
}
.post-stat {
    flex: 0 1 50%;
    margin-left: 16px;
    text-align: center;
}
.post-stats .post-stat:first-child {
    flex: 0 0 50%;
    border-right: 1px solid #2f3136;
}
.justify-content-center {
    justify-content: center;
    margin-right: 38px;
    padding-left: 15px;
}
@media (max-width: 650px) {
    .post-stat, .post-stats {
    display: none !important;
    }
}

yapıştırın.

3. Yönetici , Moderatör veya kendi belirlediğiniz gruplara postbit üzerinde onay (isteğe bağlı) ikon gösterme.

Admin CP > Görünüm ve diller > Temalarınız > "Temanız" - Şablonlar > message_macros dosyasını açıyoruz.

Kod:

<h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="name" /></h4>

altına

Kod:

<xf:if is="{{$user.isMemberOf(3)}}">
    <div class="verified_badge verified_admin tooltip2 tooltipstered" data-xf-init="tooltip" title="Yönetim"><i class="fa fa-check"></i></div>
        <xf:elseif is="{{$user.isMemberOf(4)}}"/>
    <div class="verified_badge verified_admin tooltip2 tooltipstered" data-xf-init="tooltip" title="Yönetim"><i class="fa fa-check"></i></div>
            <xf:elseif is="{{$user.isMemberOf(2)}}"/>
    <div class="verified_badge verified_uye tooltip2 tooltipstered" data-xf-init="tooltip" title="Onaylı Üye"><i class="fa fa-check"></i></div>
        </xf:if>

Extra.less şablonunada

CSS:

.verified_admin {
    background: rgb(207, 45, 45);
}
.verified_badge {
    position: absolute;
    width: 18px;
    height: 18px;
    text-align: center;
    top: -3px;
    left: 24px;
    cursor: pointer;
    line-height: 18px;
    font-size: 10px;
    color: rgb(255, 255, 255);
    z-index: 5;
    border-radius: 3px 3px 0px 0px;
}
.verified_badge::before {
    bottom: -15px;
    left: -1px;
    z-index: 0;
    border-width: 0px 10px 14px;
    border-color: transparent rgba(0, 0, 0, 0.1);
}
.verified_badge::after, .verified_badge::before {
    content: "";
    position: absolute;
    height: 0px;
    width: 0px;
    border-style: solid;
}
@media (max-width: 650px){
    .verified_badge {
        display:none !important;
    }
}
.verified_admin.verified_badge::after {
    border-color: transparent rgb(207, 45, 45);
}
.verified_badge::after {
    bottom: -12px;
    left: 0px;
    z-index: 3;
    border-width: 0px 9px 12px;
    border-color: transparent rgb(51,131,34);
}
.verified_uye {
    background: #348423;
}

ekliyoruz.

Bilgi: Bu postbit ayarları, css konumları bazı şablonlarda değişiklik, kaymalar ve farklı tür olumlar gösterebilir. Eğer css bilginiz varsa bunu kolaylıkla halledebilirsiniz. Eğer css bilginiz yok ise kayan / farklı görünen bölümlerin üzerine tarayıcıda sağ tıklayıp aşağıda açılan öğeyi denetleni tıklayarak sağ/alt açılan pencerede üst kısımda html alt kısımda css bilgileri yer alır. Oralarda boyutsa eğer width sağ ve ya sol ise
margin-left/right ve ya padding-left/right aşağı yukarı top bottom gibi terminlerin karşısındakı px değerleriyle oynayarak konumlandıra bilir ve hazır olan kodu kopyalayarak extra.less şablonunuzda yapıştırdığınız kodla değiştirebilirsiniz.

Tepkiler: mstrz, Arsenic, Zippo ve 24 diğerleri

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

XF 2.1 Eklenti Şık Postbit Yapımı

Hüseyn. ait diğer kaynakar

Bu kaynağı paylaş

Foruma hoş geldin 👋, Ziyaretçi

Gizliliğinize değer veriyoruz