منتديات هبوب الجنوب

منتديات هبوب الجنوب (http://www.h-aljnoop.com/vb/index.php)
-   ۩۞۩ هبوب تطوير المواقع والمنتديات ۩۞۩ (http://www.h-aljnoop.com/vb/forumdisplay.php?f=386)
-   -   أهم 10 متغيرات الاستايل لون - خط - خلفیه صوره- صوره الهیدر- صوره الفوتر (http://www.h-aljnoop.com/vb/showthread.php?t=10015)

سمو الروح 18-02-2011 01:19 AM

أهم 10 متغيرات الاستايل لون - خط - خلفیه صوره- صوره الهیدر- صوره الفوتر
 
أهم 10 متغيرات من متغيرات الاستايل vb4

قمت بنقلها لعلمى بحاجة الكثير لها

ان شاء الله راح تستفيدوا كثيير

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

أول شيء أرید أن أفعله ھو التخلص من شعار vBulletin و قد تم رفع الصوره التى تريدها
في مجلد الصور على السیرفر الخاص بك:
http://up.mtwer.com/files/2820.jpg

بمجرد ما يتم رفع الصوره قم بتسجيل الدخول الى لوحه التحكم و اذهب الى"التحكم بالاستايلات"
ثم قم بالنقر على القائمه المنسدله بجوار الاستايل و اختار متغيرات الاستايل "StyleVars".
http://up.mtwer.com/files/2821.jpg
من قائمه المتغيرات على اليسار اختار "titleimage".
و ادخل مسار صوره الشعار على السيرفر فى المستطيل وانقر على زر حفظ.
وستكون النتيجه كما يلى:
http://up.mtwer.com/files/2822.jpg
كما ترون فان شعار vBulletin تم استبداله بالشعار الجديد و تلقائيا فان الطول
والعرض يتناسب مع الخلفيه لكن لون و شكل الخلفيه لا يناسب الشعار.
مما يقودنا إلى الخطوة 2.


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

بعد ان تم اختيار الشعار فى الخطوه الاولى اتبع نفس الخطوات لكن اختار المتغير "header_background"
http://up.mtwer.com/files/2823.jpg

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

http://up.mtwer.com/files/2824.jpg

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

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


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

http://up.mtwer.com/files/2825.jpg

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

http://up.mtwer.com/files/2826.jpg

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

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


http://up.mtwer.com/files/2827.jpg

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

http://up.mtwer.com/files/2828.jpg

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

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



http://up.mtwer.com/files/2829.jpg

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

http://up.mtwer.com/files/2830.jpg

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


http://up.mtwer.com/files/2831.jpg

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

http://up.mtwer.com/files/2832.jpg

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

http://up.mtwer.com/files/2833.jpg
أبعاد صوره الخلفيه هي 935 × 50 بكسل.

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

http://up.mtwer.com/files/2834.jpg

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

http://up.mtwer.com/files/2835.jpg

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

http://up.mtwer.com/files/2836.jpg

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

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

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

http://up.mtwer.com/files/2837.jpg

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

http://up.mtwer.com/files/2838.jpg

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


http://up.mtwer.com/files/2839.jpg

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

http://up.mtwer.com/files/2840.jpg

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

http://up.mtwer.com/files/2841.jpg

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

http://up.mtwer.com/files/2842.jpg

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

http://up.mtwer.com/files/2843.jpg

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

كانت ذكريات 18-02-2011 03:44 PM

رد: أهم 10 متغيرات الاستايل لون - خط - خلفیه صوره- صوره الهیدر- صوره الفوتر
 
يعطيك العافية

سمو الروح 20-02-2011 01:48 AM

رد: أهم 10 متغيرات الاستايل لون - خط - خلفیه صوره- صوره الهیدر- صوره الفوتر
 


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By Almuhajir
HêĽм √ 3.1 BY: ! ωαнαм ! © 2010
new notificatio by 9adq_ala7sas

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

Security team

This Forum used Arshfny Mod by islam servant