أحدث الصور
الموضوع : طريقة تحويل صور (ايقونات) ازرار الاستايل الى كود css
ماهى الفائدة من التغيير : يتيح لك القدرة على تغيير لون الايقونة ونوع الخط وحجمة واشياء اخرى
اسباب التغيير من صورة الى كود : كثرة طلب الاعضاء علية كما بهذا الموضوع جعل كود css بدل صورة اضف موضوع
الشرح :
اولا : ندخل الى لوحة تحكم المنتدى الرئيسية ومنها / الإستايلات والقوالب / البحث فى القوالب اختار الاستايل المراد التطبيق عليه .
ثانيا : وفى خانة البحث نكتب FORUMDISPLAY كما بالصورة
ثالثا : نقوم باخذ نسخة احتاطية من هذا القالب اولا حماية لك ثم نقوم بالبحث عن
رمز Code:
<img src="$stylevar[imgdir_button]/newthread.gif" alt="$vbphrase[post_new_thread]" border="0" /></a>
ستجده مرتيتن نستبداله بى
رمز Code:
<input class="button" type="button" value="أضافة موضوع" name="addthread"></input></a>
ثم تقم بحفظ القالبرابعاا : فى خانة البحث نكتب SHOWTHREAD
نقوم باخذ نسخة احتاطية من هذا القالب اولا حماية لك ثم نقوم بالبحث عن
رمز Code:
<img src="$stylevar[imgdir_button]/reply.gif" alt="$vbphrase[reply]" border="0" />
ستجده مرتيتن نستبداله بى
رمز Code:
<input class="button" type="button" value="أضافة رد" name="addthread"></input></a>
ثم تقم بحفظ القالبخامسا : فى خانة البحث نكتب postbit_legacy
نقوم باخذ نسخة احتاطية من هذا القالب اولا حماية لك ثم نقوم بالبحث عن
رمز Code:
<img src="$stylevar[imgdir_button]/edit.gif" alt="$vbphrase[edit_delete_message]" border="0" /></a>
نستبداله بى
رمز Code:
<input class="button" type="button" value="تعديل" name="Button1"></input></a>
ثم نقوم بالبحث ايضا عن
[CODE]<img src="$stylevar[imgdir_button]/quickreply.gif" alt="$vbphrase[quick_reply_to_this_message]" border="0" /></a>[/CODE]
[b][b]فى نفس القالب[/b][/b]
نستبداله بى
رمز Code:
<input class="button" type="button" value="رد سريع" name="Button1"></input></a>
ثم نقوم بالبحث ايضا عن
رمز Code:
<img src="$stylevar[imgdir_button]/<if condition="$post['forwardlink']">reply_small<else />quote</if>.gif" alt="$vbphrase[reply_with_quote]" border="0" /></a>
[b][b][b]فى نفس القالب
[/b][/b][/b]نستبداله بى
رمز Code:
<input class="button" type="button" value="أقتباس" name="Button1"></input></a>
[b]ثم نقوم بالبحث ايضا عن
[/b]
رمز Code:
<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>
[b][b][b][b][b][b]فى نفس القالب
[/b][/b][/b][/b][/b][/b][b][b][b]فى نفس القالب
[/b][/b][/b]نستبداله بى
رمز Code:
<input class="button" type="button" value="أقتباس متعدد" name="Button1"></input></a>
[b]سادسا : نقوم بعمل حفظ سيظهر لنا العمل بهذا الشكل
وهذا قبل اضافة اى تاثيرات او اكواد css
[/b]
[b][b]
[/b][/b]
[b][b][b]سابعا : الخطوة الاخيرة والاهم وهى اضافة االاكواد
-[/b][/b][/b]
[b][b][b]ندخل الى لوحة تحكم المنتدى الرئيسية ومنها /[b][b] الإستايلات والقوالب / اختار الاستايل المراد التطبيق عليه / css الرئيسى / ثم خانة button نضيف هذا الكود
[/b][/b][/b][/b][/b]
رمز 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;
}
[b][b][b][b][b]كما بالصورة 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;
}
فيصبح لدنيا العمل بهذا الاخراج
[/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b]
اما من ارادكما هو فى منتدى نقطة تطوير كما بالصوره
فاليضع هذا الكود
[/b][/b][/b][/b][/b][/b][/b]
رمز 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;
}
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;
}
[b][b][b][b][b][b][b][b][b][b][b][b][b][b]
[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][b][b][b]فى النهاية : تغير الالوان والخط من اكواد css وقيل ما انسى الشرح شامل ازرار موضيع جديد
واضافة رد يعنى كما قلت جميع ازرار المنتدى كما بالصورة
[/b][/b][/b]
*فى النهاية لو اصبت فهذا من فضل الله وان اخطات فمن الشيطان
فاذكرونا من صالح دعائكم
