Nasıl yapılır ? Kullanıcı avatar çerçevesi

Hüseyn. · 10 Şub 2020

Avatarın etrafındakı çerçevenin arkasına (yani avatarın arkasına)

böyle bir resim eklemek istiyorum. Divlere verdiğim classla background-image verdiğimde sıkıntı olmuyor ancak width ve ya height verdiğimde resim değil komple avatar bozuluyor ancak divler ve class-lar farklı. Bunu sorunsuz şekilde avatarın arkasına nasıl koyabilirim?
Yardımcı olacak arkadaşlar varsa sitenin adresini atabilirim

eTiKeT™ · 10 Şub 2020

Temanızda message_macros isimli şablonu açın ve bulun;

Kod:

        <div class="message-avatar {{ ($xf.options.showMessageOnlineStatus && $user && $user.isOnline()) ? 'message-avatar--online' : '' }}">
            <div class="message-avatar-wrapper">
                <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                    <span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>
                </xf:if>
            </div>
        </div>

Değiştirin;

Kod:

    <div class="xgt-Avatar--ap">
        <div class="message-avatar {{ ($xf.options.showMessageOnlineStatus && $user && $user.isOnline()) ? 'message-avatar--online' : '' }}">
            <div class="message-avatar-wrapper">
                <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                    <span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>
                </xf:if>
            </div>
        </div>
    </div>

Aynı temada extra.less isimli şablonu açın ve en üstüne ekleyin;

message_macros

CSS:

.xgt-Avatar--ap
{
    color: REd;
    background: url(https://xenforo.gen.tr/attachments/1-png.9823/);
    background-repeat: no-repeat;
    background-size: 150px;
    padding: 20px;
   
    @media (max-width: (@xf-responsiveMedium))
    {
        padding: 0px;
        background: none;
    }
   
}

.message-cell.message-cell--user 
{
    flex: 0 0 170px;
}

ofnopee · 10 Şub 2020

Güzel oluyor ama bana pek yaşımadı .D çalışıyor teşekkürler abi

Hüseyn. · 10 Şub 2020

eTiKeT™' Alıntı:

Temanızda message_macros isimli şablonu açın ve bulun;

Kod:

        <div class="message-avatar {{ ($xf.options.showMessageOnlineStatus && $user && $user.isOnline()) ? 'message-avatar--online' : '' }}">
            <div class="message-avatar-wrapper">
                <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                    <span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>
                </xf:if>
            </div>
        </div>

Değiştirin;

Kod:

    <div class="xgt-Avatar--ap">
        <div class="message-avatar {{ ($xf.options.showMessageOnlineStatus && $user && $user.isOnline()) ? 'message-avatar--online' : '' }}">
            <div class="message-avatar-wrapper">
                <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                    <span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>
                </xf:if>
            </div>
        </div>
    </div>

Aynı temada extra.less isimli şablonu açın ve en üstüne ekleyin;

message_macros

CSS:

.xgt-Avatar--ap
{
    color: REd;
    background: url(https://xenforo.gen.tr/attachments/1-png.9823/);
    background-repeat: no-repeat;
    background-size: 150px;
    padding: 20px;
  
    @media (max-width: (@xf-responsiveMedium))
    {
        padding: 0px;
        background: none;
    }
  
}

.message-cell.message-cell--user
{
    flex: 0 0 170px;
}

Ekli dosyayı görüntüle 9834

Elinize sağlık inanılmaz güzel oldu. Extra.less şablonunda birde css in sadece belirli gruplara görünmesini sağlamak için bir kod vardı yanlış hatırlamıyorumsa o nasıldı hocam ?

mora55 · 31 May 2020

eTiKeT™ hocam aşağıdaki extra_less e eklenen kod tum avatarlara çerçeve ekliyor

CSS:

.avatar {border:2px solid green;}

bu çerçeve sadece online kullanıcılarda gözükse... nasıl mümkün olabilir?

VasY · 1 Haz 2020

ben direk tam boy vbulletin avatarı yaptım.. ps ciler için iyi iş

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

Nasıl yapılır ? Kullanıcı avatar çerçevesi

Hüseyn.

echo {XenGenTr}