العودة مطور Mtwer > دعم فني، و تطوير المنتديات > تطوير منتديات الجيل الرابع 4.0.0
تحديث الصفحة
كتاب و شرح تصميم ستايلات الجيل الرابع فى 10 خطوات

تطوير منتديات الجيل الرابع 4.0.0 شرح ونقاشات الجيل الرابع ، هاكات منتديات الاصدار 4.0.0 ، دروس في بي 4.0

إضافة رد
اسحب وشارك
 
LinkBack أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 11-11-2009, 03:28 AM

0

الصورة الرمزية raoaa
مُطوِّرْ مراقب

 
تاريخ التسجيل: 09-03-2008
الدولة: EGYPT
المشاركات: 331
raoaa is on a distinguished road
كتاب و شرح تصميم ستايلات الجيل الرابع فى 10 خطوات

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

تم بحمد الله الانتهاء من ترجمه كتاب "شرح تصميم ستايلات الجيل الرابع فى 10 خطوات" : تصميم ستايلات الجيل الرابع (كتاب و شرح تصميم ستايلات الجيل الرابع فى 10 خطوات)
الرابط الاصلى للكتاب الانجليزى من هنا





مقدمه عن كتاب شرح تصميم استايلات الجيل الرابع (كتاب و شرح تصميم ستايلات الجيل الرابع فى 10 خطوات):



بعد تثبیت المنتدى قد تحتاج الى اجراء بعد التغییرات على الاستایل الافتراضى للمنتدى لیناسب زوقك
یمكنك ذلك بسهوله من خلال تعدیل الاستایل و اختیار متغیرات الاستایل
متغیرات الاستایل تسمح لك بتغییر كل شئ فى منتداك
من لون خط الى خلفیه صوره الى صوره الهیدر و صوره الفوتر
فى البدایه قد نتخوف من الامر و لكنها فى الحقیقه سهله و بسیطه جدا فى الاستخدام
و فیما یلى سیتم شرح هذه المتغیرات فى ١٠ خطوات سهله .


الخطوه ١ : تغییر شعار المنتدى

أول شيء أرید أن أفعله ھو التخلص من شعار vBulletin و قد تم رفع الصوره التى تریدھا في مجلد الصور على السیرفر الخاص بك:



بمجرد ما يتم رفع الصوره قم بتسجيل الدخول الى لوحه التحكم و اذهب الى"التحكم بالاستايلات"
ثم قم بالنقر على القائمه المنسدله بجوار الاستايل و اختار متغيرات الاستايل "StyleVars".


من قائمه المتغيرات على اليسار اختار "titleimage".
و ادخل مسار صوره الشعار على السيرفر فى المستطيل وانقر على زر حفظ.
وستكون النتيجه كما يلى:


كما ترون فان شعار vBulletin تم استبداله بالشعار الجديد و تلقائيا فان الطول و العرض يتناسب مع الخلفيه لكن لون و شكل الخلفيه لا يناسب الشعار.
مما يقودنا إلى الخطوة 2.


الخطوه 2 : تغيير خلفيه الهيدر

بعد ان تم اختيار الشعار فى الخطوه الاولى اتبع نفس الخطوات لكن اختار المتغير "header_background"


كما تلاحظ فى الصوره بالاسفل فان صوره الخلفيه تم اختيارها بتدرج يناسب صوره الشعار و طبعا تناسب ارتفاعه ايضا
والنتيجة تبدو أفضل بكثير بعد ذلك من قبل :




لا نريد التوقف عند هذا الحد
وبذلك ننتقل إلى الخطوة 3 : تغيير خلفيه الازرار.


الخطوة 3 : تغيير خلفيه الازرار.



على الرغم من ان الشعار و صوره التدرج للخلفيه يبدو متناسقين ولكن خلفيه الازرار تبدو غير متناسقه
يجب رفع صوره مناسبه ايضا ولتكن بنفس تدرج خلفيه الشعار
و اتبع نفس الخطوات لكن اختار المتغير "navbar_background"




