|
[شرح] : شرح استبدال ازرار الاستايل بالكامل بكود css كما بمنتدى نقطة تطوير http://upload.traidnt.net/upfiles/3WU65347.jpg الموضوع : طريقة تحويل صور (ايقونات) ازرار الاستايل الى كود css ماهى الفائدة من التغيير : يتيح لك القدرة على تغيير لون الايقونة ونوع الخط وحجمة واشياء اخرى اسباب التغيير من صورة الى كود : كثرة طلب الاعضاء علية كما بهذا الموضوع http://www.traidnt.net/vb/traidnt2384655/ http://upload.traidnt.net/upfiles/LDC98190.jpg الشرح : اولا : ندخل الى لوحة تحكم المنتدى الرئيسية ومنها / الإستايلات والقوالب / البحث فى القوالب اختار الاستايل المراد التطبيق عليه . ثانيا : وفى خانة البحث نكتب FORUMDISPLAY كما بالصورة http://upload.traidnt.net/upfiles/BtJ62645.png http://upload.traidnt.net/upfiles/LDC98190.jpg ثالثا : نقوم باخذ نسخة احتاطية من هذا القالب اولا حماية لك ثم نقوم بالبحث عن رمز Code: http://vb.ma7room.com/$stylevar[imgd.../newthread.gif ستجده مرتيتن نستبداله بى رمز Code: ثم تقم بحفظ القالب http://upload.traidnt.net/upfiles/LDC98190.jpg رابعاا : فى خانة البحث نكتب SHOWTHREAD نقوم باخذ نسخة احتاطية من هذا القالب اولا حماية لك ثم نقوم بالبحث عن رمز Code: http://vb.ma7room.com/$stylevar[imgd...ton]/reply.gif ستجده مرتيتن نستبداله بى رمز Code: ثم تقم بحفظ القالب http://upload.traidnt.net/upfiles/LDC98190.jpg خامسا : فى خانة البحث نكتب postbit_legacy نقوم باخذ نسخة احتاطية من هذا القالب اولا حماية لك ثم نقوم بالبحث عن رمز Code: http://vb.ma7room.com/$stylevar[imgdir_button]/edit.gif نستبداله بى رمز Code: ثم نقوم بالبحث ايضا عن [CODE]http://vb.ma7room.com/$stylevar[imgd...quickreply.gif[/CODE] فى نفس القالب نستبداله بى رمز Code: ثم نقوم بالبحث ايضا عن رمز Code: http://vb.ma7room.com/$stylevar[imgd.../<ifcondition= فى نفس القالب نستبداله بى رمز Code: ثم نقوم بالبحث ايضا عن رمز Code: http://vb.ma7room.com/$stylevar[imgd..._<ifcondition= فى نفس القالب فى نفس القالب نستبداله بى رمز Code: http://upload.traidnt.net/upfiles/LDC98190.jpg سادسا : نقوم بعمل حفظ سيظهر لنا العمل بهذا الشكل http://upload.traidnt.net/upfiles/w5Y64453.png وهذا قبل اضافة اى تاثيرات او اكواد css http://upload.traidnt.net/upfiles/LDC98190.jpg سابعا : الخطوة الاخيرة والاهم وهى اضافة االاكواد - ندخل الى لوحة تحكم المنتدى الرئيسية ومنها / الإستايلات والقوالب / اختار الاستايل المراد التطبيق عليه / css الرئيسى / ثم خانة button نضيف هذا الكود رمز Code: text-decoration: none; padding: 7px 12px; position: relative; display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background: #f3f3f3; background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); border: solid 1px #dcdcdc; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin-right: 10px; } .button:hover { color: #333; border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .button:active { color: #000; border-color: #444; } كما بالصورة http://upload.traidnt.net/upfiles/5TU65851.png فيصبح لدنيا العمل بهذا الاخراج http://upload.traidnt.net/upfiles/NF566098.png http://upload.traidnt.net/upfiles/LDC98190.jpg اما من ارادكما هو فى منتدى نقطة تطوير كما بالصوره http://upload.traidnt.net/upfiles/jks67463.png فاليضع هذا الكود رمز Code: text-decoration: none; padding: 7px 12px; position: relative; display: inline-block; text-shadow: 0px 1px 0px rgb(255, 255, 255); transition: border-color 0.218s ease 0s; border: 1px solid rgb(220, 220, 220); border-radius: 2px; margin-right: 10px; color: rgb(34, 34, 34); font: 11px 'Droid Arabic Kufi'; background: none repeat scroll 0% 0% rgb(0, 198, 255); } .button:hover { color: #333; border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .button:active { color: #000; border-color: #444; } http://upload.traidnt.net/upfiles/LDC98190.jpg فى النهاية : تغير الالوان والخط من اكواد css وقيل ما انسى الشرح شامل ازرار موضيع جديد واضافة رد يعنى كما قلت جميع ازرار المنتدى كما بالصورة http://upload.traidnt.net/upfiles/GeP67987.png http://upload.traidnt.net/upfiles/LDC98190.jpg *فى النهاية لو اصبت فهذا من فضل الله وان اخطات فمن الشيطان فاذكرونا من صالح دعائكم |
| الساعة الآن 01:37 AM |
Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.5.2 TranZ By
Almuhajir