[ XF 2.2 ] - متصل / غير متصل مثل انستجرام - معهد زين العربية
تجارتنا منصة تجارية تساهم في تطور التجارة العالمية والاقتصاد
موقع حلبية الموقع الاول في العالم العربي لللمعلومات الصحيحة
موقع كيف افضل موقع للرد على جميع اسئلتك موقع كيف بوابتك للمستقبل

أبو غَيْث

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,086
مستوى التفاعل
3,140
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني
من باب التغير و إضفاء الجمالية على منتداك، في هذا الدرس سنشرح طريقة عمل حواف على الصورة الرمزية عندما يكون المستخدم متصل و عندما غير متصل مثل ما هو موجود في منصة Instagram.

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

Offline-Online-Like-Instegram.png


ندخل لقالب message_macros (لا تنسى أخذ نسخة منه قبل التعديل ) ثم نبحث عن الكود التالي :

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

ثم تقوم باستبداله بالكود التالي :

كود:
     <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;
    }
}
/**/


وإلى الملتقى مع درس آخر
محبكم أبو غَيْث 💓
 

Fallag

:: الأعضاء ::
[ عُملاء زين العَربية ]
إنضم
20 مارس 2019
المشاركات
244
مستوى التفاعل
68
النقاط
28
الموقع الالكتروني
بارك الله فيك أخي محمد
التأثير رائع جدا مودرن
 

أبو غَيْث

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,086
مستوى التفاعل
3,140
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني

أبو غَيْث

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,086
مستوى التفاعل
3,140
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني
وفيك بارك أخي كمال
نورت الموضوع بمرورك
 

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .

التعليقات المنشورة لا تعبر عن رأي معهد زين العربية ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

الأعضاء المتصلون

لا يوجد أعضاء متصلون الآن.

إحصائيات المنتدى

المواضيع
1,543
المشاركات
16,434
الأعضاء
565
آخر عضو مسجل
joou
أعلى