X

شرح اضافة الخط الكوفي لمنتديات الجيل الخامس vbulletin 5

Collapse
  • تصفية
  • الوقت
  • عرض
مسح الكل
مشاركات جديدة
  • المسؤول الفني
    • Sep 2018
    • 21795

    السلام عليكم

    شرح بسيط لاضافة الخط الكوفي في منتديات Vbulliten v5

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


    نفتح القالب css_additional.css ونضع بأعلاه ( أول سطر ) الكود التالي وطبعا أول سطر ليقوم المتصفح بتحميل الخطوط قبل تحميل المحتوى

    Code:
    /*
    * Droid Arabic Kufi (Arabic) http://www.google.com/fonts/earlyaccess
    */
    @font-face {
    font-family: 'Droid Arabic Kufi';
    font-style: normal;
    font-weight: 400;
    src: url(core/css/DroidKufi-Regular/DroidKufi-Regular.eot);
    src: url(core/css/DroidKufi-Regular/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
    url(core/css/DroidKufi-Regular/DroidKufi-Regular.woff2) format('woff2'),
    url(core/css/DroidKufi-Regular/DroidKufi-Regular.woff) format('woff'),
    url(core/css/DroidKufi-Regular/DroidKufi-Regular.ttf) format('truetype');
    }
    @font-face {
    font-family: 'Droid Arabic Kufi';
    font-style: normal;
    font-weight: 700;
    src: url(core/css/DroidKufi-Bold/DroidKufi-Bold.eot);
    src: url(core/css/DroidKufi-Bold/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
    url(core/css/DroidKufi-Bold/DroidKufi-Bold.woff2) format('woff2'),
    url(core/css/DroidKufi-Bold/DroidKufi-Bold.woff) format('woff'),
    url(core/css/DroidKufi-Bold/DroidKufi-Bold.ttf) format('truetype');
    }
    نقوم بتحميل مجلدات الخطوط من المرفقات ونرفعهم بهذا المسار كما هو الحال في بوابة داماس ( لا تنسى تغيير كلمة wiki الى vb او forum بحسب اسم مجلد المنتدى عندك )
    Code:
    /public_html/wiki/core/css/
    تأكد أن مسار مجلد الخطوط أصبح بهذا الشكل



    والان يمكن اضافة نوع الخط بكل مكان في تعديلات الستايل ( Style Variable Editor ) واحجام الخطوط ونوعها وهذا مثال على ذلك

    لو أردنا تغيير خط محتوى المشاركات والمواضيع من المتغير المسمى Post Content Font



    المهم هنا أن لا ننسى اضافة علامات '......' حول ( ببداية و نهاية ) اسم الخط الكوفي لأنه يتكون من كلمات بينها فراغ
    وهذا المثال الصحيح لاضافة اسم الخط
    Code:
    'Droid Arabic Kufi', arial, sans-serif
    وان أردنا اضافة الكود بقالب ( css_additional.css ) يمكننا ذلك بسهولة وذلك باضافة اسم الكلاس ونوع الخط وحجمه المطلوب مثال على ذلك

    لتعديل اسماء المنتديات هنا بالبوابة استخدمت الكود التالي

    Code:
    .forum-title {
        font-family: 'Droid Arabic Kufi', arial, sans-serif;
        font-size: 0.9775rem !important;
        line-height: 0.5 !important;
    }

    المهم هو السطر الأول لاختيار نوع الخط

    السطر الثاني حجم الخط

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

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

    ثم نكرر نفس العملية على كل مكان نريد فيه أن يظهر الخط الكوفي مثل عناوين المواضيع والمشاركات ... الخ


    لا تنسى رفع مجلدات الخطوط من المرفقات الى موقعك بواسطة برنامج FTP او لوحة التحكم cpanel
    الملفات المرفقة
  • VIP
    • Sep 2018
    • 6093

    #2
    جزاكَ الله خيراً أخي الكريم عن هذا الطرح القيم والنافع والمفيد ... تقبل تحياتي.




  • عضو مُشارك
    • Nov 2018
    • 17

    #3
    شكرا لك اخوى العزيز

    تتبعت الشرح بالكامل

    اسم المنتديات والاقسام من متعدل

    لكن كتابة المواضيع والردود

    تحياتي
  • عضو مُشارك
    • Nov 2018
    • 17

    #4
    مثال

  • VIP
    • Sep 2018
    • 2215

    #5
    تسلم إيدك أخي الغالي
    جزاك الله كل خير
  • المسؤول الفني
    • Sep 2018
    • 21795

    #6
    المشاركة الأصلية بواسطة eutlacom
    شكرا لك اخوى العزيز

    تتبعت الشرح بالكامل

    اسم المنتديات والاقسام من متعدل

    لكن كتابة المواضيع والردود

    تحياتي
    أخي اذا اتبعت الشرح بدقة لابد يكون كل شي تمام باذن الله

    عموما لو قصدك انه المحتوى بالمشاركات والمواضيع لم ينجح جرب هذا الكود ضعه بقالب css_additional.css

    Code:
    .b-post__content {
        font-family: 'Droid Arabic Kufi', arial, sans-serif;
        font-size: 0.9775rem !important;
        line-height: 0.5 !important;
    }
    يمكنك تعديل مقاس الخط بما يناسب

    شكرا لكم جميعا




  • عضو مُشارك
    • Nov 2018
    • 17

    #7
    المشاركة الأصلية بواسطة سعد الدين

    أخي اذا اتبعت الشرح بدقة لابد يكون كل شي تمام باذن الله

    عموما لو قصدك انه المحتوى بالمشاركات والمواضيع لم ينجح جرب هذا الكود ضعه بقالب css_additional.css

    Code:
    .b-post__content {
    font-family: 'Droid Arabic Kufi', arial, sans-serif;
    font-size: 0.9775rem !important;
    line-height: 0.5 !important;
    }
    يمكنك تعديل مقاس الخط بما يناسب

    شكرا لكم جميعا



    تحياتي لك اخي العزيز

    نعم وضعت الكود الجديد بنفس الشرح

    لم يتغير شي

    واجهة المنتدى من الاصل معدله

    لكن الردود والمواضيع لازلت بالخط العادى

    ماهو اسم المتغير الخاص بالردود وكتابة المواضيع ( البوست و البوست ليجاسى بالجيل الثالث )



    تحياتي
  • عضو مُشارك
    • Nov 2018
    • 17

    #8


    تحياتي
  • الوسـام الماسـي
    • Feb 2019
    • 5118

    #9
    جزاك الله كل خير
  • المسؤول الفني
    • Sep 2018
    • 21795

    #10
    اخي اذا الستايل عندك معدل ما اقدر اعرف السبب لكن المفروض بالشرح اعلاه كل الامور تكون تمام

    بالنسبة للجيل الثالث ليس css ولكن حتما يوجد طريقة ولكن لم أجرب بنفسي
Working...
X