عرض مشاركة واحدة
احصائياتى

الردود
8

المشاهدات
1498
maaidni
.:: معرب ومطور ومشرف ::.
قسم منتديات XenForo
  • maaidni is a splendid one to beholdmaaidni is a splendid one to beholdmaaidni is a splendid one to beholdmaaidni is a splendid one to beholdmaaidni is a splendid one to beholdmaaidni is a splendid one to beholdmaaidni is a splendid one to behold

  • maaidni غير متواجد حالياً

المشاركات
998

+التقييم
187

تاريخ التسجيل
Oct 2015

الاقامة
المغرب

نظام التشغيل
windows 8.1

رقم العضوية
605
08-25-2018, 09:53 PM
المشاركة 1
08-25-2018, 09:53 PM
المشاركة 1
افتراضي [xf-2]- تغيير شكل الأزرار [ الإعجاب - الإقتباس - الرد - تحرير ]
السلام عليكم ورحمه الله بركانه
اليوم سنقوم بشرح طريقة تغيير شكل الأزرار [ الإعجاب - الإقتباس - الرد - تحرير ]
[ اسم الشرح ] : Like, Quote, Reply Button Edit
[ التوافق ] : يتوافق مع كل الاصدارات الزين فورو الجيل الثانى XF2.0
[ مقدم الشرح ] : محمد معيدني لمعهد هيلبرنت

النتيجة قبل:


النتيجة مع الزوم:



النتيجة بدون الزوم:



شرح التركيب:

بدون زوووم

في قالب:
كود:
extra.less
كود:
.actionBar-action--reply, .js-multiQuote, .actionBar-action--like
    {
         display:inline-block;
         background: rgb(71, 167, 235);
         color: rgb(255, 255, 255);
         padding: 4px 9px;
         line-height: 19px;
         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);
    }

.actionBar-action--reply:hover, .js-multiQuote:hover, .actionBar-action--like:hover {
         background: rgb(65, 158, 224);
         color: rgb(255, 255, 255);
         text-decoration: none;
         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
    }
مع الزوووووم

كود:
.actionBar-action--reply, .js-multiQuote, .actionBar-action--like
    {
         display:inline-block;
         background: rgb(71, 167, 235);
         color: rgb(255, 255, 255);
         padding: 4px 9px;
         line-height: 19px;
         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);
    }

.actionBar-action--reply:hover, .js-multiQuote:hover {
         background: rgb(65, 158, 224);
         color: rgb(255, 255, 255);
         text-decoration: none;
         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
    }

.actionBar-action--like:hover  {
        background: rgb(65, 158, 224);
        color: rgb(255, 255, 255);
        text-decoration: none;
        transition: all .4s ease;
        -webkit-transition: all .4s ease;
        background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
        transform: scale(1.25);
    }

@media (max-width: 800px) {
.actionBar-action--like:hover {
transform: none;     } }