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

[mr_design 3]

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

 

طبعا مدينة الآى بى معودانا دائما على المفاجات

 

النهاردة يا جماعة انا قررت انى اشرح لكم CCS الخاص بنسخة الجيل الثالث

 

لكى يتمكن المستخدم العربى من تصميم ستايل منتداة الشخصى بنفسة

 

انا معتمد يا جماعة فى الدورة دى على بعض الإجتهادات الشخصية بنسبة 50%

 

وبعض الدروس الأجنبية بنسبة 50% وبكدة نكون وضعنا اللبنة الأولى فى تصميم

 

ستايل منتديات IP.Board ندخل على الدورة انا مقسم الدورة لمجموعات يعنى كل يوم

 

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

 

كان نفسى انزل بيها مرة واحدة بس اعذرونى لضيق وقتى ندخل على الدرس الاول . :D

 

 

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

 

الدرس الآول :-

 

هو كيفية تغير خلفية المنتدى وتسمى ( Board background )

 

نتبع المسار الاتى لبدأالعمل فى ملف ipb_styles.css

 

 

Administration Control Panel

 

Look & Feel

 

اختيار الاستايل الذى سنعمل علية وغالبا ما يكون الإفتراضى

 

CSS

 

ipb_styles.css

 

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

 

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

 

/* ELEMENT STYLES */body { background: #fff;

 

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

 

قبل التعديل

 

 

 

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

 

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

 

/* ELEMENT STYLES */body { background: #C0C0C0;

 

بعد التعديل

 

 

ثم اضغط على Save

 

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

 

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

 

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

 

هو كيفية تغير عناوين الآقسام وتسمى ( maintitle )

 

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

 

body .maintitle {background: #1D3652 url(http://www.ipbcity.net/public/style_images/gradient_bg.png) repeat-x left 50%;

 

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

 

قبل التعديل

 

 

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

 

ليصبح الكود السابق بهذا الشكل

 

 

body .maintitle {background: #C73F17 url(http://www.ipbcity.net/public/style_images/gradient_bg.png) repeat-x left 50%;]

 

بعد التعديل

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

ثم اضغط على Save

 

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

 

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

 

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

 

هو كيفية تغير خلفية عناوين الاقسام الصغرى وتسمى ( Table column headers )

 

 

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

 

/* Table column headers */.header { background: #b6c7db;

 

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

 

قبل التعديل

 

 

 

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

 

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

 

 

/* Table column headers */.header { background: #C76114;

 

بعد التعديل

 

 

 

 

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

 

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

 

 background: #C76114;

 

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

 

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

 

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

 

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

 

ثم اضغط على Save

 

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

 

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

 

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

 

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