admin
11-01-2013, بتوقيت غرينيتش 06:12 AM
بسم الله الرحمن الرحيم
طبعا مدينة الآى بى معودانا دائما على المفاجات
النهاردة يا جماعة انا قررت انى اشرح طريقة لكم CCS الخاص بنسخة الجيل الثالث VBULLETIN G3
لكى يتمكن المستخدم العربى من تصميم ستايل style منتداة الشخصى بنفسة :rolleyes:
انا معتمد يا جماعة فى الدورة دى على بعض الإجتهادات الشخصية بنسبة 50%
وبعض الدروس الأجنبية بنسبة 50% وبكدة نكون وضعنا اللبنة الأولى فى تصميم
ستايل style منتديات IP.Board ندخل على الدورة انا مقسم الدورة لمجموعات يعنى كل يوم
إن شاء الله هشرح طريقة لكم 3 مناطق من الاستايل style مع كيفية تغيرة اللون والارتفاع والخط والحجم
كان نفسى انزل بيها مرة واحدة بس اعذرونى لضيق وقتى ندخل على الدرس مفصل الاول . :D :D
-----------------------------------------------------------
الدرس مفصل الآول :-
هو كيفية تغير خلفية المنتدى forum وتسمى ( Board background )
نتبع المسار الاتى لبدأالعمل فى ملف ipb_styles.css
Administration Control Panel
Look & Feel
اختيار الاستايل style الذى سنعمل علية وغالبا ما يكون الإفتراضى
CSS
ipb_styles.css
-----------------------------------------------------------
نقوم بالبحث عن :-
رمز Code:
/* ELEMENT STYLES */ body { background: #fff;
حيث الشكل التالى يقوم بتوضيح الآمر اكثر :blink:
قبل التعديل
http://www.ipbcity.net/forums/uploads/ccs/background1.jpg
نقوم بتغير fff الى اللون الذى نريدة مثلا C0C0C0
ليتعدل شكل الكود code السابق الى شكل الكود code التالى
رمز Code:
/* ELEMENT STYLES */ body { background: #C0C0C0;
بعد التعديل
http://www.ipbcity.net/forums/uploads/ccs/background2.jpg
ثم اضغط على Save
وبهذا أعزائى الآعضاء نكون انتهينا من تعديل خلفية المنتدى forum
-----------------------------------------------------------
الدرس مفصل الثانى :-
هو كيفية تغير عناوين الآقسام وتسمى ( maintitle )
نقوم بالبحث عن :-
رمز Code:
body .maintitle { background: #1D3652 url(http://www.ipbcity.net/public/style_images/gradient_bg.png) repeat-x left 50%;
حيث الشكل التالى يقوم بتوضيح الآمر اكثر :blink:
قبل التعديل
http://www.ipbcity.net/forums/uploads/ccs/Maintitle%20bars1.jpg
نقوم بتغير 1D3652 الى اللون الذى نريدة مثلا C73F17
ليصبح الكود code السابق بهذا الشكل
رمز Code:
body .maintitle { background: #C73F17 url(http://www.ipbcity.net/public/style_images/gradient_bg.png) repeat-x left 50%;]
بعد التعديل
http://www.ipbcity.net/forums/uploads/ccs/Maintitle%20bars2.jpg
اما إذا ارت تغير الخلفية الخاصة بهذا القسم الى صورة
فعليك إستبدال :-
رمز Code:
background: #C73F17 url(http://www.ipbcity.net/public/style_images/gradient_bg.png) repeat-x left 50%;
بالكود code التالى :-
رمز Code:
background: url(http://www.ipbcity.net/forums/public/style_images/orang/ipbcity.png) repeat-x 50%;
حيث ipbcity = اسم الصورة المختارة
حيث pin = صيغة الصورة حيث يمكن اختلافها كـــ Gif او Jepg
ثم اضغط على Save
وبهذا أعزائى الآعضاء نكون انتهينا من تعديل عناوين الآقسام
-----------------------------------------------------------
الدرس مفصل الثالث :-
هو كيفية تغير خلفية عناوين الاقسام الصغرى وتسمى ( Table column headers )
نقوم بالبحث عن :-
رمز Code:
/* Table column headers */ .header { background: #b6c7db;
حيث الشكل التالى يقوم بتوضيح الآمر اكثر :blink:
قبل التعديل
http://www.ipbcity.net/forums/uploads/ccs/Table%20column%20headers1.jpg
نقوم بتغير b6c7db الى اللون الذى نريدة مثلا C76114
ليتعدل شكل الكود code السابق الى شكل الكود code التالى
رمز Code:
/* Table column headers */ .header { background: #C76114;
بعد التعديل
http://www.ipbcity.net/forums/uploads/ccs/Table%20column%20headers2.jpg
اما إذا ارت تغير الخلفية الخاصة بهذا القسم الى صورة
فعليك إستبدال :-
رمز Code:
background: #C76114;
بالكود code التالى :-
رمز Code:
background: url(http://www.ipbcity.net/forums/public/style_images/orang/ipbcity.png) repeat-x 50%;
حيث ipbcity = اسم الصورة المختارة
حيث pin = صيغة الصورة حيث يمكن اختلافها كـــ Gif او Jepg
ثم اضغط على Save
وبهذا أعزائى الآعضاء نكون انتهينا من تعديل عناوين الآقسام الصغرى
-----------------------------------------------------------
وبكدة يكون انتهى درس مفصلنا اليوم بخصوص ال3 اقسام الللى تم شرح طريقةهم
الى لقاء أخر باذن الله فى تكملة الدروس والكمال لله عز وجل
الصور المصغرة المرفقة http://www.traidnt.net/vb/attachments/571508d1304310292t-background1.jpg (http://www.traidnt.net/vb/attachments/571508d1304310292-background1.jpg) http://www.traidnt.net/vb/attachments/571509d1304310292t-background2.jpg (http://www.traidnt.net/vb/attachments/571509d1304310292-background2.jpg) http://www.traidnt.net/vb/attachments/571510d1304310292t-maintitle%20bars1.jpg (http://www.traidnt.net/vb/attachments/571510d1304310292-maintitle%20bars1.jpg) http://www.traidnt.net/vb/attachments/571511d1304310292t-maintitle%20bars2.jpg (http://www.traidnt.net/vb/attachments/571511d1304310292-maintitle%20bars2.jpg) http://www.traidnt.net/vb/attachments/571512d1304310305t-table%20column%20headers1.jpg (http://www.traidnt.net/vb/attachments/571512d1304310305-table%20column%20headers1.jpg) http://www.traidnt.net/vb/attachments/571513d1304310305t-table%20column%20headers2.jpg (http://www.traidnt.net/vb/attachments/571513d1304310305-table%20column%20headers2.jpg)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
طبعا مدينة الآى بى معودانا دائما على المفاجات
النهاردة يا جماعة انا قررت انى اشرح طريقة لكم CCS الخاص بنسخة الجيل الثالث VBULLETIN G3
لكى يتمكن المستخدم العربى من تصميم ستايل style منتداة الشخصى بنفسة :rolleyes:
انا معتمد يا جماعة فى الدورة دى على بعض الإجتهادات الشخصية بنسبة 50%
وبعض الدروس الأجنبية بنسبة 50% وبكدة نكون وضعنا اللبنة الأولى فى تصميم
ستايل style منتديات IP.Board ندخل على الدورة انا مقسم الدورة لمجموعات يعنى كل يوم
إن شاء الله هشرح طريقة لكم 3 مناطق من الاستايل style مع كيفية تغيرة اللون والارتفاع والخط والحجم
كان نفسى انزل بيها مرة واحدة بس اعذرونى لضيق وقتى ندخل على الدرس مفصل الاول . :D :D
-----------------------------------------------------------
الدرس مفصل الآول :-
هو كيفية تغير خلفية المنتدى forum وتسمى ( Board background )
نتبع المسار الاتى لبدأالعمل فى ملف ipb_styles.css
Administration Control Panel
Look & Feel
اختيار الاستايل style الذى سنعمل علية وغالبا ما يكون الإفتراضى
CSS
ipb_styles.css
-----------------------------------------------------------
نقوم بالبحث عن :-
رمز Code:
/* ELEMENT STYLES */ body { background: #fff;
حيث الشكل التالى يقوم بتوضيح الآمر اكثر :blink:
قبل التعديل
http://www.ipbcity.net/forums/uploads/ccs/background1.jpg
نقوم بتغير fff الى اللون الذى نريدة مثلا C0C0C0
ليتعدل شكل الكود code السابق الى شكل الكود code التالى
رمز Code:
/* ELEMENT STYLES */ body { background: #C0C0C0;
بعد التعديل
http://www.ipbcity.net/forums/uploads/ccs/background2.jpg
ثم اضغط على Save
وبهذا أعزائى الآعضاء نكون انتهينا من تعديل خلفية المنتدى forum
-----------------------------------------------------------
الدرس مفصل الثانى :-
هو كيفية تغير عناوين الآقسام وتسمى ( maintitle )
نقوم بالبحث عن :-
رمز Code:
body .maintitle { background: #1D3652 url(http://www.ipbcity.net/public/style_images/gradient_bg.png) repeat-x left 50%;
حيث الشكل التالى يقوم بتوضيح الآمر اكثر :blink:
قبل التعديل
http://www.ipbcity.net/forums/uploads/ccs/Maintitle%20bars1.jpg
نقوم بتغير 1D3652 الى اللون الذى نريدة مثلا C73F17
ليصبح الكود code السابق بهذا الشكل
رمز Code:
body .maintitle { background: #C73F17 url(http://www.ipbcity.net/public/style_images/gradient_bg.png) repeat-x left 50%;]
بعد التعديل
http://www.ipbcity.net/forums/uploads/ccs/Maintitle%20bars2.jpg
اما إذا ارت تغير الخلفية الخاصة بهذا القسم الى صورة
فعليك إستبدال :-
رمز Code:
background: #C73F17 url(http://www.ipbcity.net/public/style_images/gradient_bg.png) repeat-x left 50%;
بالكود code التالى :-
رمز Code:
background: url(http://www.ipbcity.net/forums/public/style_images/orang/ipbcity.png) repeat-x 50%;
حيث ipbcity = اسم الصورة المختارة
حيث pin = صيغة الصورة حيث يمكن اختلافها كـــ Gif او Jepg
ثم اضغط على Save
وبهذا أعزائى الآعضاء نكون انتهينا من تعديل عناوين الآقسام
-----------------------------------------------------------
الدرس مفصل الثالث :-
هو كيفية تغير خلفية عناوين الاقسام الصغرى وتسمى ( Table column headers )
نقوم بالبحث عن :-
رمز Code:
/* Table column headers */ .header { background: #b6c7db;
حيث الشكل التالى يقوم بتوضيح الآمر اكثر :blink:
قبل التعديل
http://www.ipbcity.net/forums/uploads/ccs/Table%20column%20headers1.jpg
نقوم بتغير b6c7db الى اللون الذى نريدة مثلا C76114
ليتعدل شكل الكود code السابق الى شكل الكود code التالى
رمز Code:
/* Table column headers */ .header { background: #C76114;
بعد التعديل
http://www.ipbcity.net/forums/uploads/ccs/Table%20column%20headers2.jpg
اما إذا ارت تغير الخلفية الخاصة بهذا القسم الى صورة
فعليك إستبدال :-
رمز Code:
background: #C76114;
بالكود code التالى :-
رمز Code:
background: url(http://www.ipbcity.net/forums/public/style_images/orang/ipbcity.png) repeat-x 50%;
حيث ipbcity = اسم الصورة المختارة
حيث pin = صيغة الصورة حيث يمكن اختلافها كـــ Gif او Jepg
ثم اضغط على Save
وبهذا أعزائى الآعضاء نكون انتهينا من تعديل عناوين الآقسام الصغرى
-----------------------------------------------------------
وبكدة يكون انتهى درس مفصلنا اليوم بخصوص ال3 اقسام الللى تم شرح طريقةهم
الى لقاء أخر باذن الله فى تكملة الدروس والكمال لله عز وجل
الصور المصغرة المرفقة http://www.traidnt.net/vb/attachments/571508d1304310292t-background1.jpg (http://www.traidnt.net/vb/attachments/571508d1304310292-background1.jpg) http://www.traidnt.net/vb/attachments/571509d1304310292t-background2.jpg (http://www.traidnt.net/vb/attachments/571509d1304310292-background2.jpg) http://www.traidnt.net/vb/attachments/571510d1304310292t-maintitle%20bars1.jpg (http://www.traidnt.net/vb/attachments/571510d1304310292-maintitle%20bars1.jpg) http://www.traidnt.net/vb/attachments/571511d1304310292t-maintitle%20bars2.jpg (http://www.traidnt.net/vb/attachments/571511d1304310292-maintitle%20bars2.jpg) http://www.traidnt.net/vb/attachments/571512d1304310305t-table%20column%20headers1.jpg (http://www.traidnt.net/vb/attachments/571512d1304310305-table%20column%20headers1.jpg) http://www.traidnt.net/vb/attachments/571513d1304310305t-table%20column%20headers2.jpg (http://www.traidnt.net/vb/attachments/571513d1304310305-table%20column%20headers2.jpg)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