بعد وضع رابط الصوره المرفوعه اختار حفظ , و ستجد الشكل اصبح كما يلى:



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


الخطوه 4 : تغيير خلفيه المنتدى





بالنسبة لي كانت الخطوة التالية هي تغيير الخلفية.
لقد جعلت خلفيه الازرار قاتمه لكى اجعل خلفيه المنتدى بنفس لونها الغامق
و طبعا اتبع نفس الخطوات السابقه لتغيير الخلفيه مع اختيار المتغير "doc_backgroundColor".




هذا التغيير الصغيرة عمل فارق كبير فى شكل الصفحه
ولكن ، كان هناك مشكلة واحدة صغيرة.
الحدود بين الهيدر وجسم المنتدى هو لون مختلف.
انها لم تعد تتناسب مع الخلفية.
هذا يقودني مباشرة إلى الخطوة 5.


الخطوه 5 : تناسق الحد الفاصل بين الهيدر و جسم المنتدى مع الخلفيه




لتصحيح هذا العيب الصغيرة على أسلوبي ، أنا اختارت المتغير "navbar_border" من القائمة على اليسار.
نزلت إلى "اللون" ، وبدلا من ادخال نفس رمز اللون فى الخطوة 4 ، اختارت خيار الشفافية او عدم وضع لون.




الخطوه 6 : خلفيه رأس القسم 





لون الخلفيه لرأس القسم لا تبدو سيئه و لكنى اردت ان اضع خلفه صوره
و لعمل ذلك يجب اختيار المتغير "blockhead_background" و وضع رابط الصوره و الضغط على حفظ.




بضغطه واحده اصبح لدى هذا الشكل:


أبعاد صوره الخلفيه هي 935 × 50 بكسل.

الخطوه 7 : خلفيه زيل المنتدى




يعد ان قمت بعمل الخلفيه لرأس القسم اردت ان اضيف صوره لزيل المنتدى ايضا
و لعمل ذلك اختار متغير "footer_background".
ستحتاج صوره بمقاس 32 × 935 بكسل.




تكون النتيجه كما بالشكل التالى:



من الواضح ان الروابط غير ظاهر و لونها غير مناسب
و لكن هذا يمكن حله بتغيير لون روابط زيل المنتدى كما سنشاهد فى الخطوه التاليه.


الخطوه 8 : تغيير لون روابط زيل المنتدى


من اجل تغيير رابط زيل المنتدى يجب ان تختار متغير " footer_link_color".



بعد التدقيق فى الوان الصوره اختارت لون مناسب كما هو واضح فى الصوره:



الخطوه 9 : تغيير خلفيه جسم المنتدى





بعد كل هذه التغييرات اصبح لون خلفيه جسم المنتدى غير مناسب
ولتغييره اذهب الى متغير "body_background" و ضع اللون المناسب لك
و ستكون النتيجه كما يلى:




الخطوه 10 : تغيير لون خلفيه زيل القسم




كنت على وشك الانتهاء من الاستايل
ولكن لاحظت ان زيل الاقسام غير مناسب
فحصت المتغيرات وجدت انه يمكن تغيير خلفيه الزيل ايضا بصوره
من خلال هذا المتغير"blockfoot_background"
أبعاد الصوره المناسبه هي 40 × 750 بكسل




مثل ما فعلت فى الخلفيات السابقه اختارت الخانه التى بجانب "Background Image" و وضعت رابط الصوره
و ظهرت هكذا كما فى الصوره التاليه:




و هذه هى اخر خطوه استخدمتها فى تصميم الاستايل.

ختاما

هذه المتغيرات التى تم استخدامها هى الاساسيه فى تصميم اى استايل
و لكن يوجد الكثير من المتغيرات تركتها لكم لكى تكتشفوها بانفسكم
وهى تجعل للاستايل الخاص بكم تميز عن غيره من الاستايلات باذن الله
بذلك يكون الدرس الاول فى هذا المجال انتهى
و اتمنى ان تكون الفكره وصلت ببساطه لكم و توضيح ان الامر اصبح اسهل من قبل
بالتوفيق للجميع



