vBulletin 4.0 > عشر خطوات لتصمم قالبك

[admin]

طبعاً الفي بي 4 عملوا تغيير في طريقة عمل الاستايلات وتعديلها وفي البلوق تبعهم حاطين طريقة عمل استايل لمنتداك في عشر خطوات

طبعا انتا تقدر تنسخ الاستايل الحالي وتشتغل على النسخة المنسوخة الين تخلص بعدين ممكن تعتمدها

طيب راح نبدا بالخطوات كل خطوة في رد بس الله الله بالتفاعل يا شباب واللي يقدر يكمل ولا يرده الا كيبورده http://www.web-enter.net/vb/imgcache/719.png

الخطوة الاولى
تغيير شعار المنتدى
عشان تغير صورة شعار المنتدى في الاصدار الجديد تروح على لوحة التحكم بعدين تروح على الاوامر بالترتيب
Style Manager > StyleVars > titleimage

تختار صورة الشعار وتحط المسار تبع الصورة بعدين ترعص على زر حفظ

http://www.web-enter.net/vb/imgcache/720.png (http://www.web-enter.net/vb/index.php)


راح تشوف بعدها صور الشعار


http://www.web-enter.net/vb/imgcache/721.png (http://www.web-enter.net/vb/index.php)


الصور راح تكون باينة بس الخلفية مش ولابد عشان كذا راح نعدلها في الخطوة نمبر تو

[admin]

لخطوة الثانية
تغيير خلفية الهيدر عشان تتماشى مع صورة الشعار
تحتاج لصورة زي هذه فيها تدرج
http://www.web-enter.net/vb/imgcache/722.png (http://www.web-enter.net/vb/index.php)
بعدين من لوحة التحكم تروح على الاوامر بالترتيب

Style Manager > StyleVars > header_background
تختار الصورة وتحدد المسار بعدين كليك على حفظ

http://www.web-enter.net/vb/imgcache/723.png (http://www.web-enter.net/vb/index.php)

هيدر الصفحة بعد الحركة اللي طافت

http://www.web-enter.net/vb/imgcache/724.png (http://www.web-enter.net/vb/index.php)

وممكن تعبي الفراغات لو صارت وتحط في صندوق اللون نفس الوان الصورة

[admin]

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

Style Manager > StyleVars > navbar_background


http://www.web-enter.net/vb/imgcache/725.png (http://www.web-enter.net/vb/index.php)

شوف كذا النتيجة


http://www.web-enter.net/vb/imgcache/726.png (http://www.web-enter.net/vb/index.php)

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

Steve Machol

[admin]

الخطوة الرابعة

تغيير لون الخلفية للمنتدى
نعدل اللون والطريقة تروح للخطوات بالترتيب
Style Manager > StyleVars > doc_backgroundColor

http://www.web-enter.net/vb/imgcache/728.png (http://www.web-enter.net/vb/index.php)

تغير لون الخلفية يغير من شكل المنتدى

http://www.web-enter.net/vb/imgcache/729.png (http://www.web-enter.net/vb/index.php)

بس لو تشوف انو اللون بين الهيدر والمنتدى مختلف عن لون الخلفية وهذا راح نغيره في الخطوة التالية

[admin]

الخطوة الخامسة

تعديل لون الحد السفلي للناف بار عشان يتماشى مع الخلفية
زي ماهو واضح لون حد الناف بار مو مزبوط عشان كذا ممكن نصلح المشكلة وبدال ما نحط لون نختار خيار الشفافية الزر اللي في الركن والاوامر عشان التنفيذ بالترتيب
Style Manager > StyleVars > navbar_border
نختار اخر واحد اللون Color


http://www.web-enter.net/vb/imgcache/730.png (http://www.web-enter.net/vb/index.php)

شوف المساحة اللي بدون لون خلت الخلفية تظهر

http://www.web-enter.net/vb/imgcache/731.png (http://www.web-enter.net/vb/index.php)

