منتدى سيف الله للإبداع

أهلا وسهلا بك زائرنا الكريم, أنت لم تقم بتسجيل الدخول بعد, يشرفنا أن تقوم بالدخول وذلك بالضغط على زر الدخول إن كنت عضوا بالمنتدى.أو التسجيل إن كنت ترغب بالإطلاع على مواضيع المنتدى والمشاركة في أقسام المنتدى فقط إضغط على زر التسجيل و شكرا لك
منتدى سيف الله للإبداع

منتدى سيف الله للإبداع


شرح استبدال ازرار الاستايل بالكامل بكود css كما بمنتدى نقطة تطوير

شاطر
avatar
SeIfElLaH
مجلس المدراء
مجلس المدراء

الأوسمة :
عدد المساهمات : 4491
نقاط : 6379
تاريخ التسجيل : 22/03/2010
العمر : 42

شرح استبدال ازرار الاستايل بالكامل بكود css كما بمنتدى نقطة تطوير

مُساهمة من طرف SeIfElLaH في الأربعاء أكتوبر 21, 2015 2:45 pm






الموضوع : طريقة تحويل صور (ايقونات) ازرار الاستايل الى كود 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]كما بالصورة



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





[/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;
}






[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]


*فى النهاية لو اصبت فهذا من فضل الله وان اخطات فمن الشيطان

فاذكرونا من صالح دعائكم

    الوقت/التاريخ الآن هو الخميس نوفمبر 22, 2018 12:14 am