شرح ادراج صورة متحركة لالاعضاء المتصلين والغير متصلين مثل الموجودة هنا

ecko

:: عضو ::
إنضم
24 أبريل 2014
المشاركات
165
الإعجابات
123
العمر
31
#1
ecko قام بنشر منتج جديد:

شرح ادراج صورة متحركة لالاعضاء المتصلين والغير متصلين مثل الموجودة هنا - شرح ادراج صورة متحركة لالاعضاء المتصلين والغير متصلين مثل الموجودة هنا بمجموعة الدعم العربى

شرح ادراج صورة متحركة لالاعضاء المتصلين والغير متصلين مثل الموجودة هنا بمجموعة الدعم العربى

مثال
مشاهدة المرفق 1525

والشرح كالاتى :- بسم الله الرحمن الرحيم

اولا نتجة للوحة التحكم ثم المظهر ثم الاستايلات ثم نختار القوالب الخاصة بالاستايل الى نريد ان نضيف لها فواصل ثم نبحث عن قالب بالاسم EXTRA.css وبعد فتح القالب

نضيف الكود التالى

HTML:
.messageUserBlock div.avatarHolder .onlineMarker
{
    display: inline-block;
    width: 16px;
    height: 16px;
/*    margin: 9px 0 0 9px; <-...
قراءة المزيد حول هذا المنتج...
 
إنضم
31 مايو 2014
المشاركات
83
الإعجابات
1
العمر
27
#5
السلام عليكم اخي عندي مشكلة هي تظهر عند الاعضاء المتصلين فقط لكن النقطة الحمراء لاتظهر عند الاعضاء غير المتصلين
upload_2014-11-5_16-32-30.png

هكذا الان متصل
لكن عندما اكون غير متصل لاتظهر
upload_2014-11-5_16-33-25.png
 

elite91

:: عضو جديد ::
إنضم
25 نوفمبر 2014
المشاركات
6
الإعجابات
3
العمر
26
#6
fouad boutiah
اتفضل هذا الكود مظبوط للاونلاين بخلفية بيضا للايقونة افضل من الموجود هنا

كود:
.messageUserBlock div.avatarHolder .onlineMarker
{
    display: inline-block;
    width: 16px;
    height: 16px;
/*    margin: 9px 0 0 9px; <- if you'd like it on top left */
    margin: 79px 0 0 79px;
    background: #fff;
    border: none!important;
    border-radius: 50%!important
}
 
.messageUserBlock div.avatarHolder .onlineMarker:before
{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 3px 0 0 -5px;
    background: #7fb900;
    border-color: #7fb900;
    border-radius: 50%
}

.messageUserBlock div.avatarHolder .onlineMarker:after
{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -9px 0 0 -17px;
    border: 1px solid #7fb900;
    border-radius: 50%;
    box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
    -webkit-transform: scale(0);
    -webkit-animation: online 2.5s ease-in-out infinite;
    animation: online 2.5s ease-in-out infinite
}

@-webkit-keyframes online
{
      0% {opacity: 1;-webkit-transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;-webkit-transform: scale(1)}
}

@keyframes online
{
      0% {opacity: 1;transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;transform: scale(1)}
}
 

المرفقات

Turkialawlqy

xDeveloper
طاقم الإدارة
إنضم
1 فبراير 2012
المشاركات
1,921
الإعجابات
1,506
#9
Turkialawlqy معلش بقى يا استاذ تركى ممكن كود الاوفلاين ؟ :)
تآمر أمر أخي
توجة للقالب message_user_info
ابحث عن
HTML:
<span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-7" data-offsetY="-8"></span>
استبدلة بـ
HTML:
<xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-7" data-offsetY="-8"></span>
            <xen:else />
            <span class="Tooltip offlineMarker" title="غير متصل" data-offsetX="-7" data-offsetY="-8"></span>
            </xen:if>
تحيتي
 
التعديل الأخير: