XenForo Animasyonlu yanıp sönen çevrimiçi ve çevrimdışı çerçevesi

Yönetici

HAN

WFN Moderatör

1/3

4 Eyl 2025

#1

XenForo Animasyonlu yanıp sönen çevrimiçi ve çevrimdışı çerçevesi

Forumunuza, animasyonlu çevrimiçi ve çevrimdışı çerçevesi ekleyin. Dilerseniz renk tercihlerinizi kendinize göre ayarlayabilirsiniz.

Description:
Add animated online and offline frames to your forum.

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

HTML:

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

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

HTML:

<xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                <div class="trxf-avatar2">
                        <div class="trxf-avatar-border2">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>
                <xf:else />
                    <div class="trxf-avatar">
                        <div class="trxf-avatar-border">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>          
                </xf:if>

Aşağıdaki kodu, temanızın extra.less şablonuna ekleyin:

CSS:

.trxf-avatar-border {
display: block;
border-radius: 50%;
border: 6px solid rgba(255, 0, 0, 0.7); /* Kırmızı */
animation: borderBlinkRed 2s infinite alternate;}

.trxf-avatar-border2 {
display: block;
border-radius: 50%;
border: 6px solid rgba(0, 255, 0, 0.7); /* Yeşil */
animation: borderBlinkGreen 2s infinite alternate;}

@keyframes borderBlinkRed {
0% { border-color: rgba(255, 0, 0, 0.7); }
100% { border-color: rgba(255, 0, 0, 0.2); }}

@keyframes borderBlinkGreen {
0% { border-color: rgba(0, 255, 0, 0.7);}
100% {border-color: rgba(0, 255, 0, 0.2);}}

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