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

دة كود انا معدلة على مزاجى :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 */

        }

بعد التعديل

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

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

كود:

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

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

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

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

والاستايل والوقت والتاريخ واخر زيارة لك :D ويسمى ( 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%;

كود:

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

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