أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
من باب التغير و إضفاء الجمالية على منتداك، في هذا الدرس سنشرح طريقة عمل حواف على الصورة الرمزية عندما يكون المستخدم متصل و عندما غير متصل مثل ما هو موجود في منصة 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
المشاركات
298
مستوى التفاعل
87
النقاط
28
الموقع الالكتروني
بارك الله فيك أخي محمد
التأثير رائع جدا مودرن
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
وفيك بارك أخي كمال
نورت الموضوع بمرورك
 

Mahmoud Hamed

:: الأعضاء ::
إنضم
17 فبراير 2021
المشاركات
161
مستوى التفاعل
40
النقاط
28
الإقامة
مصر
الموقع الالكتروني
فكرة ممتازة

تمت التجربة و تعمل بشكل جيد

شكراً لك
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
3,370
مستوى التفاعل
2,917
النقاط
113
الإقامة
K.S.A
بارك الله فيك اخوي ابو غيث على هالتعديل الاكثر من رائع

احترامي وتقديري
اخوك
شقاوي
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
الله يبارك في عمرك حبيبي تركي
للامانة الكود فقط منقول فاعجبتني الطريقة واحببت مشاركتها معكم 🤫
 

فراس الحديثي

:: الأعضاء ::
إنضم
8 يوليو 2021
المشاركات
5
مستوى التفاعل
1
النقاط
3
عاشت ايدك رهيبه
 

المرفقات

  • Screenshot_20210708_171402.jpg
    Screenshot_20210708_171402.jpg
    164.9 KB · المشاهدات: 3

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

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

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

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

المواضيع
2,082
المشاركات
21,949
الأعضاء
977
آخر عضو مسجل
rfab
أعلى