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

الردود
4

المشاهدات
1426
MesterPerfect
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • MesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to behold

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

المشاركات
2,822

+التقييم
199

تاريخ التسجيل
Jan 2018

الاقامة
sohag, Egypt

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

رقم العضوية
1529
01-09-2019, 12:15 AM
المشاركة 1
01-09-2019, 12:15 AM
المشاركة 1
افتراضي تعديل أزرار "اقتباس رد إعجاب"
السَلام عليكم ورحمة الله وبركاته
كيفكم جميعا إن شاء الله بخير
اليوم جايب لكم ثلاث تعديلات جميلة
للأزرار أقتباس/ رد / أعجبني
التعديلات كلها في قالب واحد
لذا سيكون الشرح بسيط
توافق الشرح: 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%);
    }
نتيجة الكود



الكود الثاني
وهو يقوم بتعديل زر إعجبني ويضيف عليه زوم
الكود
كود:
.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; } }
نتيجة الكود



الكود الثالث
يقوم بتعديل الأزرار
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%);
    }
نتيجة الكود


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