XF 2.1 Postbit'e Özel Alan Ekleme

mkucuksari' Alıntı:

Bu arada @MusaPekel az önce fark ettim. Bu işlemi yani Postbit alanına yeni tanımlan özel alanı göstermek için "message_macros " macrosuna bir şey ilave etmene gerek yok. "Tema özelliklerinden" yapman yeterli.

Tema Özellikleri -> Mesajlar -> Ayarlar -> Mesaj alanı kullanıcı bilgileri: Özel alanlar

Genişletmek için tıkla ...

MusaPekel' Alıntı:

Merhaba,

Xenforo 2.x sürümlerinde ayrıca çalışan özel alanlar ekliyoruz.

Not : Video'lu Anlatım Yakında Gelicektir.


1. Adım

Kullanıcılar > Özel Kullanıcı > Alan Ekle kısmına Giriyoruz. Aşağıda Ekran Görüntüsünde kendiniz yapacağınız alana göre düzenleyiniz.
Ekli dosyayı görüntüle 7679

Ekli dosyayı görüntüle 7680
Ekli dosyayı görüntüle 7681
2. Adım

Görünüm ve Diller > Şablonlar > message_macros şablonuna girdikten sonra

PHP:

<xf:if is="$extras.website && $user.Profile.website">
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('website') }}</dt>
                            <dd><a href="{$user.Profile.website}" rel="nofollow" target="_blank">{$user.Profile.website|url('host', phrase('visit_site'))}</a></dd>
                        </dl>
                    </xf:if>

Hemen Altına Aşağıda Verilen kodumuzu ekliyoruz.

PHP:

<xf:if is="$extras.message_count">
                        <dl class="namesblock maveracheats maveracheats--justified" >
                            <dt style="color:white;">İsim</dt>
                            <dd style="color:white;">{$user.Profile.custom_fields.isim}</dd>
                        </dl>
                    </xf:if>

{$user.Profile.custom_fields."isim"} tırnak içerisinde alınan " Alan kimliği-ID " yazdığınız ıd yazılcaktır.

3. Adım

Görünüm ve Diller > Şablonlar > extra.less şablonuna giriyoruz ve altta verdiğim css kısmını ekliyoruz.

CSS:

.maveracheats {
    color: #4d5460;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 11px;
    padding: 6px 9px;
    margin-top: 2px;
    margin: 0;
    overflow: hidden;
}

.maveracheats
{

    &.maveracheats--plainLabel
    {
        > dt
        {
            color: inherit;
        }
    }

    &.maveracheats--spaced + .maveracheats
    {
        margin-top: @xf-paddingMedium;
    }

    &.maveracheats--noColon
    {
        > dt
        {
            &:after
            {
                content: "";
            }
        }
    }

    > dt
    {
        padding: 0;
        margin: 0;
        color: @xf-textColorMuted;

        .m-appendColon();
    }

    > dd
    {
        padding: 0;
        margin: 0;
    }

    &.maveracheats--inline
    {
        display: inline;

        > dt,
        > dd
        {
            display: inline;
        }
    }

    &.maveracheats--columns
    {
        display: table;
        table-layout: fixed;
        width: 100%;

        > dt,
        > dd
        {
            display: table-cell;
        }

        > dt
        {
            width: 50%;
            padding-right: @xf-paddingMedium;
        }

        &.maveracheats--fixedSmall > dt
        {
            width: 200px;
        }
        &.maveracheats--fluidSmall > dt
        {
            width: 25%;
        }
        &.maveracheats--fluidHuge > dt
        {
            width: 70%;
        }

        @media (max-width: 500px)
        {
            display: block;

            > dt,
            > dd
            {
                display: block;
            }

            &.maveracheats > dt // the .maveracheats repetition is to increase specificity to override all fixed/fluid options
            {
                width: auto;
                padding-right: 0;
            }

            & + .maveracheats
            {
                margin-top: @xf-paddingMedium;
            }
        }
    }

    &.maveracheats--justified
    {
        .m-clearFix();

        > dt
        {
            float: left;
            max-width: 100%;
            margin-right: @xf-paddingMedium;
        }

        > dd
        {
            float: right;
            text-align: right;
            max-width: 100%;
        }
    }

    &.maveracheats--rows
    {
        display: inline-table;
        margin-right: @xf-paddingMedium;

        &.maveracheats--rows--centered
        {
            > dt,
            > dd
            {
                text-align: center;
            }
        }

        &:last-of-type
        {
            margin-right: 0;
        }

        > dt
        {
            display: table-row;
            font-size: 80%;

            &:after
            {
                content: '';
                display: none;
            }
        }

        > dd
        {
            display: table-row;
        }
    }
}

