شرح اضافة اطار مُتصل او غير متصل على صورة المستخدم

افتح قالب message_macros للقالب الذي تستخدمه وابحث عن الكود التالي:

بحث عن:

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

استبدل بـ:

<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>

أضف الكود التالي إلى قالب extra.less للقالب الخاص بك:

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

.trxf-avatar-border2 {
display: block;
border-radius: 50%;
border: 6px solid rgba(0, 255, 0, 0.7); /* أخضر */
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; }
}

حقوق النشر - كود نت