بسم الله الرحمن الرحيم
طبعا
مدينة الآى بى معودانا دائما على المفاجات
النهاردة يا جماعة انا قررت انى اشرح لكم
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 اقسام الللى تم شرحهم
الى لقاء أخر باذن الله فى تكملة الدروس والكمال لله عز وجل