• عزيزي العضو

    إذا كنت تواجه مشكلة في تسجيل الدخول الى عضويتك فضلا قم بطلب تغيير كلمة المرور عبر (نسيت كلمة المرور) أو التواصل معنا عبر أيقونة التواصل في الأسفل او البريد [email protected] او من خلال المحادثات على الواتساب عبر الرابط التالي https://wa.link/bluuun او مسح الباركود في الصوره

    إدارة الموقع

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

الاعضاء الذين تم تكريمهم لهذا الشهر
العضو الاكثر نشراً للمواضيع
العضو الاكثر ردوداً
الموضوع الاكثر زيارة
الموضوع الاكثر تفاعلا
لجنة التطوير

لجنة التطوير

عضوية تقوم بجلب المواضيع من مواقع اخرى





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

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

اسباب التغيير من صورة الى كود : كثرة طلب الاعضاء علية كما بهذا الموضوع http://www.traidnt.net/vb/traidnt2384655/


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







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

رمز Code:
newthread.gif

ستجده مرتيتن


نستبداله بى

رمز Code:

ثم تقم بحفظ القالب


رابعاا : فى خانة البحث نكتب SHOWTHREAD


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

رمز Code:
reply.gif

ستجده مرتيتن


نستبداله بى
رمز Code:

ثم تقم بحفظ القالب



خامسا : فى خانة البحث نكتب postbit_legacy

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

رمز Code:
edit.gif


نستبداله بى

رمز Code:


ثم نقوم بالبحث ايضا عن

كود: 
[IMG]http://mon.shomoo5.com/$stylevar[imgdir_button]/quickreply.gif[/IMG][/CODE[/B]]
[/COLOR]
[COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B]فى نفس القالب[/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR]


[COLOR=Black][B][COLOR=Black][B]نستبداله بى

	رمز Code:
	
[/B][/COLOR][/B][/COLOR]
[COLOR=Black][B]ثم نقوم بالبحث ايضا عن[/B][/COLOR][COLOR=Black][B] 
	رمز Code:
	[IMG]http://mon.shomoo5.com/$stylevar[imgdir_button]/<if  condition=[/IMG]
[/B][/COLOR]
[COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B]فى نفس القالب

[/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR][COLOR=Black][B][COLOR=Black][B]نستبداله بى

	رمز Code:
	
[/B][/COLOR][/B][/COLOR]
[COLOR=Black][B][COLOR=Black][B][COLOR=Black][B]ثم نقوم بالبحث ايضا عن 
	رمز Code:
	[IMG]http://mon.shomoo5.com/$stylevar[imgdir_button]/multiquote_<if  condition=[/IMG]
[/B][/COLOR][/B][/COLOR][/B][/COLOR]
[COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B]فى نفس القالب


[/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B]فى نفس القالب

[/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR][COLOR=Black][B][COLOR=Black][B]نستبداله بى
	رمز Code:
	
[/B][/COLOR][/B][/COLOR]
[COLOR=Black][B][COLOR=Black][B][URL="http://upload.traidnt.net/"][IMG]http://upload.traidnt.net/upfiles/LDC98190.jpg[/IMG][/URL]

[/B][/COLOR][/B][/COLOR][COLOR=Black][B][COLOR=Black][B][SIZE=3][B][COLOR=Purple]سادسا : [/COLOR][/B][/SIZE]نقوم بعمل حفظ سيظهر لنا العمل بهذا الشكل

[URL="http://upload.traidnt.net/"][IMG]http://upload.traidnt.net/upfiles/w5Y64453.png[/IMG][/URL]

وهذا قبل اضافة اى تاثيرات او  اكواد css

[/B][/COLOR][/B][/COLOR]
[COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][URL="http://upload.traidnt.net/"][IMG]http://upload.traidnt.net/upfiles/LDC98190.jpg[/IMG][/URL][/B][/COLOR][/B][/COLOR]
[/B][/COLOR][/B][/COLOR]
[COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][SIZE=3][B][COLOR=Purple]سابعا : [COLOR=black]الخطوة الاخيرة والاهم وهى اضافة االاكواد  
 -[/COLOR][/COLOR][/B][/SIZE][/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR]
[COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][SIZE=3][B][COLOR=Purple][COLOR=black][FONT=Arial][SIZE=3][COLOR=Gray][B][FONT=Arial][SIZE=3][SIZE=5][COLOR=Blue][COLOR=Black][SIZE=3]  ندخل الى لوحة تحكم المنتدى الرئيسية ومنها /[/SIZE][/COLOR][/COLOR][/SIZE][/SIZE][/FONT][/B][/COLOR][/SIZE][/FONT][FONT=Arial][SIZE=3][COLOR=Gray][B][FONT=Arial][SIZE=3][SIZE=5][COLOR=Blue][COLOR=Black][SIZE=3][B] الإستايلات والقوالب /   اختار الاستايل المراد التطبيق عليه /  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;
}
كما بالصورة 

[URL="http://upload.traidnt.net/"][IMG]http://upload.traidnt.net/upfiles/5TU65851.png[/IMG][/URL]

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

[URL="http://upload.traidnt.net/"][IMG]http://upload.traidnt.net/upfiles/NF566098.png[/IMG][/URL]



[/B][/SIZE][/COLOR][/COLOR][/SIZE][/SIZE][/FONT][/B][/COLOR][/SIZE][/FONT][/COLOR][/COLOR][/B][/SIZE][/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR]
[COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][SIZE=3][B][COLOR=Purple][COLOR=black][FONT=Arial][SIZE=3][COLOR=Gray][B][FONT=Arial][SIZE=3][SIZE=5][COLOR=Blue][COLOR=Black][SIZE=3][B][COLOR=Black][B][COLOR=Black][B][URL="http://upload.traidnt.net/"][IMG]http://upload.traidnt.net/upfiles/LDC98190.jpg[/IMG][/URL]


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


[URL="http://upload.traidnt.net/"][IMG]http://upload.traidnt.net/upfiles/jks67463.png[/IMG][/URL]


فاليضع هذا الكود 
	رمز 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][/COLOR][/B][/COLOR][/B][/SIZE][/COLOR][/COLOR][/SIZE][/SIZE][/FONT][/B][/COLOR][/SIZE][/FONT][/COLOR][/COLOR][/B][/SIZE][/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR]

[COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][SIZE=3][B][COLOR=Purple][COLOR=black][FONT=Arial][SIZE=3][COLOR=Gray][B][FONT=Arial][SIZE=3][SIZE=5][COLOR=Blue][COLOR=Black][SIZE=3][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][SIZE=3][B][COLOR=Purple][COLOR=black][FONT=Arial][SIZE=3][COLOR=Gray][B][FONT=Arial][SIZE=3][SIZE=5][COLOR=Blue][COLOR=Black][SIZE=3][B][COLOR=Black][B][COLOR=Black][B][URL="http://upload.traidnt.net/"][IMG]http://upload.traidnt.net/upfiles/LDC98190.jpg[/IMG][/URL][/B][/COLOR][/B][/COLOR][/B][/SIZE][/COLOR][/COLOR][/SIZE][/SIZE][/FONT][/B][/COLOR][/SIZE][/FONT][/COLOR][/COLOR][/B][/SIZE][/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/SIZE][/COLOR][/COLOR][/SIZE][/SIZE][/FONT][/B][/COLOR][/SIZE][/FONT][/COLOR][/COLOR][/B][/SIZE][/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR][COLOR=Purple]

[/COLOR][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][COLOR=Black][B][SIZE=3][B][COLOR=Purple]فى النهاية : [COLOR=black] تغير الالوان والخط من اكواد css  وقيل ما انسى الشرح شامل ازرار موضيع جديد
[/COLOR][COLOR=black]
واضافة رد يعنى كما قلت  جميع ازرار المنتدى كما بالصورة[/COLOR]

[URL="http://upload.traidnt.net/"][IMG]http://upload.traidnt.net/upfiles/GeP67987.png[/IMG][/URL]



[/COLOR][/B][/SIZE][/B][/COLOR][/B][/COLOR][/B][/COLOR][/B][/COLOR][URL="http://upload.traidnt.net/"][IMG]http://upload.traidnt.net/upfiles/LDC98190.jpg[/IMG][/URL]
[COLOR=Black][B][FONT=Arial][SIZE=3][FONT=Arial Black][SIZE=4]
[/SIZE][/FONT][/SIZE][/FONT][FONT=Arial Black][SIZE=4]*فى النهاية لو اصبت فهذا من فضل الله وان اخطات فمن الشيطان

فاذكرونا من صالح دعائكم
[/SIZE][/FONT][/B][/COLOR]

[CENTER][URL="http://upload.traidnt.net/"][IMG]http://upload.traidnt.net/upfiles/oAi98221.jpg[/IMG][/URL][/CENTER]
[/RIGHT]
[/CENTER]
​
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.
عودة
أعلى