دورة تصميم استايلات منتديات الجيل الرابع vBulletin4

[ahmed-samara]

بسم الله الرحمن الرحيم والحمد لله رب العالمين والصلاة والسلام على أشرف المرسلين سيدنا محمد وعلى آله وصحبه الطاهرين ,

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

مرحبآ اخواني زوار واعضاء منتدى سوالف سوفت , اليوم سوف نقوم بتقديم دورة تصميم استايلات منتديات الجيل الرابع vBulletin4 ,

ستكون الدورة مقسمة الي عدة دروس تعليم التعديل علي الاستايل الافتراضي بحيث يمكن معرفة المتغيرات الخاصه بكل اماكن الاستايل والتعديل عليها بتصميم اخر مختلف او كما تشاء تعديل الالوان والتصميمات ,

الدورة مقدمة من 10 دروس للتعريف علي المتغيرات الخاصه بالاماكن الواجب التعديل عليها لتصميم الاستايل وضبط الخطوط والتنسيق شرح مصور,

• درس تغير مسار الشعار البنر العلوي Image Path
• درس تصميم وتعديل متغيرات header
• درس تصميم وتعديل متغيرات navbar
• درس تصميم وتعديل متغيرات footer
• درس تصميم وتعديل متغيرات Forms مربع الكتابه
• درس تصميم وتعديل متغيرات رأس الجداول Blocks
• درس تصميم وتعديل متغيرات Common
• درس تصميم وتعديل متغيرات الصفحة الرئيسيه Forum Home
• درس تصميم وتعديل متغيرات الصفحة الرئيسيه Forum Display
• درس حذف عدد المواضيع والمشاركات في forumhome

اولآ نقوم بالدخول علي >>> التحكم بالإستايلات



ثم
محرر متغير الستايل >> اذهب


الان وصلنا الي صفحة محرر متغيرات الستايل

[ahmed-samara]

تغير بنر الهيدر العلوي Image Path اتبع الشرح ,




من خيارات الاستايل من لوحة التحكم اختار >> محرر متغير الستايل >> ثم افتح متغير Image Path > وادخل على titleimage ومن هنا يمكنك تغير مسار صورة البنر ,

titleimage	تغير مسار شعار المنتدي

يمكنك تغير مسار الصور لجميع المنتدي :

mgdir_attach	تغير مسار صورة المرفقات.
imgdir_button	تغير مسار صورة الأزرار.
imgdir_cms	تغير مسار صور المجلة CMS.
imgdir_editor	تغير مسار صورة محرر الصور.
imgdir_gradients	تغير مسار صورة التدرجات.
imgdir_misc	تغير مسار صور الصور المتنوعة.
imgdir_polls	تغير مسار صورة الترشيحات.
imgdir_rating	تغير مسار صورة التقييم.
imgdir_reputation	تغير مساء صورة السمعه.
imgdir_searchresults	تغير مسار صور نتائج البحث.
imgdir_statusicon	تغير مساء صور الاحصائيات العامة.

[ahmed-samara]

الهيدر header وطرق التعديل والتصميم عليه ,

header_background	تغيير لون الخلفية للرأس في الجزء العلوي من الصفحة
header_border	تغيير عرض شكل ولون ونمط المخطط التفصيلي حول الهيدر
header_color	تغيير لون الخط للنص في الهيدر
header_font	تغيير نمط الخط للنص في الهيدر
header_link_color	تغيير لون كافة الارتباطات في الهيدر
header_linkhover_color	تغيير ما يحدث عند مرور مستخدم فوق ارتباط في الهيدر
header_padding	تغيير مقدار بكسل المسافة بين الهيدر وعناصر أخرى

[ahmed-samara]

النف بار navbar وطرق التعديل والتصميم عليه ,

navbar_background	تغيير لون خلفية شريط التنقل.
navbar_background_notify	تغيير لون الخلفية لرسالة إعلام في شريط التنقل.
navbar_border	تغيير عرض شكل ولون ونمط المخطط التفصيلي حول لون الحدود الملاحة.
navbar_color	تغيير لون الخط الافتراضي لشريط التنقل.
navbar_font	تغيير نمط الخط الافتراضي لشريط التنقل.
navbar_link_color	تغيير لون الارتباط الافتراضي لشريط التنقل.
navbar_linkhover_color	تغيير لون وصلات لشريط التنقل.
navbar_padding	تغيير مقدار المساحة بكسل بين شريط التنقل والعناصر الأخرى

