الموضوع : طريقة تحويل صور (ايقونات) ازرار الاستايل الى كود css

ماهى الفائدة من التغيير : يتيح لك القدرة على تغيير لون الايقونة ونوع الخط وحجمة واشياء اخرى

اسباب التغيير من صورة الى كود : كثرة طلب الاعضاء علية كما بهذا الموضوع جعل كود css بدل صورة اضف موضوع


الشرح :
اولا : ندخل الى لوحة تحكم المنتدى الرئيسية ومنها / الإستايلات والقوالب / البحث فى القوالب اختار الاستايل المراد التطبيق عليه .
ثانيا : وفى خانة البحث نكتب FORUMDISPLAY كما بالصورة







ثالثا : نقوم باخذ نسخة احتاطية من هذا القالب اولا حماية لك ثم نقوم بالبحث عن

كود:
<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>

سادسا : نقوم بعمل حفظ سيظهر لنا العمل بهذا الشكل



وهذا قبل اضافة اى تاثيرات او اكواد 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;
}
كما بالصورة



فيصبح لدنيا العمل بهذا الاخراج









اما من ارادكما هو فى منتدى نقطة تطوير كما بالصوره





فاليضع هذا الكود
كود:
    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 وقيل ما انسى الشرح شامل ازرار موضيع جديد

واضافة رد يعنى كما قلت جميع ازرار المنتدى كما بالصورة








منقووووووووول