منتدى استراحات زايد - [درس ipb] تغيير الجزء الاعلى من المنتدى

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

http://im14.gulfup.com/2011-11-05/1320513798831.png

نذهب الى

1- * Look & Feel >
* Manage Skin Sets & Templates >-2
* Manage Templates in IP.Board-3
* css-4
* ipb_styles.css-5

ونبحث في قسم GENERIC REPEATED STYLES عن

رمز Code:
.maintitle {
background: #2c5687 url({style_images_url}/maintitle.png) repeat-x top;
color: #fff;
padding: 10px 10px 11px;
font-size: 16px;
font-weight: 300;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: inset 0px 1px 0 #528cbc;
-moz-box-shadow: inset 0px 1px 0 #528cbc;
box-shadow: inset 0px 1px 0 #528cbc;
border-width: 1px 1px 0 1px;
border-color: #316897;
border-style: solid;
}

نقوم بتغيير الخلفيه عن طريق التعديل على نص

رمز Code:
background: #2c5687 url({style_images_url}/maintitle.png) repeat-x top;

حيث اذا اردنا تغيير اللون نقوم بحذف

رمز Code:
url({style_images_url}/maintitle.png) repeat-x top

حيث تصبح
رمز Code:
background: #2c5687

ونقوم بكتابه رمز اللون مكان
رمز Code:
#2c5687

مثلا رمز اللون الابيض
رمز Code:
#fff
ما اذا اردنا وضع صوره فنعدل على

رمز Code:
maintitle.png

واذا اردنا توسيط الاسم في القسم نضيف

رمز Code:
text-align: center;

واذا اردنا تكبير الخط نعدل على

رمز Code:
font-size: 16px;

ونختار الرقم الذي نريده ونعمل حفظ لتصبح النتيجه

http://im12.gulfup.com/2011-11-05/1320516592991.png

الان كيف نغير خلفية المنتديات التي تقع خلفها مثال

http://im17.gulfup.com/2011-11-06/1320562249281.png

نبحث في قسم colors عن

. رمز Code:
ipsBox { background: #6699ff; }

ونعدل على

رمز Code:
background: #6699ff;

ونعمل حفظ ومن ثم نرى النتيجه

http://im14.gulfup.com/2011-11-06/1320567778381.png

الان كيفية تغيير خلفية المنتديات مثال

http://im17.gulfup.com/2011-11-06/1320567906401.png

نبحث في قسم GENERAL CONTENT عن

رمز Code:
.ipsBox_container {
background: #fff;
border: 1px solid #dbe4ef;
ونعدل على

رمز Code:
background: #fff;

ونعمل حفظ ونرى النتيجه

http://im19.gulfup.com/2011-11-06/1320568841521.png

الان كيف نقوم بتغيير خلفية الصفحه مثال

http://im14.gulfup.com/2011-11-06/1320576627501.png

نبحث في قسم CORE ELEMENT STYLES تجده في البدايه ونبحث عن
رمز Code:
html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */
background-color: #d8dde8;
color: #5a5a5a;
ونعدل على

background-color: #d8dde8;

اما اذا تريد وضع صوره فتحذف

-color

رمز Code:
background: #d8dde8;

ونستبدل

رمز Code:

رمز Code:

#d8dde8

بكود الصوره كما شرحنا سابقا وتضغط حفظ ونرى النتيجه

http://im15.gulfup.com/2011-11-06/132057536561.png

الان كيف نقوم بتغيير خلفية المنتدى+عرض المنتدى مثال

http://im15.gulfup.com/2011-11-06/1320576275921.png

1-تغيير الخلفيه

نبحث في قسم LAYOUT عن
رمز Code:
#content {
background: #fff;
padding: 10px 10px;
line-height: 120%;
-webkit-box-shadow: 0 5px 9px rgba(0,0,0,0.1);
-moz-box-shadow: 0 5px 9px rgba(0,0,0,0.1);
box-shadow: 0 5px 9px rgba(0,0,0,0.1);

نعدل على

رمز Code:

رمز Code:

background: #fff;

2-تغيير العرض

نبحث في قسم LAYOUT عن
رمز Code:
#content, .main_width {
margin: 0 auto;
/* Uncomment for fixed */
/*width: 980px;*/
/* Fluid */
width: 87% !important;
min-width: 960px;
}

توجد طريفتان لتغيير العرض

1-التغيير بالنسبه المئويه بالتعديل على

رمز Code:
width: 87% !important;
2-التغيير بالحجم الحقيقي بالتعديل على

رمز Code:
min-width: 960px;

وانا افضل التغيير بالنيبه المئويه لسهولة الامر

نعمل حفظ ونرى النتيجه

http://im12.gulfup.com/2011-11-06/1320576204581.png

الموضوع الاصلي

[درس2] تغير القسم الوسطي من المنتدى - مدينة الآي بي

الى اللقاء في الدرس القادم