navbar_tab_background	تغيير لون الخلفية في علامة التبويب.
navbar_tab_bevel	تغيير عرض شكل ولون ونمط من حول علامة التبويب.
navbar_tab_border	تغيير عرض شكل ولون ونمط المخطط التفصيلي حول علامة تبويب في شريط علامات التبويب
navbar_tab_color	تغيير لون الخط من علامة التبويب.
navbar_tab_font	تغيير حجم الخط ونمط لعلامة التبويب.
navbar_tab_linkhover_color	تغيير لون الخط لعلامة التبويب عند فإنه يتم حاليا حلقت.
navbar_tab_selected_background	تغيير لون الخلفية لعلامة تبويب مختارة
navbar_tab_selected_top_width	تغيير عرض علامة التبويب المحدد أعلى
navbar_tab_size	تغيير حجم الزر علامات الجدولة المحدد

navbarsearch_borderWidth	تغيير عرض الحدود مربع البحث.
navbarsearch_input_borderColor	تغيير لون الحدود المحيطة بحقل الإدخال في مربع البحث.
navbarsearch_padding	تغيير عرض الحدود الموجود بين مربع الإدخال وعرض الحدود.
searchbox_size	تغيير حجم مربع البحث.

[ahmed-samara]

الفوتر footer وطرق التعديل والتصميم عليه ,

footer_background	تغيير لون الخلفية لتذييل في الجزء السفلي من الصفحة
footer_border	تغيير عرض شكل ولون ونمط المخطط التفصيلي حول تذييل الصفحة
footer_color	تغيير لون الخط للنص الموجود في تذييل الصفحة
footer_copyright_color	تغيير لون الخط للنص حقوق التأليف والنشر.
footer_copyright_font	تغيير حجم الخط ونمط النص حقوق التأليف والنشر.
footer_font	تغيير نمط الخط للنص الموجود في تذييل الصفحة
footer_link_color	تغيير لون كافة الارتباطات في تذييل الصفحة
footer_linkhover_color	تغيير ما يحدث عند مرور مستخدم فوق ارتباط في تذييل الصفحة
footer_moz_shadow_color	تعيين لون المربع عناصر الظل في متصفحات الفيرفوكس و Webkit.
footer_padding	تغيير مقدار المساحة بكسل بين تذييل الصفحة وعناصر أخرى

[ahmed-samara]

الفورم Forms مربع الكتابه وطرق التعديل والتصميم عليه ,

input_borderColor	تغيير لون الحدود حول إدخال جميع الحقول
input_padding	تغيير مساحة بكسل بين حقل الإدخال وعناصر أخرى

[ahmed-samara]

البلوك Blocks رأس الجداول وطرق التعديل والتصميم عليه ,

block_background	تغيير لون الخلفية لأشكال
block_border	تغيير عرض شكل ولون ونمط الحدود حول النماذج
block_color	تغيير لون النص من نص المنتدى النماذج في أشكال
block_font	تغيير نمط الخط للنص المنتدى النماذج في أشكال
block_link_color	تغيير لون وصلة في أشكال
block_linkhover_color	تغيير لون الارتباطات الموجودة في أشكال الموذج
block_padding	تغيير مقدار المسافة بين رأس النموذج

blockfoot_background	تغيير الخلفية للصف الأخير على الصفحة
blockfoot_border	تغيير عرض شكل ولون ونمط للصف الأخير على الصفحة
blockfoot_color	تغيير لون الخط للنص الموجود في الصف الأخير على الصفحة
blockfoot_font	تغيير نمط الخط للنص الموجود في الصف الأخير على الصفحة
blockfoot_link_color	تغيير لون الارتباط من الارتباطات الموجودة في الصف الأخير على الصفحة
blockfoot_linkhover_color	تغيير لون الارتباطات الموجودة في الصف الأخير على الصفحة التحويم الارتباط
blockfoot_padding	تغيير مقدار المسافة بين الصف الأخير على الصفحة والمحتوى فوقه

blockhead_background	تغيير لون الخلفية لكل رأس الجداول
blockhead_border	تغيير عرض شكل ولون ونمط المخطط التفصيلي حول الحدود رأس الجداول
blockhead_color	تغيير لون الخط للنص في رأس الجداول
blockhead_font	تغيير نمط الخط للنص بأكمله في رأس الجداول
blockhead_link_color	تغيير لون كافة الارتباطات في رأس الجداول
blockhead_linkhover_color	تغيير ما يحدث عند مرور مستخدم فوق ارتباط في رأس كتلة.
blockhead_padding	تغيير مقدار المساحة بكسل بين رأس كتلة وعناصر أخرى

blockrow_background	تغيير لون الخلفية للنص المنتدى الجداول
blockrow_border	تغيير عرض شكل ولون ونمط المخطط التفصيلي حول الحدود رئيس الجداول
blockrow_color	تغيير لون الخط للنص الموجود في رأس الجداول
blockrow_font	تغيير نمط الخط للنص بأكمله في رأس الجداول
blockrow_link_color	تغيير لون كافة الارتباطات في رأس الجداول
blockrow_linkhover_color	تغيير ما يحدث عند مرور مستخدم فوق ارتباط في رأس الجداول .
blockrow_padding	تغيير مقدار المساحة بكسل بين رأس الجداول وعناصر أخرى

