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

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

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

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

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

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

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

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

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


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

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

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

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


Administration Control Panel

Look & Feel

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

CSS

ipb_styles.css

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

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

كود:
/* ELEMENT STYLES */

body {
 background: #fff;
حيث الشكل التالى يقوم بتوضيح الآمر اكثر :blink:

قبل التعديل




نقوم بتغير 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%;
حيث الشكل التالى يقوم بتوضيح الآمر اكثر :blink:

قبل التعديل



نقوم بتغير 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;
حيث الشكل التالى يقوم بتوضيح الآمر اكثر :blink:

قبل التعديل




نقوم بتغير 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 اقسام الللى تم شرحهم

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