هيلبرنت | Helpernt - [ شرح ] : تعديل أزرار "اقتباس رد إعجاب"

السَلام عليكم ورحمة الله وبركاته
كيفكم جميعا إن شاء الله بخير
اليوم جايب لكم ثلاث تعديلات جميلة
للأزرار أقتباس/ رد / أعجبني
التعديلات كلها في قالب واحد
لذا سيكون الشرح بسيط
توافق الشرح: xf2.0 / xf2.1
والآن لنبدأ
نقوم بالدخول إلى الإدارة ثم المظهر ثم القوالب ونختار الستايل ال نريد التعديل عليه
ثم نبحث في القوالب عن القالب

كود:

Extra.less

ونقوم بوضع الأكواد التالية
الكود الأول
وهو يقوم بتعديل الأزرار رد , أقتباس , أعجبني
الكود

كود:

.actionBar-action--reply, .js-multiQuote, .actionBar-action--like, .actionBar-action--reaction {

         display:inline-block;

         background: rgb(71, 167, 235);

         color: rgb(255, 255, 255) !important;

         padding: 5px 12px 5px;

         line-height: 19px !important;

         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);

    }

.actionBar-action--reply:hover, .js-multiQuote:hover, .actionBar-action--like:hover, .actionBar-action--reaction:hover {

         background: rgb(65, 158, 224);

         color: rgb(255, 255, 255) !important;

         text-decoration: none;

         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);

    }

نتيجة الكود

https://e.top4top.net/p_1103c4cve1.jpg

الكود الثاني
وهو يقوم بتعديل زر إعجبني ويضيف عليه زوم
الكود

كود:

.actionBar-action--reply, .js-multiQuote, .actionBar-action--like, .actionBar-action--reaction {

         display:inline-block;

         background: rgb(71, 167, 235);

         color: rgb(255, 255, 255) !important;

         padding: 5px 12px 5px;

         line-height: 19px !important;

         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) !important;

         text-decoration: none;

         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);

    }

.actionBar-action--like:hover, .actionBar-action--reaction:hover  {

         background: rgb(65, 158, 224);

         color: rgb(255, 255, 255) !important;

         text-decoration: none;

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

نتيجة الكود

https://f.top4top.net/p_1103tihej2.jpg

الكود الثالث
يقوم بتعديل الأزرار
IP , حذف , التاريخ , تعديل , إبلاغ ,
الكود

كود:

.actionBar-action--report, .actionBar-action--edit, .actionBar-action--history, .actionBar-action--delete, .actionBar-action--spam, .actionBar-action--warn, .actionBar-action--ip {

         display:inline-block;

         background: rgb(71, 167, 235);

         color: rgb(255, 255, 255) !important;

         padding: 2px 6px 2px;

         line-height: 19px !important;

         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);

    }

.actionBar-action--report:hover, .actionBar-action--edit:hover, .actionBar-action--history:hover, .actionBar-action--delete:hover, .actionBar-action--spam:hover, .actionBar-action--warn:hover, .actionBar-action--ip:hover {

         background: rgb(65, 158, 224);

         color: rgb(255, 255, 255) !important;

         text-decoration: none;

         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);

    }

نتيجة الكود
https://a.top4top.net/p_1103hoj3f3.jpg

إنتها الموضوع
أتمنا التعديلات تعجبكم
وألقاكم في شروحات أخرى إن شاء الله
والسَلام عليكم ورحمة الله وبركاته