المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : الرسوم المتحركة مؤشر فى الموضوع


هيلبرنت
01-30-2016, 11:08 PM
الرسوم المتحركة مؤشر فى الموضوع

http://www.traidnt.net/vb/images/imgcache/2015/12/sTBplcQ-22267883-1.gif


[ الوصف ] : شرحنا اليوم هو اضافة الرسوم المتحركة مؤشر فى الموضوع احترافي
شرح سهل ولا يتطلب الكثير من الجهد
[ يتوافق مع اي اصدار ] : 1.4 / 1.5
[ موقع مقدم الشرح ] : تعديلات القوالب (http://arab3sy.com/forums/55/)
رابط الشرح الاصلي : https://xenforo.com/community/resour...tars-1-1.3464/ (https://xenforo.com/community/resources/animated-online-indicator-looks-best-on-rounded-avatars-1-1.3464/)

تابع معي
ادخل الى لوحة التحكم الخاصة بك
في قوالب -> Extra.css


ولصق التالية في اخر قالب Extra.css

.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 3px; background: #7fb900; border-color: #7fb900; border-radius: 50% } .messageUserBlock div.avatarHolder .onlineMarker:after { content: ''; position: absolute; width: 32px; height: 32px; margin: -9px 0 0 -9px; 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)} }