[admin]

الخطوة السادسة

راح نحط صورة خلفية لهيدر الجداول في المنتدى

http://www.web-enter.net/vb/imgcache/732.png (http://www.web-enter.net/vb/index.php)

اللون الاصلي مش بطال بس نحب نعمل لمسة على المنتدى
نرفع الصورة بعدين ننفذ الخطوات بالترتيب ونحط مسار الصورة
Style Manager > StyleVars > blockhead_background

http://www.web-enter.net/vb/imgcache/733.png (http://www.web-enter.net/vb/index.php)

نقرة وحده بعد كذا راح تشوف النتيجة

http://www.web-enter.net/vb/imgcache/734.png (http://www.web-enter.net/vb/index.php)

الصورة مقاسها 935 x 50 pixels

[admin]

الخطوة السابعة

راح نغير زي الخطوة اللي فوق بس هذه المرة راح نغير خلفية الفوتير اللي اسفل المنتدى footer

نختار الصورة مقياسها 935x32 pixels ونرفعها للمنتدى

http://www.web-enter.net/vb/imgcache/735.png (http://www.web-enter.net/vb/index.php)

بعدين نروح على الخطوات بالترتيب وحط المسار تبع الصورة
Style Manager > StyleVars > footer_background

http://www.web-enter.net/vb/imgcache/736.png (http://www.web-enter.net/vb/index.php)

ارعص على حفظ وشوف الشغلة كيف سهلة
http://www.web-enter.net/vb/imgcache/737.png (http://www.web-enter.net/vb/index.php)

بلكن الصورة ما راح تخلي الوان الوصلات تبان بس هذي تقدر تعدلها انك تغير الوان الوصلات

[admin]

الخطوة الثامنة

طيب كيف نقدر نغير لون الوصلات في الفوتير
ولا يهمك امشي على الخطوات بالترتيب وحط اللون على ذوقك
Style Manager > StyleVars > footer_link_color

http://www.web-enter.net/vb/imgcache/738.png (http://www.web-enter.net/vb/index.php)

لو اخترت لون اسود راح يبان زي كذا
http://www.web-enter.net/vb/imgcache/739.png (http://www.web-enter.net/vb/index.php)
__________________

[admin]

الخطوة التاسعة

تغيير لون خلفية المنتدى الداخلية body background
نبغى نغيرها من ابيض الى سماوي فاتح
طبعا نروح على الخطوات بالترتيب ونحط اللون تبعنا
Style Manager > StyleVars > body_background

http://www.web-enter.net/vb/imgcache/740.png (http://www.web-enter.net/vb/index.php)

شوف الحين وش اللي صار
http://www.web-enter.net/vb/imgcache/741.png (http://www.web-enter.net/vb/index.php)
__________________

[admin]

الخطوة العاشرة والاخيرة

بعد ما غيرنا اللي قات لاحظت انو في المساحة في فوتر المنتدى تحت عند زر كتابة موضوع جديد وكتابة رد جديد ما كان لها لون مناسب ففكرت اني اعمل لها صورة خلفية واخترت هذي 750x40 pixels
http://www.web-enter.net/vb/imgcache/746.png (http://www.web-enter.net/vb/index.php)

رفعت الصورة ودخلت على وحطيت المسار تبعها
Style Manager > StyleVars > blockfoot_background
http://www.web-enter.net/vb/imgcache/747.png (http://www.web-enter.net/vb/index.php)

الحين صار لفوتر جدول المنتدى مزاج خاص
http://www.web-enter.net/vb/imgcache/748.png (http://www.web-enter.net/vb/index.php)

بكذا يسير التعديل على الاستايل انتهي
والبلوق اللي عليه الموضوع http://www.vbulletin.com/forum/blog.php?b=2373 (http://www.vbulletin.com/forum/blog.php?b=2373)

وسلامتكم http://www.web-enter.net/vb/imgcache/749.png منقول من الاخ MANTEK
__________________