.maveracheatsWrapper
{
    &.maveracheatsWrapper--spaced
    {
        .maveracheats
        {
            margin-top: @xf-paddingMedium;

            &:first-child
            {
                margin-top: 0;
            }
        }
    }
}

.maveracheatsJustifier
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    margin-right: -5px;
    margin-bottom: -5px;

    .maveracheats.maveracheats--rows
    {
        margin-right: 5px;
        margin-bottom: 5px;
    }
}

/* Yeni PostBit Çizgileri */

.namesblock  {

    margin-top:2px;
    box-shadow:0px 3px #5d6677, 0px 4px 5px rgba(0,0,0,0.3);
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
        background:#4d5460;
        text-align:left;
        padding:0 10px;
        color:#fff;
        position:relative;
        text-decoration:none;
        height:26px;
        font-family:Arial;
        transition:all 0.3s ease;
        padding-left:10px;
        padding-right:10px;
        padding-top:6px;
}

Sonuç

Ekli dosyayı görüntüle 7683

​

Genişletmek için tıkla ...

Screenshot

Captured with Lightshot

prnt.sc

berkayakinci' Alıntı:

Merhaba, paylaşım için teşekkürler.

Bende sayfa tamamıyla kaydı, nedeni ne olabilir ?

Screenshot

Captured with Lightshot

prnt.sc

Genişletmek için tıkla ...

MusaPekel' Alıntı:

Merhaba,

bu tür hatalar eksik div kullanmaktan sonuçlanabilir. Site Adresinizi paylaşarak daha detaylı bir destek sağlıyabilirim.

Genişletmek için tıkla ...

Charismax' Alıntı:

posbiite konuları bul mesajları bul eklense ya

Genişletmek için tıkla ...

<xf:if is="$extras.custom_fields">
                        <xf:macro template="custom_fields_macros" name="custom_fields_values"
                            arg-type="users"
                            arg-group="personal"
                            arg-set="{$user.Profile.custom_fields}"
                            arg-additionalFilters="{{ ['message'] }}"
                            arg-valueClass="pairs pairs--justified" />
                        <xf:if is="$user.canViewIdentities()">
                            <xf:macro template="custom_fields_macros" name="custom_fields_view"
                                arg-type="users"
                                arg-group="contact"
                                arg-set="{$user.Profile.custom_fields}"
                                arg-additionalFilters="{{ ['message'] }}"
                                arg-valueClass="pairs pairs--justified" />
                        </xf:if>
                    </xf:if>

<div class="recent-content">
                        
                    <i class="fa--xf far fa-envelope" aria-hidden="true"></i>
                    <a href="{{ link('members/recent-content', $user) }}"
                    rel="nofollow"
                    class="tabs-tab"
                    id="recent-content"
                    role="tab"> konuları bul </a>
                        </div>

@keyframes recent {
  0% {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }
  8% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }
  10% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }
  18% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  20% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  28% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }
  30% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }
  38% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  40% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  48% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }
  50% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }
}

.recent-content {
    display: inline-block;
    color: #ffffff;
    background: #47a7eb;
    min-width: 80px;
    border-color: #5eb2ed #309ce8 #309ce8 #5eb2ed;
    width: 100%;
    padding: 5px 0;
    margin: 0 auto;
    font-size: 10px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
}
.recent-content:hover i {
    animation: recent 2.5s ease infinite;
}