walid
10-30-2013, بتوقيت غرينيتش 10:12 PM
http://www.dzbatna.com/images/icons/icon30.gif ط£ظ‡ظ… 10 ظ…طھط؛ظٹط±ط§طھ ط§ظ„ط§ط³طھط§ظٹظ„( ظ„ظˆظ† - ط®ط· - ط®ظ„ظپیظ‡ طµظˆط±ظ‡- طµظˆط±ظ‡ ط§ظ„ظ‡یط¯ط±- طµظˆط±ظ‡ ط§ظ„ظپظˆطھط±) ط£ظ„ط® (http://www.dzbatna.com/t1409716/)
أهم 10 متغيرات من متغيرات الاستايل style vBulletin 4
قمت بنقلها لعلمى بحاجة الكثير لها
ان شاء الله راح تستفيدوا كثيير
************************************************
الخطوه ١ : تغییر شعار المنتدى forum
************************************************
أول شيء أرید أن أفعله ھو التخلص من شعار فيبويلتن في بي vBulletin و قد تم رفع الصوره التى تریدھا في مجلد الصور على السیرفر الخاص بك:
http://up.mtwer.com/files/2820.jpg
بمجرد ما يتم رفع الصوره قم بتسجيل الدخول الى لوحه التحكم و اذهب الى"التحكم بالاستايل styleات"
ثم قم بالنقر على القائمه المنسدله بجوار الاستايل style و اختار متغيرات الاستايل style "StyleVars".
http://up.mtwer.com/files/2821.jpg
من قائمه المتغيرات على اليسار اختار "titleimage".
و ادخل مسار صوره الشعار على السيرفر SERVER فى المستطيل وانقر على زر حفظ.
وستكون النتيجه كما يلى:
http://up.mtwer.com/files/2822.jpg
كما ترون فان شعار فيبويلتن في بي vBulletin تم استبداله بالشعار الجديد و تلقائيا فان الطول و العرض يتناسب مع الخلفيه لكن لون و شكل الخلفيه لا يناسب الشعار.
مما يقودنا إلى الخطوة 2.
************************************************
الخطوه 2 : تغيير خلفيه الهيدر header
************************************************
بعد ان تم اختيار الشعار فى الخطوه الاولى اتبع نفس الخطوات لكن اختار المتغير "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
يمكنك التوقف هنا إذا كنت راضيا عن كيفية عرض الصفحة.
الخطوات التالية سوف تحدد اللمسات الصغيرة الأخرى التي يمكنك استخدامها لمزيد من تعديل مظهر المنتدى forum الخاص بك.
************************************************
الخطوه 4 : تغيير خلفيه المنتدى forum
************************************************
http://up.mtwer.com/files/2827.jpg
بالنسبة لي كانت الخطوة التالية هي تغيير الخلفية.
لقد جعلت خلفيه الازرار قاتمه لكى اجعل خلفيه المنتدى forum بنفس لونها الغامق
و طبعا اتبع نفس الخطوات السابقه لتغيير الخلفيه مع اختيار المتغير "doc_backgroundColor".
http://up.mtwer.com/files/2828.jpg
هذا التغيير الصغيرة عمل فارق كبير فى شكل الصفحه
ولكن ، كان هناك مشكلة واحدة صغيرة.
الحدود بين الهيدر header وجسم المنتدى forum هو لون مختلف.
انها لم تعد تتناسب مع الخلفية.
هذا يقودني مباشرة إلى الخطوة 5.
************************************************
الخطوه 5 : تناسق الحد الفاصل بين الهيدر header و جسم المنتدى forum مع الخلفيه
************************************************
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 : خلفيه زيل المنتدى forum
************************************************
http://up.mtwer.com/files/2834.jpg
يعد ان قمت بعمل الخلفيه لرأس القسم اردت ان اضيف صوره لزيل المنتدى forum ايضا
و لعمل ذلك اختار متغير "footer_background".
ستحتاج صوره بمقاس 32 × 935 بكسل.
http://up.mtwer.com/files/2835.jpg
تكون النتيجه كما بالشكل التالى:
http://up.mtwer.com/files/2836.jpg
من الواضح ان الروابط غير ظاهر و لونها غير مناسب
و لكن هذا يمكن حله بتغيير لون روابط زيل المنتدى forum كما سنشاهد فى الخطوه التاليه.
************************************************
الخطوه 8 : تغيير لون روابط زيل المنتدى forum
************************************************
من اجل تغيير رابط زيل المنتدى forum يجب ان تختار متغير " footer_link_color".
http://up.mtwer.com/files/2837.jpg
بعد التدقيق فى الوان الصوره اختارت لون مناسب كما هو واضح فى الصوره:
http://up.mtwer.com/files/2838.jpg
************************************************
الخطوه 9 : تغيير خلفيه جسم المنتدى forum
************************************************
http://up.mtwer.com/files/2839.jpg
بعد كل هذه التغييرات اصبح لون خلفيه جسم المنتدى forum غير مناسب
ولتغييره اذهب الى متغير "body_background" و ضع اللون المناسب لك
و ستكون النتيجه كما يلى:
http://up.mtwer.com/files/2840.jpg
************************************************
الخطوه 10 : تغيير لون خلفيه زيل القسم
************************************************
http://up.mtwer.com/files/2841.jpg
كنت على وشك الانتهاء من الاستايل style
ولكن لاحظت ان زيل الاقسام غير مناسب
فحصت المتغيرات وجدت انه يمكن تغيير خلفيه الزيل ايضا بصوره
من خلال هذا المتغير"blockfoot_background"
أبعاد الصوره المناسبه هي 40 × 750 بكسل
http://up.mtwer.com/files/2842.jpg
مثل ما فعلت فى الخلفيات السابقه اختارت الخانه التى بجانب "Background Image" و وضعت رابط الصوره
و ظهرت هكذا كما فى الصوره التاليه:
http://up.mtwer.com/files/2843.jpg
و هذه هى اخر خطوه استخدمتها فى تصميم الاستايل style.
الموضوع الاصلى :
كتاب و شرح طريقة تصميم ستايل styleات الجيل الرابع VBULLETIN G4 فى 10 خطوات (http://www.dzbatna.com/t1382461/)
مع التحية .
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
أهم 10 متغيرات من متغيرات الاستايل style vBulletin 4
قمت بنقلها لعلمى بحاجة الكثير لها
ان شاء الله راح تستفيدوا كثيير
************************************************
الخطوه ١ : تغییر شعار المنتدى forum
************************************************
أول شيء أرید أن أفعله ھو التخلص من شعار فيبويلتن في بي vBulletin و قد تم رفع الصوره التى تریدھا في مجلد الصور على السیرفر الخاص بك:
http://up.mtwer.com/files/2820.jpg
بمجرد ما يتم رفع الصوره قم بتسجيل الدخول الى لوحه التحكم و اذهب الى"التحكم بالاستايل styleات"
ثم قم بالنقر على القائمه المنسدله بجوار الاستايل style و اختار متغيرات الاستايل style "StyleVars".
http://up.mtwer.com/files/2821.jpg
من قائمه المتغيرات على اليسار اختار "titleimage".
و ادخل مسار صوره الشعار على السيرفر SERVER فى المستطيل وانقر على زر حفظ.
وستكون النتيجه كما يلى:
http://up.mtwer.com/files/2822.jpg
كما ترون فان شعار فيبويلتن في بي vBulletin تم استبداله بالشعار الجديد و تلقائيا فان الطول و العرض يتناسب مع الخلفيه لكن لون و شكل الخلفيه لا يناسب الشعار.
مما يقودنا إلى الخطوة 2.
************************************************
الخطوه 2 : تغيير خلفيه الهيدر header
************************************************
بعد ان تم اختيار الشعار فى الخطوه الاولى اتبع نفس الخطوات لكن اختار المتغير "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
يمكنك التوقف هنا إذا كنت راضيا عن كيفية عرض الصفحة.
الخطوات التالية سوف تحدد اللمسات الصغيرة الأخرى التي يمكنك استخدامها لمزيد من تعديل مظهر المنتدى forum الخاص بك.
************************************************
الخطوه 4 : تغيير خلفيه المنتدى forum
************************************************
http://up.mtwer.com/files/2827.jpg
بالنسبة لي كانت الخطوة التالية هي تغيير الخلفية.
لقد جعلت خلفيه الازرار قاتمه لكى اجعل خلفيه المنتدى forum بنفس لونها الغامق
و طبعا اتبع نفس الخطوات السابقه لتغيير الخلفيه مع اختيار المتغير "doc_backgroundColor".
http://up.mtwer.com/files/2828.jpg
هذا التغيير الصغيرة عمل فارق كبير فى شكل الصفحه
ولكن ، كان هناك مشكلة واحدة صغيرة.
الحدود بين الهيدر header وجسم المنتدى forum هو لون مختلف.
انها لم تعد تتناسب مع الخلفية.
هذا يقودني مباشرة إلى الخطوة 5.
************************************************
الخطوه 5 : تناسق الحد الفاصل بين الهيدر header و جسم المنتدى forum مع الخلفيه
************************************************
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 : خلفيه زيل المنتدى forum
************************************************
http://up.mtwer.com/files/2834.jpg
يعد ان قمت بعمل الخلفيه لرأس القسم اردت ان اضيف صوره لزيل المنتدى forum ايضا
و لعمل ذلك اختار متغير "footer_background".
ستحتاج صوره بمقاس 32 × 935 بكسل.
http://up.mtwer.com/files/2835.jpg
تكون النتيجه كما بالشكل التالى:
http://up.mtwer.com/files/2836.jpg
من الواضح ان الروابط غير ظاهر و لونها غير مناسب
و لكن هذا يمكن حله بتغيير لون روابط زيل المنتدى forum كما سنشاهد فى الخطوه التاليه.
************************************************
الخطوه 8 : تغيير لون روابط زيل المنتدى forum
************************************************
من اجل تغيير رابط زيل المنتدى forum يجب ان تختار متغير " footer_link_color".
http://up.mtwer.com/files/2837.jpg
بعد التدقيق فى الوان الصوره اختارت لون مناسب كما هو واضح فى الصوره:
http://up.mtwer.com/files/2838.jpg
************************************************
الخطوه 9 : تغيير خلفيه جسم المنتدى forum
************************************************
http://up.mtwer.com/files/2839.jpg
بعد كل هذه التغييرات اصبح لون خلفيه جسم المنتدى forum غير مناسب
ولتغييره اذهب الى متغير "body_background" و ضع اللون المناسب لك
و ستكون النتيجه كما يلى:
http://up.mtwer.com/files/2840.jpg
************************************************
الخطوه 10 : تغيير لون خلفيه زيل القسم
************************************************
http://up.mtwer.com/files/2841.jpg
كنت على وشك الانتهاء من الاستايل style
ولكن لاحظت ان زيل الاقسام غير مناسب
فحصت المتغيرات وجدت انه يمكن تغيير خلفيه الزيل ايضا بصوره
من خلال هذا المتغير"blockfoot_background"
أبعاد الصوره المناسبه هي 40 × 750 بكسل
http://up.mtwer.com/files/2842.jpg
مثل ما فعلت فى الخلفيات السابقه اختارت الخانه التى بجانب "Background Image" و وضعت رابط الصوره
و ظهرت هكذا كما فى الصوره التاليه:
http://up.mtwer.com/files/2843.jpg
و هذه هى اخر خطوه استخدمتها فى تصميم الاستايل style.
الموضوع الاصلى :
كتاب و شرح طريقة تصميم ستايل styleات الجيل الرابع VBULLETIN G4 فى 10 خطوات (http://www.dzbatna.com/t1382461/)
مع التحية .
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©