صفحة 1 من 2 12 الأخيرةالأخيرة
النتائج 1 إلى 15 من 17

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

  1. #1

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



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

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

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

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

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



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



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



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


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






    __________________
    سوالف سوفت ( المعلومة تأتي أولآ )
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور


  2. #2


    تغير بنر الهيدر العلوي 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 تغير مساء صور الاحصائيات العامة.






    __________________
    سوالف سوفت ( المعلومة تأتي أولآ )
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور

  3. #3


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




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






    __________________
    سوالف سوفت ( المعلومة تأتي أولآ )
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور

  4. #4


    النف بار 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 تغيير حجم مربع البحث.






    __________________
    سوالف سوفت ( المعلومة تأتي أولآ )
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور

  5. #5


    الفوتر 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 تغيير مقدار المساحة بكسل بين تذييل الصفحة وعناصر أخرى






    __________________
    سوالف سوفت ( المعلومة تأتي أولآ )
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور

  6. #6

    درس تصميم وتعديل متغيرات Forms مربع الكتابه



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




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






    __________________
    سوالف سوفت ( المعلومة تأتي أولآ )
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور

  7. #7

    درس تصميم وتعديل متغيرات رأس الجداول Blocks



    البلوك 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 تغيير مقدار المساحة بكسل بين رأس الجداول وعناصر أخرى






    __________________
    سوالف سوفت ( المعلومة تأتي أولآ )
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور

  8. #8

    درس تصميم وتعديل متغيرات Common



    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 تغيير نمط الخط للنص العام المنتدي





    __________________
    سوالف سوفت ( المعلومة تأتي أولآ )
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور

  9. #9

    درس تصميم وتعديل متغيرات الصفحة الرئيسيه Forum Home



    الفروم هوم 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 يتحكم في حجم الخط والنمط رأس جداول الاحصائيات.






    __________________
    سوالف سوفت ( المعلومة تأتي أولآ )
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور

  10. #10

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



    الاقسام 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 يتحكم في حجم الخط والنمط لكل سطر من المنتدى.






    __________________
    سوالف سوفت ( المعلومة تأتي أولآ )
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور

  11. #11

    شرح حذف عدد المواضيع والمشاركات في forumhome





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

    قم بفتح قالب 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





    __________________
    سوالف سوفت ( المعلومة تأتي أولآ )
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور

  12. #12
    عضو نشيط
    تاريخ التسجيل
    Aug 2007
    المشاركات
    72


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

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






  13. #13
    عضو نشيط جدا
    تاريخ التسجيل
    Jun 2008
    المشاركات
    517


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





    __________________
    لا شيء يستحق التوقيع !

  14. #14
    عضو سوبر نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    892


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





    __________________
    No support via PM! to get support
    Support Manger


  15. #15


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






صفحة 1 من 2 12 الأخيرةالأخيرة




ضوابط المشاركة

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