[ XF 2.1 ] إضافة أزرار ملونة : الاعجاب الاقتباس الرد ..

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
من خلال الكود المدرج في الاسفل ، يمكنك إضفاء جمالية على أدوات تحرير المواضيع و المشاركات ولتوضيح الصورة أكثر

هذا شكل الادوات قبل التعديل

28
وهذا شكل الادوات بعد التعديل

29
طبعا الكود سهل ويمكنك التلاعب به و بالوانه كما تريد ، فقط الكود يجمع كل الادوات و ان شاء الله في دروس لاحقة سيتم التعرف على طريقة التعديل على كل اداة و تلوينها بلون مغاير

ضع الكود كالعادة في قالب extra.less

CSS:
.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--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%);
    }

مودتي و احترامي :)
 

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
28 يناير 2019
المشاركات
2,716
مستوى التفاعل
2,177
النقاط
113
العمر
24
الإقامة
sohag, Egypt
الموقع الالكتروني
رائع جدا
جزاك الله خيرا أخي
 

S.N.A.K.E

:: الأعضاء ::
إنضم
23 فبراير 2019
المشاركات
150
مستوى التفاعل
51
النقاط
28
بارك الله فيك
تم التطبيق بس بالنسبه للي مركب هاك التعليقات على الردود راح يظهر ايقونه اضافه تعليق مختلفه
فكيف نضيف كودها مع الكود المرفق اعلاه ؟
وشكرا
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
بارك الله فيك
تم التطبيق بس بالنسبه للي مركب هاك التعليقات على الردود راح يظهر ايقونه اضافه تعليق مختلفه
فكيف نضيف كودها مع الكود المرفق اعلاه ؟
وشكرا
وفيك بارك الله
يكفي ان تعرف كود اللون الخاص بالزر و تعتمده على بقاقي الازرار
 

S.N.A.K.E

:: الأعضاء ::
إنضم
23 فبراير 2019
المشاركات
150
مستوى التفاعل
51
النقاط
28
وفيك بارك الله
يكفي ان تعرف كود اللون الخاص بالزر و تعتمده على بقاقي الازرار
ما فيه لون وضعه يكون مثل وضع الازرار الباقيه قبل ان نحط كود التعديل عليهم
الون انا نفسه راح احطه اعرف بس المقصد مع الكود التالي او مكانه شنو احط الي يرمز للتعليقات
كود:
.actionBar-action--reply, .js-multiQuote, .actionBar-action--like, .actionBar-action--reaction {
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
معذرة أخي @S.N.A.K.E
ممكن ترسلي رابط موقعك على الخاص و كذا صورة للاضافة التي تستخدم لانه ليس لدي فكرة عنها او ارسل لي رابط الاضافة لتجربتها
 

Wolf Knight

عضو معروف
[ عُملاء زين العَربية ]
إنضم
28 يناير 2019
المشاركات
505
مستوى التفاعل
312
النقاط
63
تسلم ايدك على الشرح المميز
لك كل الود ..
 

S.N.A.K.E

:: الأعضاء ::
إنضم
23 فبراير 2019
المشاركات
150
مستوى التفاعل
51
النقاط
28
معذرة أخي @S.N.A.K.E
ممكن ترسلي رابط موقعك على الخاص و كذا صورة للاضافة التي تستخدم لانه ليس لدي فكرة عنها او ارسل لي رابط الاضافة لتجربتها
تم الارسال الاضافات لك
 

ireepaircom

عضو فعال
[ عُملاء زين العَربية ]
إنضم
12 مارس 2020
المشاركات
163
مستوى التفاعل
36
النقاط
28
ممكن تظبيط زر أعجبنى زى ما هو بالمنتدى هنا
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
ممكن تظبيط زر أعجبنى زى ما هو بالمنتدى هنا

اذا كنت تقصد اسم زر like إلى أعجبني و كذا الأزرار الاخرى فيمكنك ذلك من خلال

لوحة تحكم المنتدى --- > المحتوى ---- > التفاعلات ---- > ثم اضغط على الزر الذي تود التعديل عليه وعدل بما تراه مناسب لك
 

ireepaircom

عضو فعال
[ عُملاء زين العَربية ]
إنضم
12 مارس 2020
المشاركات
163
مستوى التفاعل
36
النقاط
28
اذا كنت تقصد اسم زر like إلى أعجبني و كذا الأزرار الاخرى فيمكنك ذلك من خلال

لوحة تحكم المنتدى --- > المحتوى ---- > التفاعلات ---- > ثم اضغط على الزر الذي تود التعديل عليه وعدل بما تراه مناسب لك

أحسنت بارك الله فيك
 

Prof Jamal

:: الأعضاء ::
إنضم
8 أبريل 2020
المشاركات
19
مستوى التفاعل
8
النقاط
3
الموقع الالكتروني
من خلال الكود المدرج في الاسفل ، يمكنك إضفاء جمالية على أدوات تحرير المواضيع و المشاركات ولتوضيح الصورة أكثر

هذا شكل الادوات قبل التعديل

وهذا شكل الادوات بعد التعديل

طبعا الكود سهل ويمكنك التلاعب به و بالوانه كما تريد ، فقط الكود يجمع كل الادوات و ان شاء الله في دروس لاحقة سيتم التعرف على طريقة التعديل على كل اداة و تلوينها بلون مغاير

ضع الكود كالعادة في قالب extra.less

CSS:
.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--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%);
    }

مودتي و احترامي :)
للايف لم يشتغل معي الكود اخر نسخة الزينفورو!!!
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
للايف لم يشتغل معي الكود اخر نسخة الزينفورو!!!

الكود يعمل بدون مشاكل
لا تنسى اختيار الستايل الذي تريد تطبيق الكود عليه
 

al-jod

:: الأعضاء ::
إنضم
10 نوفمبر 2019
المشاركات
140
مستوى التفاعل
44
النقاط
28
العمر
42
الإقامة
فلسطين
المنتدى بفضل الله اولا ثما فضلكم يزداد المنتدى اناقة
 

muedx.com

:: الأعضاء ::
إنضم
27 مايو 2022
المشاركات
25
مستوى التفاعل
1
النقاط
3
الإقامة
muedx.com
الموقع الالكتروني
من خلال الكود المدرج في الاسفل ، يمكنك إضفاء جمالية على أدوات تحرير المواضيع و المشاركات ولتوضيح الصورة أكثر

هذا شكل الادوات قبل التعديل

وهذا شكل الادوات بعد التعديل

طبعا الكود سهل ويمكنك التلاعب به و بالوانه كما تريد ، فقط الكود يجمع كل الادوات و ان شاء الله في دروس لاحقة سيتم التعرف على طريقة التعديل على كل اداة و تلوينها بلون مغاير

ضع الكود كالعادة في قالب extra.less

CSS:
.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--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%);
    }

مودتي و احترامي :)
جزأك الله خيراً ياأخي الكريم
 

جميع المواضيع والمشاركات والتعليقات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

الأعضاء المتصلون

لا يوجد أعضاء متصلون الآن.

إحصائيات المنتدى

المواضيع
2,082
المشاركات
21,949
الأعضاء
977
آخر عضو مسجل
rfab
أعلى