عرض مشاركة مفردة
 
  #1  
قديم 03-05-2011, 02:52 AM
Mr_Design Mr_Design غير متصل
عضو
 
تاريخ التسجيل: Oct 2008
مشاركة: 62
مستوى تقييم العضوية: 16
Mr_Design is on a distinguished road
الافتراضي الدرس الثانى طريقة تصميم ستايل IP.Borad 3

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

الدرس الثانى طريقة تصميم ستايل 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 اقسام الللى تم شرحهم

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






التوقيع
شركة مدينة الآى بى

WwW.ipbcity.net

استلم بروفة لتصميمك فى خلال ساعة واحدة فقط