blocksubhead_background	تغيير لون الخلفية لكل رأس الجداول
blocksubhead_border	تغيير عرض شكل ولون ونمط المخطط التفصيلي حول الحدود العنوان الفرعي
blocksubhead_color	تغيير لون الخط للنص الموجود في رأس الجداول
blocksubhead_font	تغيير نمط الخط للنص الموجود في رأس الجداول
blocksubhead_link_color	تغيير لون كافة الارتباطات في رأس الجداول
blocksubhead_linkhover_color	تغيير ما يحدث عند مرور مستخدم فوق ارتباط في رأس الجداول
blocksubhead_padding	تغيير مقدار المساحة بكسل بين رأس الجداول وعناصر أخرى

[ahmed-samara]

Common المواضيع والمشاركات وطرق التعديل والتصميم عليه ,




هذه هي قائمة المتغيرات خاصه بالاعلانات التي يتم استخدامها في جميع أنحاء المنتدي.

ad_margin	تغيير الهوامش حول الإعلانات في جميع أنحاء المنتدي.
ad_padding	يتغير الحشو حول المسافات النص والصور في جميع أنحاء المنتدي.
announcement_background	تغيير لون الخلفية وصورة لإعلانات في عرض المنتدى.

heavy_border تغيير عرض ولون من المسافة بين شريط علامات التبويب وشريط التنقل.

avatar_height

تغيير ارتفاع العرض للصور الرمزية للمستخدم في جميع أنحاء المنتدي

body_background	تغيير لون خلفية إطار المحتوى
body_color	تغيير لون النص غير محددة في الخلفية

content2_background	تغيير لون لليوم في محددات التاريخ
content3_background	تغيير لون خلفية شريط الشهر لمحددات التاريخ

control_background	تغيير لون أو نقش خلفية الزر.
control_border	تغيير لون وعرض زر الحدود.
control_color	تغيير لون الخط زر.
control_font	التغيرات في حجم ونمط الخط زر.
control_hover_background	تغير لون الخلفية عند مرور الماوس .

control_content_background	تغيير لون خلفية أو صورة لكافة أزرارالمواضيع والردود.
control_content_border	تغيير عرض الحدود ولون لكافة أزرارالمواضيع والردود.
control_content_color	تغيير لون الخط لكافة أزرار المواضيع والردود.
control_content_font	تغيير حجم الخط والنمط لكافة أزرار المواضيع والردود.
control_content_hover_background	تغيير لون الخلفية عندما حلقت هو زر.
control_content_padding	تغيير مقدار المسافات حول جدول المشاركات والموضوع.
control_content_radius	تغييرات أم لا يتم تقريب زوايا الأزرار.
control_content_shadow_color	تغيير لون الظل المسقط أزرار.

doc_backgroundColor	تغيير لون خلفية الصفحة
doc_margin	تغيير مقدار المسافة بين إطار المستعرض والإطار المحتوى الرئيسي
doc_maxWidth	تغيير عرض بكسل الحد الأقصى من مجموعة المنتدي . وهذا يتم تعيينها تلقائياً إذا قمت بإدخال doc_width.
doc_minWidth	تغيير عرض بكسل الحد الأدنى من مجموعة المنتدي
doc_width	تغيير عرض بكسل ثابتة المنتدي. وهذا مفيد لتعيين إذا كان مضمناً المنتدي أو متداخلة في صفحة ويب أكبر

font تغيير نمط الخط للنص العام المنتدي

[ahmed-samara]

الفروم هوم Forum Home الصفحة الرئيسيه المنتدي وطرق التعديل والتصميم عليه ,

forumhead_background	التحكم في لون الخلفية لرئيس المنتدى.
forumhead_border	التحكم في لون وعرض الحدود حول رئيس المنتدى.
forumhead_color	التحكم في لون الخط لرئيس المنتدى.
forumhead_font	يتحكم في حجم الخط والنمط رئيس المنتدى.
forumhead_top_corner_radius	يتحكم أو عدمه زوايا أعلى الرأس .
forumhead_width	التحكم في عرض رأس المنتدى.
forumbit_spacer_width	التحكم في عرض المسافة بين هذين المحفلين.
forumbits_aForum	التحكم في لون الرابط للمنتديات.
forumbits_border	التحكم في عرض ولون الحدود المحيطة قليلاً فروم.
forumbits_shadow_color	التحكم في لون الظل في قليلاً المنتدى.
forumbits_text_color	التحكم في لون نص الاقسام .

