Nasıl yapılır ? XF2 Profil çerçevesi

Kırmızı ok ile işaretlediğim profil çerçervesindeki koyu pembemsi çerçeve olayını XF2 için nasıl kullanabiliriz ?

Kardes bunu instagarama sor..

avatar.avatar--m kısmını kendine göre düzenleyecekisn avatar.avatar--s gibi diğer editlenecek yerler açıklama kısmında yazıyor

goztepeli70' Alıntı:

Kardes bunu instagarama sor..

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

Alakası yok bu çerçeve kodlarla yapılıyor. Sadece rengi değişik. eTiKeT™ - netr0n hocalar yardımcı olurlar muhtemelen

Yada bi babayiğit çıkar diye düşünüyorum

netr0n' Alıntı:

Şu adımları tek tek uygularsınız.

Kullandığınız temanızın message_macros şablonunu açın aşağıdaki kodu bulun.

HTML:

<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />

Aşağıdaki kod ile değiştirin.

HTML:

<div class="xgt-avatar">
    <div class="xgt-avatar-border">
        <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
    </div> 
</div>

Yine kullandığınız temanın extra.less şablonunu açın ve aşağıdaki kodları ekleyip kayıt edin.

Less:

.xgt-avatar{
    display: block;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    border-radius: 50%;
    padding: 4px;
}

.xgt-avatar-border{
    display: block;
    border: 4px solid #fff;
    border-radius: 50%;
}

@media (max-width: @xf-publicNavCollapseWidth)
{
.xgt-avatar{
    padding: 2px;
    } 
.xgt-avatar-border{
      border-width: 2px;
    }
}

Örnek resim:

Ekli dosyayı görüntüle 10790

Mobil görünümü

Ekli dosyayı görüntüle 10791

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

Hocam şahanesin eline sağlık

netr0n' Alıntı:

Şu adımları tek tek uygularsınız.

Kullandığınız temanızın message_macros şablonunu açın aşağıdaki kodu bulun.

HTML:

<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />

Aşağıdaki kod ile değiştirin.

HTML:

<div class="xgt-avatar">
    <div class="xgt-avatar-border">
        <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
    </div> 
</div>

Yine kullandığınız temanın extra.less şablonunu açın ve aşağıdaki kodları ekleyip kayıt edin.

Less:

.xgt-avatar{
    display: block;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    border-radius: 50%;
    padding: 4px;
}

.xgt-avatar-border{
    display: block;
    border: 4px solid #fff;
    border-radius: 50%;
}

@media (max-width: @xf-publicNavCollapseWidth)
{
.xgt-avatar{
    padding: 2px;
    } 
.xgt-avatar-border{
      border-width: 2px;
    }
}

Örnek resim:

Ekli dosyayı görüntüle 10790

Mobil görünümü

Ekli dosyayı görüntüle 10791

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

Hocam müthişsiniz peki birşey soracam eğer çevrimiçi ise bu renkgi koyu yeşil açık yeşil kaırışımı gibi yapabilirmiyiz?

netr0n' Alıntı:

Şu adımları tek tek uygularsınız.

Kullandığınız temanızın message_macros şablonunu açın aşağıdaki kodu bulun.

HTML:

<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />

Aşağıdaki kod ile değiştirin.

HTML:

<div class="xgt-avatar">
    <div class="xgt-avatar-border">
        <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
    </div> 
</div>

Yine kullandığınız temanın extra.less şablonunu açın ve aşağıdaki kodları ekleyip kayıt edin.

Less:

.xgt-avatar{
    display: block;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    border-radius: 50%;
    padding: 4px;
}

.xgt-avatar-border{
    display: block;
    border: 4px solid #fff;
    border-radius: 50%;
}

@media (max-width: @xf-publicNavCollapseWidth)
{
.xgt-avatar{
    padding: 2px;
    } 
.xgt-avatar-border{
      border-width: 2px;
    }
}

Örnek resim:

Ekli dosyayı görüntüle 10790

Mobil görünümü

Ekli dosyayı görüntüle 10791

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

Yatay postbit kullananlar da olmuyor sanırım hocam Tüm adımları uyguladım ama nafile

Başka bir XF üzerinden denediğim de Default tema da sorunsuz çalışıyor Gerçekten muhteşem oldu netr0n hocam vallahi cennetlik adamsın Eline sağlık.

Yukarıda arkadaşın dediği gibi bu sistemi çevrimiçi / çevrimdışı üyeler için kullanmak da güzel olurdu Bu renk çevrimiçi olarak kullanılsa

Çevrimdışı üyeler içinse, farklı bi renk yapılabilir