اذهب الي المحتوي
منتديات ياللا يا شباب
mr_design

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

Recommended Posts

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

 

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

 

قبل التعديل

 

Row1.jpg

 

 

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

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

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

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

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

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

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

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

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

 

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

 

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

 

 

بعد التعديل

 

Row2.jpg

 

 

 

 

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

 

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

 

 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:

 

قبل التعديل

 

filter%20bar1.jpg

 

 

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

 

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

 

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

 

بعد التعديل

 

filter%20bar2.jpg

 

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

 

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

 

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:

 

قبل التعديل

 

general%20box1.jpg

 

 

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

 

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

 

 

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

 

بعد التعديل

 

general%20box2.jpg

 

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

 

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

 

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

 

 

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

 

 

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

 

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

 

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

 

ثم اضغط على Save

 

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

 

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

 

 

 

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

 

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

 

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

 

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

 

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

 

قبل التعديل

 

footer%20utilities%20bar1.jpg

 

 

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

 

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

 

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

 

بعد التعديل

 

footer%20utilities%20bar2.jpg

 

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

 

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

 

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 اقسام الللى تم شرحهم

 

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

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

زائر
اضف رد علي هذا الموضوع....

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • اضف...

Important Information

By using this site, you agree to our Terms of Use, اتفاقيه الخصوصيه, قوانين الموقع, We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue..