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

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

قبل التعديل




نقوم بتغير 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;

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

قبل التعديل




نقوم بتغير 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;

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

قبل التعديل




نقوم بتغير 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%;

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

قبل التعديل




نقوم بتغير 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 اقسام الللى تم شرحهم

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