هيلبرنت | Helpernt

هيلبرنت | Helpernt (https://www.helpernt.com/vb/index.php)
-   ركن شروحات الزين فورو XENFORO (https://www.helpernt.com/vb/forumdisplay.php?f=94)
-   -   [ BBcode] : [xf-2]- تغيير شكل الأزرار [ الإعجاب - الإقتباس - الرد - تحرير ] (https://www.helpernt.com/vb/showthread.php?t=7745)

maaidni 08-25-2018 09:53 PM

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

النتيجة قبل:
https://i.imgur.com/r9dmo0u.png

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

https://i.imgur.com/63fROnc.gif

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

https://i.imgur.com/0exvBZ5.png

شرح التركيب:

بدون زوووم

في قالب:
كود:

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;    } }


MesterPerfect 08-25-2018 10:32 PM

رد: [xf-2]- تغيير شكل الأزرار [ الإعجاب - الإقتباس - الرد - تحرير ]
 
الله الله على شرحاتك الرائعة أخي
جزاك الله خيرا
تم التطبيق بنجاح

maaidni 08-26-2018 12:21 AM

رد: [xf-2]- تغيير شكل الأزرار [ الإعجاب - الإقتباس - الرد - تحرير ]
 
أهلا بك وشكرا على المتابعة

abo-karim 08-26-2018 08:19 PM

رد: [xf-2]- تغيير شكل الأزرار [ الإعجاب - الإقتباس - الرد - تحرير ]
 
يا اخى بتجيب الحجات الحلوه دى منين


10/10

samzad 08-26-2018 09:08 PM

رد: [xf-2]- تغيير شكل الأزرار [ الإعجاب - الإقتباس - الرد - تحرير ]
 
شرح مميز اخى سلمت يداك

وتم تقييم الموضوع اخى

ولكن اريد الطريقه للنسخه 1.5 اذا امكن

هل يكون نفس الكود بالقالب extra.css ???

maaidni 08-26-2018 10:13 PM

رد: [xf-2]- تغيير شكل الأزرار [ الإعجاب - الإقتباس - الرد - تحرير ]
 
اقتباس:

المشاركة الأصلية كتبت بواسطة samzad (المشاركة 22173)
شرح مميز اخى سلمت يداك

وتم تقييم الموضوع اخى

ولكن اريد الطريقه للنسخه 1.5 اذا امكن

هل يكون نفس الكود بالقالب extra.css ???

سأحاول أن أجد كود مشابه له في المستقبل

أسم العضو 08-27-2018 06:46 AM

رد: [xf-2]- تغيير شكل الأزرار [ الإعجاب - الإقتباس - الرد - تحرير ]
 
تعديل جميل للغاية ، بعد المعاينة يبدوا الموضوع لا يشتغل ع الاندرويد :) شكرا للجديد دائما
اراك لاحقا

for sat 08-27-2018 11:28 PM

رد: [xf-2]- تغيير شكل الأزرار [ الإعجاب - الإقتباس - الرد - تحرير ]
 
دائما تبهرنا بمواضيعك

samzad 09-03-2018 05:15 AM

رد: [xf-2]- تغيير شكل الأزرار [ الإعجاب - الإقتباس - الرد - تحرير ]
 
اقتباس:

المشاركة الأصلية كتبت بواسطة maaidni (المشاركة 22179)
سأحاول أن أجد كود مشابه له في المستقبل

وجدت الطريقه اخى ولكنها تحتاج الى حساب مدفوع

اى احد يستطيع المساعده لايبخل علينا

https://www.customizexf.com/threads/...hancements.48/


الساعة الآن 01:50 PM

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By Almuhajir