الويب العربي

الويب العربي (http://www.arabwebtalk.com/index.php)
-   دعم وتطوير الـ IPB (http://www.arabwebtalk.com/forumdisplay.php?f=62)
-   -   الدرس الثالث طريقة تصميم ستايل IP.Borad 3 (http://www.arabwebtalk.com/showthread.php?t=156162)

Mr_Design 03-05-2011 02:54 AM

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

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

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

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

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


هو كيفية تغير خلفية عناوين بينات العضو الموجودة فى الموضوع ( post_block h3 )

الموجود بها اسم العضو ورقم المشاركة # والاى بى الذى يظهر للادارة العامة :rolleyes:

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

كود:

}
 
 .post_block h3 {
 background: #d5dee5;
 }

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

قبل التعديل



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

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

كود:

}
 
 .post_block h3 {
 background: #C76114;
 }

بعد التعديل



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

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

كود:

background: #درجة اللون;
بالكود التالى :-

كود:

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

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

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

ثم اضغط على Save

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

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

هو كيفية تغير خلفية المواضيع التى تمت كتابتها وتسمى ( Post background )


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

كود:

/* Post background */
 .post_block {
 background: #fafbfc;

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

قبل التعديل



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

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

كود:

/* Post background */
 .post_block {
 background: #CDB79E;

بعد التعديل



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

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

كود:

background: #درجة اللون;
بالكود التالى :-

كود:

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

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

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

ثم اضغط على Save

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


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

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

وتسمى ( ul.post_controls )


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

كود:

ul.post_controls {
 background-color: #e4ebf3;

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

قبل التعديل



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

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


كود:

ul.post_controls {
 background-color: #CDAF95;

بعد التعديل



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

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

كود:

background: #درجة اللون;
بالكود التالى :-

كود:

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

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

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

ثم اضغط على Save

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

الدرس الحادى عشر :-

هو كيفية تغير خلفية صندوق ادوات الرد السريع وتسمى ( Fast reply )

كود:

سنقوم بالعمل على ملف  ipb_editor.css
نقوم بالبحث عن :-

#ipboard_body .ips_editor .toolbar {
height: 30px;
background: #e4ebf2 url({style_images_url}/gradient_bg.png)


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

قبل التعديل



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

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

كود:

        #ipboard_body .ips_editor .toolbar {
                height: 30px;
                background: #C76114 url({style_images_url}/gradient_bg.png)

بعد التعديل



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

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

كود:

background: #درجة اللون;
بالكود التالى :-

كود:

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

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

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

ثم اضغط على Save

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

الدرس الآثنى عشر :-

هو كيفية تغير خلفية صندوق ادوات الرد السريع وتسمى ( Fast reply )

الموجود بها مشاركة والمحرر الكامل

كود:

هنرجع تانى لـــ    ipb_styles.css

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

body#ipboard_body fieldset.submit,
 body#ipboard_body p.submit {
 background-color: #d5dde5;

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

قبل التعديل



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

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

كود:

body#ipboard_body fieldset.submit,
 body#ipboard_body p.submit {
 background-color: #C76114;

بعد التعديل



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

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

كود:

background: #درجة اللون;
بالكود التالى :-

كود:

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

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

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

ثم اضغط على Save

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

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

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

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


جميع الأوقات بتوقيت مكة المكرمة. الساعة الآن » 02:28 AM.

Powered by vBulletin
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © ArabWebTalk.Com 2004-2012