مرفق الكتاب كامل + الموضوع فى ملف mht


==================================
الكتاب الاصلى لـ: vBulletin 4.0 Team
==================================
ترجمه raoaa
لمطور مطور - Powered by Mlffat
وتوب لاين استضافة شركة توب لاين، استضافة ، سيرفر ، تصميم موقع ، تصميم منتدى
الموضوع الاصلى http://www.mtwer.com/vb/t16943.html (كتاب و شرح تصميم ستايلات الجيل الرابع فى 10 خطوات)
==================================


توقيعي


لا إله إلا الله * محمد رسول الله
سبحــ الله ــان و بحمده سبحــ الله ــان العظيم

\\\\\\\\\\\\®////////////

آخر تعديل بواسطة raoaa ، 12-11-2009 الساعة 01:26 AM
رد مع اقتباس
  #2  
قديم 11-11-2009, 03:45 AM

0

الصورة الرمزية مطور
مُطوِّرْ مسؤول

 
تاريخ التسجيل: 04-03-2008
المشاركات: 4,578
مطور is on a distinguished road

يعطيكي العافية يا روعة

شرح مميز جدا جدا وفي وقته بيكون مفيد جدا لمصممين الاستايلات

تحياتي


توقيعي


‏مُطوِّرْ
خطوتك الأولى من مستخدم إلى مطور
رد مع اقتباس
  #3  
قديم 11-11-2009, 03:56 AM

0

لايوجد صورة رمزية لـ محب الشيخين
مُطوِّرْ مراقب عام

 
تاريخ التسجيل: 22-07-2008
الدولة: دار الباطل
المشاركات: 2,159
محب الشيخين is on a distinguished road

السلام عليكم ورحمة الله وبركاته

عملا متميز من اخت فاضلة

وفقك الله دوما


توقيعي


إسال ونحن نجيب

www.esal.info

أول موقع عربى متخصص فى مساعدة الجميع فى كافة المجالات
لا تتردد فى مساعدة الاخريين
رد مع اقتباس
  #4  
قديم 11-11-2009, 04:42 AM

0

الصورة الرمزية raoaa
مُطوِّرْ مراقب

 
تاريخ التسجيل: 09-03-2008
الدولة: EGYPT
المشاركات: 331
raoaa is on a distinguished road

العفو اخوانى شرفنى مروركم


توقيعي


لا إله إلا الله * محمد رسول الله
سبحــ الله ــان و بحمده سبحــ الله ــان العظيم

\\\\\\\\\\\\®////////////
رد مع اقتباس
  #5  
قديم 11-11-2009, 10:14 AM

0

الصورة الرمزية الجزار99
مُطوِّرْ مراقب عام

 
تاريخ التسجيل: 09-03-2008
الدولة: Egypt -- sharqia -- menia elkamh-ElSadeeN
المشاركات: 18,580
الجزار99 is on a distinguished road
إرسال رسالة عبر مراسل MSN إلى الجزار99 إرسال رسالة عبر مراسل Yahoo إلى الجزار99

بارك الله فيكي اختي الكريمة


توقيعي


((ولا تحسبن الذين قتلوا في سبيل اللّه أمواتاً بل أحياء عند ربهم يرزقون))

منتدي الجزار99

خدمة الدعم الفني المدفوع
قياس سرعه الانترنت

حسابي علي الفيس بوك
الاسم الحقيقي
ESLAM FATHY

ALGZAR99.CoM on FaceBook



رد مع اقتباس
  #6  
قديم 11-11-2009, 10:15 AM

0

الصورة الرمزية الجزار99
مُطوِّرْ مراقب عام

 
تاريخ التسجيل: 09-03-2008
الدولة: Egypt -- sharqia -- menia elkamh-ElSadeeN
المشاركات: 18,580
الجزار99 is on a distinguished road
إرسال رسالة عبر مراسل MSN إلى الجزار99 إرسال رسالة عبر مراسل Yahoo إلى الجزار99

