شرح استبدال ازرار الاستايل بالكامل بكود css كما بمنتدى نقطة تطوير
الموضوع : طريقة تحويل صور (ايقونات) ازرار الاستايل الى كود css
ماهى الفائدة من التغيير : يتيح لك القدرة على تغيير لون الايقونة ونوع الخط وحجمة واشياء اخرى
اسباب التغيير من صورة الى كود : كثرة طلب الاعضاء علية كما بهذا الموضوع
جعل كود css بدل صورة اضف موضوع
الشرح :
اولا : ندخل الى لوحة تحكم المنتدى الرئيسية ومنها / الإستايلات والقوالب / البحث فى القوالب اختار الاستايل المراد التطبيق عليه .
ثانيا : وفى خانة البحث نكتب FORUMDISPLAY كما بالصورة
http://upload.traidnt.net/upfiles/BtJ62645.png
ثالثا : نقوم باخذ نسخة احتاطية من هذا القالب اولا حماية لك ثم نقوم بالبحث عن
كود:
<img src="$stylevar[imgdir_button]/newthread.gif" alt="$vbphrase[post_new_thread]" border="0" /></a>
ستجده مرتيتن
نستبداله بى
كود:
<input class="button" type="button" value="أضافة موضوع" name="addthread"></input></a>
ثم تقم بحفظ القالب
رابعاا : فى خانة البحث نكتب SHOWTHREAD
نقوم باخذ نسخة احتاطية من هذا القالب اولا حماية لك ثم نقوم بالبحث عن
كود:
<img src="$stylevar[imgdir_button]/reply.gif" alt="$vbphrase[reply]" border="0" />
ستجده مرتيتن
نستبداله بى
كود:
<input class="button" type="button" value="أضافة رد" name="addthread"></input></a>
ثم تقم بحفظ القالب
خامسا : فى خانة البحث نكتب postbit_legacy
نقوم باخذ نسخة احتاطية من هذا القالب اولا حماية لك ثم نقوم بالبحث عن
كود:
<img src="$stylevar[imgdir_button]/edit.gif" alt="$vbphrase[edit_delete_message]" border="0" /></a>
نستبداله بى
كود:
<input class="button" type="button" value="تعديل" name="Button1"></input></a>
ثم نقوم بالبحث ايضا عن
[CODE]<img src="$stylevar[imgdir_button]/quickreply.gif" alt="$vbphrase[quick_reply_to_this_messa ge]" border="0" /></a>[/CODE]
فى نفس القالب
نستبداله بى
كود:
<input class="button" type="button" value="رد سريع" name="Button1"></input></a>
ثم نقوم بالبحث ايضا عن
كود:
<img src="$stylevar[imgdir_button]/<if condition="$post['forwardlink']">reply_small<else />quote</if>.gif" alt="$vbphrase[reply_with_quote]" border="0" /></a>
فى نفس القالب
نستبداله بى
كود:
<input class="button" type="button" value="أقتباس" name="Button1"></input></a>
ثم نقوم بالبحث ايضا عن
كود:
<img src="$stylevar[imgdir_button]/multiquote_<if condition="$show['multiquote_selected']">on<else />off</if>.gif" alt="$vbphrase[multi_quote_this_message]" border="0" id="mq_$post[postid]" /></a>
فى نفس القالب
فى نفس القالب
نستبداله بى
كود:
<input class="button" type="button" value="أقتباس متعدد" name="Button1"></input></a>
سادسا : نقوم بعمل حفظ سيظهر لنا العمل بهذا الشكل
http://upload.traidnt.net/upfiles/w5Y64453.png
وهذا قبل اضافة اى تاثيرات او اكواد css
سابعا : الخطوة الاخيرة والاهم وهى اضافة االاكواد
-
ندخل الى لوحة تحكم المنتدى الرئيسية ومنها / الإستايلات والقوالب / اختار الاستايل المراد التطبيق عليه / css الرئيسى / ثم خانة button نضيف هذا الكود
كود:
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/jks67463.png
فاليضع هذا الكود
كود:
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;
}
فى النهاية : تغير الالوان والخط من اكواد css وقيل ما انسى الشرح شامل ازرار موضيع جديد
واضافة رد يعنى كما قلت جميع ازرار المنتدى كما بالصورة
http://upload.traidnt.net/upfiles/GeP67987.png
منقووووووووول
