الدرس الثالث طريقة تصميم ستايل IP.Borad 3

[mr_design]

بسم الله الرحمن الرحيم

 

الدرس الثالث طريقة تصميم ستايل IP.Borad 3

 

نبدأ بأذن الله سلسلة دروس تصميم الاستايل

 

--------------------------------------------------------------------------

 

الدرس الثامن :-

 

 

هو كيفية تغير خلفية عناوين بينات العضو الموجودة فى الموضوع ( post_block h3 )

 

الموجود بها اسم العضو ورقم المشاركة # والاى بى الذى يظهر للادارة العامة

 

نقوم بالبحث عن :-

 

}  .post_block h3 { background: #d5dee5; }

 

حيث الشكل التالى يقوم بتوضيح الآمر اكثر

 

قبل التعديل

 

 

نقوم بتغير d5dee5 الى اللون الذى نريدة مثلا C76114

 

ليتعدل شكل الكود السابق الى شكل الكود التالى

 

}  .post_block h3 { background: #C76114; }

 

بعد التعديل

 

 

اما إذا ارت تغير الخلفية الخاصة بهذا القسم الى صورة

 

فعليك إستبدال :-

 

 background: #درجة اللون;

 

بالكود التالى :-

 

background:  url(http://www.ipbcity.net/forums/public/style_images/orang/ipbcity.png) repeat-x 50%;

 

 

حيث ipbcity = اسم الصورة المختارة

 

حيث pin = صيغة الصورة حيث يمكن اختلافها كـــ Gif او Jepg

 

ثم اضغط على Save

 

--------------------------------------------------------------------------

 

الدرس التاسع :-

 

هو كيفية تغير خلفية المواضيع التى تمت كتابتها وتسمى ( Post background )

 

 

نقوم بالبحث عن :-

 

/* Post background */ .post_block { background: #fafbfc;

 

حيث الشكل التالى يقوم بتوضيح الآمر اكثر

 

قبل التعديل

 

 

نقوم بتغير fafbfc الى اللون الذى نريدة مثلا CDB79E

 

ليتعدل شكل الكود السابق الى شكل الكود التالى

 

/* Post background */ .post_block { background: #CDB79E;

 

بعد التعديل

 

 

اما إذا ارت تغير الخلفية الخاصة بهذا القسم الى صورة

 

فعليك إستبدال :-

 

 background: #درجة اللون;

 

بالكود التالى :-

 

background:  url(http://www.ipbcity.net/forums/public/style_images/orang/ipbcity.png) repeat-x 50%;

 

 

حيث ipbcity = اسم الصورة المختارة

 

حيث pin = صيغة الصورة حيث يمكن اختلافها كـــ Gif او Jepg

 

ثم اضغط على Save

 

--------------------------------------------------------------------------

 

 

الدرس العاشر :-

 

هو كيفية تغير خلفية المشريط الموجود بة خيارت الموضوع من تعديل واقتباس الخ

 

وتسمى ( ul.post_controls )

 

 

نقوم بالبحث عن :-

 

ul.post_controls { background-color: #e4ebf3;

 

حيث الشكل التالى يقوم بتوضيح الآمر اكثر

 

قبل التعديل

 

 

نقوم بتغير e4ebf3 الى اللون الذى نريدة مثلا CDAF95

 

ليتعدل شكل الكود السابق الى شكل الكود التالى

 

 

ul.post_controls { background-color: #CDAF95;

 

بعد التعديل

 

 

اما إذا ارت تغير الخلفية الخاصة بهذا القسم الى صورة

 

فعليك إستبدال :-

 

 background: #درجة اللون;

 

بالكود التالى :-

 

background:  url(http://www.ipbcity.net/forums/public/style_images/orang/ipbcity.png) repeat-x 50%;

 

 

حيث ipbcity = اسم الصورة المختارة

 

حيث pin = صيغة الصورة حيث يمكن اختلافها كـــ Gif او Jepg

 

ثم اضغط على Save

 

--------------------------------------------------------------------------

 

الدرس الحادى عشر :-

 

هو كيفية تغير خلفية صندوق ادوات الرد السريع وتسمى ( Fast reply )

 

سنقوم بالعمل على ملف   ipb_editor.css

 

نقوم بالبحث عن :-

 

#ipboard_body .ips_editor .toolbar {

height: 30px;

background: #e4ebf2 url({style_images_url}/gradient_bg.png)

 

 

حيث الشكل التالى يقوم بتوضيح الآمر اكثر

 

قبل التعديل

 

 

نقوم بتغير e4ebf2 الى اللون الذى نريدة مثلا C76114

 

ليتعدل شكل الكود السابق الى شكل الكود التالى

 

	#ipboard_body .ips_editor .toolbar {		height: 30px;		background: #C76114 url({style_images_url}/gradient_bg.png) 

 

بعد التعديل

 

 

اما إذا ارت تغير الخلفية الخاصة بهذا القسم الى صورة

 

فعليك إستبدال :-

 

 background: #درجة اللون;

 

بالكود التالى :-

 

background:  url(http://www.ipbcity.net/forums/public/style_images/orang/ipbcity.png) repeat-x 50%;

 

 

حيث ipbcity = اسم الصورة المختارة

 

حيث pin = صيغة الصورة حيث يمكن اختلافها كـــ Gif او Jepg

 

ثم اضغط على Save

 

--------------------------------------------------------------------------

 

الدرس الآثنى عشر :-

 

هو كيفية تغير خلفية صندوق ادوات الرد السريع وتسمى ( Fast reply )

 

الموجود بها مشاركة والمحرر الكامل

 

هنرجع تانى لـــ	ipb_styles.css

 

 

نقوم بالبحث عن :-

body#ipboard_body fieldset.submit, body#ipboard_body p.submit { background-color: #d5dde5;

حيث الشكل التالى يقوم بتوضيح الآمر اكثر

 

قبل التعديل

 

 

نقوم بتغير d5dde5 الى اللون الذى نريدة مثلا C76114

 

ليتعدل شكل الكود السابق الى شكل الكود التالى

 

body#ipboard_body fieldset.submit, body#ipboard_body p.submit { background-color: #C76114;

 

بعد التعديل

 

 

اما إذا ارت تغير الخلفية الخاصة بهذا القسم الى صورة

 

فعليك إستبدال :-

 

 background: #درجة اللون;

 

بالكود التالى :-

 

background:  url(http://www.ipbcity.net/forums/public/style_images/orang/ipbcity.png) repeat-x 50%;

 

 

حيث ipbcity = اسم الصورة المختارة

 

حيث pin = صيغة الصورة حيث يمكن اختلافها كـــ Gif او Jepg

 

ثم اضغط على Save

 

وبهذا أعزائى الآعضاء نكون انتهينا من التعديل

 

--------------------------------------------------------------------------------

 

وبكدة يكون انتهى درسنا اليوم بخصوص ال3 اقسام الللى تم شرحهم

 

الى لقاء أخر باذن الله فى تكملة الدروس والكمال لله عز وجل