انا لسة محمل الكتاب الحين لية م عملتي الكتاب بصيغة كتاب الكتروني وليس pdf


توقيعي


((ولا تحسبن الذين قتلوا في سبيل اللّه أمواتاً بل أحياء عند ربهم يرزقون))

منتدي الجزار99

خدمة الدعم الفني المدفوع
قياس سرعه الانترنت

حسابي علي الفيس بوك
الاسم الحقيقي
ESLAM FATHY

ALGZAR99.CoM on FaceBook



رد مع اقتباس
  #7  
قديم 11-11-2009, 11:46 PM

0

لايوجد صورة رمزية لـ raye2
مطور محترف

 
تاريخ التسجيل: 16-03-2008
المشاركات: 101
raye2 is on a distinguished road

مشكووووووووووري بارك الله فيكم جميع

شكرا عالموضوع والشرح المميز للجيل الجديد

رد مع اقتباس
  #8  
قديم 12-11-2009, 05:43 AM

0

لايوجد صورة رمزية لـ فارس الكلمة
مطور محترف

 
تاريخ التسجيل: 07-04-2009
المشاركات: 415
فارس الكلمة is on a distinguished road

شرح اكثر من رائع حقيقه

اشكرك اختي على المجهود المميز

تحياتي لك

رد مع اقتباس
  #9  
قديم 13-11-2009, 02:26 AM

0

لايوجد صورة رمزية لـ nadeer
مطور جديد

 
تاريخ التسجيل: 13-11-2009
المشاركات: 1
nadeer is on a distinguished road

السلام عليكم

بارك الله فيكم يستحق الاقتناء للرجوع له جهود جباره

رد مع اقتباس
  #10  
قديم 14-11-2009, 08:03 AM

0

الصورة الرمزية توب لاين
مطور خبير

 
تاريخ التسجيل: 07-03-2008
الدولة: www.tl4s.com.sa
المشاركات: 501
توب لاين is on a distinguished road

يعطيك العافية ترجمة جيدة وموضوع هام جداً.

رد مع اقتباس
  #11  
قديم 16-11-2009, 01:08 PM

0

الصورة الرمزية نواف
مطور محترف

 
تاريخ التسجيل: 22-07-2008
المشاركات: 263
نواف is on a distinguished road

ماشاءلله مطور دائماً صاحب الحصريات

سبق وشاهدنا شرح التعريف والحين تصميم الأستايلات,,

تستحقون الشكر..والله يعطيك العافيه ياروعة عمل رائع


توقيعي


سبحان الله وبحمده سبحان الله العظيم
رد مع اقتباس
  #12  
قديم 17-11-2009, 01:11 PM

0

لايوجد صورة رمزية لـ الباهي
مطور محترف

 
تاريخ التسجيل: 21-07-2008
المشاركات: 207
الباهي is on a distinguished road

السلام عليكم

جهد رائع يستحق كل الاعجاب والتقدير.

احتسب الله صنيعكم هذا في موازين حسناتكم.


توقيعي


ماك ارابيا
مجتمع ماكنتوش العربي
هو موقع يهدف الى نشر التوعية والمعرفة وتبادل الخبرات في نظام ماك واهميته للمستخدم العربي. مقالات، تحليلات، اخبار والكثير عن عالم الماكنتوش واجهزة ابل ستجده في هذا الموقع.
ماك اربيا يعتمد علي المنتديات الحواريه التي عن طريقها يتبادل مستخدمي ماكنتوش العرب المعلومات والخبرات حول نظام التشغيل الماك وما يخصه من برامج والعاب وتحديثات.
http://www.macarabia.net
رد مع اقتباس
  #13  
قديم 17-11-2009, 08:34 PM

0

الصورة الرمزية raoaa
مُطوِّرْ مراقب

 
تاريخ التسجيل: 09-03-2008
الدولة: EGYPT
المشاركات: 331
raoaa is on a distinguished road

اشكركم جميعا و باذن اللى جاى احلى


توقيعي


لا إله إلا الله * محمد رسول الله
سبحــ الله ــان و بحمده سبحــ الله ــان العظيم