forumicon_size	تغيير حجم ايقونات الاقسام الغير مقروءة.
forumiconbox_size	تغيير حجم المساحة التي تحيط ايقونات المنتدى.

wgo_background	التحكم في لون الخلفية من المقطع جداول الاحصيائات.
wgo_border	التحكم في عرض ولون الحدود جداول الاحصيائات.
wgoheader_background	التحكم في لون الخلفية لرأس جداول الاحصائات.
wgoheader_color	التحكم في لون الخط من رأس جداول الاحصائيات.
wgoheader_font	يتحكم في حجم الخط ونمط رأس جداول الاحصائيات.
wgosubheader_font	يتحكم في حجم الخط والنمط رأس جداول الاحصائيات.

[ahmed-samara]

الاقسام Forum Display الصفحة الداخليه للأقسام وطرق التعديل والتصميم عليه ,

threadlisthead_font	يتحكم في حجم الخط والنمط في رأس قائمة الهيدر
threadlisthead_border	التحكم في لون وعرض الحدود حول رأس قائمة الهيدر.
threadlisthead_background	التحكم في الخلفية لرأس قائمة الهيد.
threadlisthead_top_corner_radius	يتحكم أم لا يتم تقريب زوايا أعلى الهي. تعيين إلى 0 لتعطيل.
threadlisthead_color	التحكم في لون الخط في رأس قائمةاله.
threadbit_background	التحكم في الخلفية عنوان الموضوع.
threadbit_deleted_background	التحكم في الخلفية لمؤشر ترابط المحذوفة.
threadbit_hilite_background	التحكم في الخلفية الهيدر المميزة.
threadbit_iconsize	التحكم في أبعاد رمز الهيدر.
threadbit_border	التحكم في عرض ولون الحدود حول قليلاً الخيط.
threadbit_alt_background	التحكم في الخلفية البديل الهيدر بعض الشيء.

foruminfo_background	تسيطر على خلفية معلومات المنتدى.
foruminfo_border	التحكم في لون وعرض الحدود حول معلومات المنتدى.
foruminfo_header_background	التحكم في لون الخلفية من الرأس معلومات المنتدى.
foruminfo_header_border	التحكم في لون وعرض الحدود حول هيدر معلومات المنتدى.
foruminfo_header_color	التحكم في لون الخط هيدر معلومات المنتدى.
foruminfo_header_font	التحكم في حجم الخط ونمط هيدر معلومات المنتدى.

forummenu_background	التحكم لون الخلفية قائمة المنتدى.
forummenu_border	التحكم في لون وعرض الحدود حول قائمة المنتدى.
forummenu_border_radius	التحكم في ما إذا كانت أو لم يتم تقريب زوايا القائمة.
forummenu_color	التحكم في لون الخط كل سطر من المنتدى.
forummenu_font	يتحكم في حجم الخط والنمط لكل سطر من المنتدى.

[ahmed-samara]

مرحبآ اخواني هذا الشرح مطبق في الفيبوليتين العربي وان شاء الله سوف اشرح شرح تطبيقه ,

قم بفتح قالب forumhome_forumbit_level2_post

ابحث عن : وقم بحذفه

<h4 class="nocss_label">{vb:rawphrase forum_statistics}:</h4>
        <ul class="forumstats td">
            <li>{vb:rawphrase threads}: {vb:raw forum.threadcount}</li>
            <li>{vb:rawphrase posts}: {vb:raw forum.replycount}</li>
        </ul>

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

الان نقوم بفتح قالب forumbits.css

ثم نبحث عن :

.forumbit_post .forumrow .forumlastpost {
    width: 29%;
    font-size: {vb:stylevar mid_fontSize};
    padding-top: {vb:math {vb:stylevar padding}/2};
}
}

قم بتغير width: 29%; الي مثلآ 40% او 60 كما تشاء في وضع الحجم المناسب



تحياتي لكم , وبالتوفيق للجميع
ahmed-samara

[Ah.php]

ماشاء الله , الدورة رائعه اخي الكريم ومجهود تشكر عليه صراحة يعجز اللسان عن الشكر,

جزاك الله كل خير , وجعلها الله في ميزان حسناتك

[الطآئر الجريح]

انت كنز ياخي الله يحفظك
لو هناك درس مشابهه بنفس الجوده لكن للجيل الثالث أتمنى ان تضع لنا الرابط، وجزاك الله خيراً.

[dr-coder]

دايما تبدع فى دروسك اخي احمد ربنا يوفقك دايما ونقدر نستفيد منك

[emadamor]

شكرا علي الدورة
مجلة الرحمة
http://www.alra7ma.net
منتديات الرحمة
http://vb.alra7ma.net