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

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

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
3,726
مستوى التفاعل
2,299
النقاط
113
العمر
37
الإقامة
المغرب
الموقع الالكتروني
من خلال الكود المدرج في الاسفل ، يمكنك إضفاء جمالية على أدوات تحرير المواضيع و المشاركات ولتوضيح الصورة أكثر

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

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

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
1,179
مستوى التفاعل
918
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
رائع جدا
جزاك الله خيرا أخي
 

S.N.A.K.E

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

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
3,726
مستوى التفاعل
2,299
النقاط
113
العمر
37
الإقامة
المغرب
الموقع الالكتروني
بارك الله فيك
تم التطبيق بس بالنسبه للي مركب هاك التعليقات على الردود راح يظهر ايقونه اضافه تعليق مختلفه
فكيف نضيف كودها مع الكود المرفق اعلاه ؟
وشكرا
وفيك بارك الله
يكفي ان تعرف كود اللون الخاص بالزر و تعتمده على بقاقي الازرار
 

S.N.A.K.E

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

XenArabia

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

Wolf Knight

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

S.N.A.K.E

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

ireepaircom

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

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
3,726
مستوى التفاعل
2,299
النقاط
113
العمر
37
الإقامة
المغرب
الموقع الالكتروني
ممكن تظبيط زر أعجبنى زى ما هو بالمنتدى هنا

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

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

ireepaircom

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

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

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

Prof Jamal

:: الأعضاء ::
إنضم
8 أبريل 2020
المشاركات
10
مستوى التفاعل
4
النقاط
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%);
    }

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

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
3,726
مستوى التفاعل
2,299
النقاط
113
العمر
37
الإقامة
المغرب
الموقع الالكتروني
للايف لم يشتغل معي الكود اخر نسخة الزينفورو!!!

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

al-jod

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

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

التعليقات المنشورة لا تعبر عن رأي معهد زين العربية ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

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

المواضيع
1,258
المشاركات
11,786
الأعضاء
479
آخر عضو مسجل
newsybest
أعلى