\\\\\\\\\\\\®////////////
رد مع اقتباس
  #14  
قديم 19-11-2009, 01:32 AM

0

لايوجد صورة رمزية لـ Creative
مطور جديد

 
تاريخ التسجيل: 19-11-2009
المشاركات: 1
Creative is on a distinguished road

عندي سؤال بسيط

هل لابد نتعلم لغة css

أو نستخدم برنامج يدعم لغة css

لانه في موقع شفت يقولون الله يعين المصممين وماعرف ايش عشان النسخه ماتدعم الاكواد مثل الافرنت بيج وهذي الامور

رد مع اقتباس
  #15  
قديم 19-11-2009, 08:00 AM

0

الصورة الرمزية raoaa
مُطوِّرْ مراقب

 
تاريخ التسجيل: 09-03-2008
الدولة: EGYPT
المشاركات: 331
raoaa is on a distinguished road

فعلا التصميم يعتمد على لغه css
ولكن ده لا يمنع اضافه اطارات مثلا لجداول
ولكن تكون الاكواد بلغه xhtml
بالتوفيق


توقيعي


لا إله إلا الله * محمد رسول الله
سبحــ الله ــان و بحمده سبحــ الله ــان العظيم

\\\\\\\\\\\\®////////////
رد مع اقتباس
إضافة رد

العلامات المرجعية

الكلمات الدلالية (Tags)
ستايلات الجيل الرابع, ستايلات vb4, شرح تصميم ستايلات, كتاب شرح تصميم ستايلات

مواضيع جديدة في قسم تطوير منتديات الجيل الرابع 4.0.0

أدوات الموضوع
انواع عرض الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا يمكنك اضافة مرفقات
لا يمكنك تعديل مشاركاتك

BB code متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة

الانتقال السريع

LinkBacks (?)
LinkBack to this Thread: http://www.mtwer.com/vb/t16943.html
أرسلت بواسطة For Type التاريخ
كتاب و شرح تصميم ستايلات الجيل الرابع فى 10 خطوات - منتديات انتظرته This thread Refback 14-03-2011 10:30 PM
إستفسـارات التصاميـم | 18 | ...شكر للمميزين+| يرجى قراءة الفهرسة قبل كتابة السؤال | - الصفحة رقم 12 - منتديات شبكة الاقلاع ® This thread Refback 23-02-2011 09:32 PM
كتاب و شرح تصميم ستايلات الجيل الرابع فى 10 خطوات This thread Refback 20-10-2010 11:41 PM
ط·ط±ظٹظ‚ط© طھطµظ…ظٹظ… ظ…ظ†طھط¯ظ‰ vb ??? - طھظ…طھ ط§ظ„ط¥ط¬ط§ط¨ط© ط¹ظ†ظ‡ - Google ط¥ط¬ط§ط¨ط§طھ This thread Refback 13-10-2010 08:06 PM

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
دورة تصميم استايل الجيل الرابع الجزء الاول ((بالفلاش)) ANOOOS دروس و برامج تصميم المواقع وبرامج التصميم 5 26-11-2011 07:01 AM
دورة تصميم استايل الجيل الرابع الجزء الثاني ((بالفلاش)) ANOOOS دروس و برامج تصميم المواقع وبرامج التصميم 3 24-03-2011 03:49 PM
مشاكل الجيل الرابع مع الاكسبلورر 6 - تحدث مع عضو فريق الجيل الرابع مباشرتاً MARCO1 تطوير منتديات الجيل الرابع 4.0.0 3 03-11-2010 04:56 PM
شرح التراجع من الجيل الرابع الي الجيل الثالث بالصور و بدون اي اخطاء pop01 تطوير منتديات الجيل الثالث 3.6 3.7 3.8 4 27-10-2010 02:29 AM



جميع الأوقات بتوقيت GMT +3. الساعة الآن 02:44 AM.
Search Engine Friendly URLs by vBSEO 3.5.2

الحقوق محفوظة لكل المطورين والمواقع العربية

Security team