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

[mr_design]

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

 

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

 

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

 

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

 

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

 

هو كيفية تغير خلفية عناوين الاقسام الداخلية وتسمى ( Row1 & Row2 )

 

 

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

 

/* COLORS */  .row1, .row1 td, .post_block.row1 { background-color: #fafbfc; /* Very light blue */ }  .row1 .altrow, .row1.altrow, .personal_info, .general_box { background-color: #eef3f8; /* Slightly darker than row1 */ }  .row2, .row2 td, .post_block.row2, .message { background-color: #f1f4f7; /* Light blue */ }  .row2 .altrow, .row2.altrow, /* ul.post_controls,*/ ul.topic_moderation { background-color: #e4ebf2; /* Slightly darker than row2 */ }

 

 

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

 

قبل التعديل

 

 

 

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

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

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

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

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

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

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

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

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

 

دة كود انا معدلة على مزاجى

 

/* COLORS */.row1, .row1 td, .post_block.row1 {	background-color: #F7F7F7; /* Very light blue */}	.row1 .altrow, .row1.altrow,	.personal_info, .general_box {		background-color: #F7F7F7; /* Slightly darker than row1 */	}	.row2, .row2 td, .post_block.row2,.message {	background-color: #F7F7F7; /* Light blue */}	.row2 .altrow, .row2.altrow,/*	ul.post_controls,*/	ul.topic_moderation {		background-color: #F7F7F7; /* Slightly darker than row2 */	}

 

 

بعد التعديل

 

 

 

 

 

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

 

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

 

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

 

 

 

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

 

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

 

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

 

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

 

ثم اضغط على Save

 

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

 

الدرس الخامس :-

 

هو كيفية تغير خلفية شريط الادارة فى الفوتر وتسمى ( filter bar )

 

الموجودة بة

 

* مواضيع اليوم النشطة

* الهيكل الإدارى للمنتدى

* أفضل عشرين مشارك اليوم

* افضل المشاركين كليا فى المنتدى

 

 

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

 

/* Filter & moderation bars */ .filter_bar { background-color: #1d3652;

 

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

 

قبل التعديل

 

 

 

نقوم بتغير 1d3652 الى اللون الذى نريدة مثلا C73F17

 

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

 

/* Filter & moderation bars */ .filter_bar { background-color: #C73F17;

 

بعد التعديل

 

 

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

 

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

 

background: #قيمة اللون;

 

 

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

 

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

 

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

 

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

 

ثم اضغط على Save

 

 

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

 

الدرس السادس :-

 

هو كيفية تغير خلفية الآحصائيات وتسمى ( general box )

 

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

 

/* General block */ .general_box { background-color: #eef3f8;

 

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

 

قبل التعديل

 

 

 

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

 

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

 

 

/* General block */ .general_box { background-color: #CDB79E;

 

بعد التعديل

 

 

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

 

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

 

background: #قيمة اللون;

 

 

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

 

 

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

 

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

 

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

 

ثم اضغط على Save

 

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

 

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

 

 

 

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

 

والاستايل والوقت والتاريخ واخر زيارة لك ويسمى ( footer utilities bar )

 

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

 

 background: #192b40 url(http://www.ipbcity.net/public/style_images/test2-images/gradient_bg.png) repeat-x 50%;

 

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

 

قبل التعديل

 

 

 

نقوم بتغير 192b40 الى اللون الذى نريدة مثلا C73F17

 

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

 

 background: #C73F17 url(http://www.ipbcity.net/public/style_images/test2-images/gradient_bg.png) repeat-x 50%;

 

بعد التعديل

 

 

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

 

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

 

background: #قيمة اللون;

 

 

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

 

 

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

 

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

 

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

 

ثم اضغط على Save

 

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

 

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

 

لتغير حواف الجدول المحيط بالاحصائيات

 

نبحث عن :-

 

 

"border: 1px solid #d5dde5;"

 

وايضا

 

"border-bottom: 4px solid #d5dde5"

 

الموجودين فى كلاس :-

 

/* General block */ .general_box { background-color: #eef3f8; border: 1px solid #d5dde5; border-bottom: 4px solid #d5dde5

 

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

 

ثم اضغط على Save

 

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

 

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

 

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

 

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