من باب التغير و إضفاء الجمالية على منتداك، في هذا الدرس سنشرح طريقة عمل حواف على الصورة الرمزية عندما يكون المستخدم متصل و عندما غير متصل مثل ما هو موجود في...


أكرم أكرم

:: 🧩 عضو فعال 🧩 ::
★ نجم المنتدى ★
إنضم
7 نوفمبر 2023
المشاركات
152
مستوى التفاعل
1,445
النقاط
3,789
العمر
31
الإقامة
الجزائر
من باب التغير و إضفاء الجمالية على منتداك، في هذا الدرس سنشرح طريقة عمل حواف على الصورة الرمزية عندما يكون المستخدم متصل و عندما غير متصل مثل ما هو موجود في منصة Instagram.

صورة توضيحية للنتيجة :

Sans titre 5.jpg
ندخل لقالب [B]message_macros [/B] (لا تنسى أخذ نسخة منه قبل التعديل ) ثم نبحث عن الكود التالي :


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

ثم تقوم باستبداله بالكود التالي :
CSS:
     <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                <div class="xgt-avatar2">
                        <div class="xgt-avatar-border2">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>
                <xf:else />
                    <div class="xgt-avatar">
                        <div class="xgt-avatar-border">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>               
                </xf:if>

ثم بعدها نقوم بإضافة الكود التالي إلى قالب Extra.less





CSS:
/** متصل و غير متصل مثل انستجرام **/
.xgt-avatar{
    display: block;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0px 0px 10px 3px rgba(178, 34, 34, 0.38);

}

.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;
    }
}

.xgt-avatar2{
    display: block;
    background: linear-gradient(to right, green, yellow);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0px 0px 10px 3px rgba(4, 90, 15, 0.38);

}

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

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

وإلى الملتقى مع درس آخر
محبكم @أكرم أكرم 🌺
 

تدكر قول الله تعالى: { مَا يَلْفِظُ مِن قَوْلٍ إلا لَدَيْهِ رَقِيبٌ عَتِيدٌ }

المستخدمين الذين يشاهدون هذا الموضوع

مواضيع مماثلة
أعلى