X

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

Webmasters - Website Developers

 
  • تصفية
  • الوقت
  • عرض
مسح الكل
مشاركات جديدة

    السلام عليكم

    شرح بسيط لاضافة الخط الكوفي في منتديات 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
    الملفات المرفقة

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




    تعليق

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

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

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

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

      تحياتي
      تعليق

        #4
        مثال

        تعليق

          #5
          تسلم إيدك أخي الغالي
          جزاك الله كل خير
          وإنما الأمم الأخلاق ما بقيت
          فإن هم ذهبت أخلاقهم ذهبوا
          تعليق

            #6
            Originally posted by 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;
            }
            يمكنك تعديل مقاس الخط بما يناسب

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




            تعليق

              #7
              Originally posted by سعد الدين *

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

              عموما لو قصدك انه المحتوى بالمشاركات والمواضيع لم ينجح جرب هذا الكود ضعه بقالب 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;
              }
              يمكنك تعديل مقاس الخط بما يناسب

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



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

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

              لم يتغير شي

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

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

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

              *

              تحياتي
              تعليق

                #8


                تحياتي
                تعليق

                  #9
                  جزاك الله كل خير
                  دعوات واكونتات لاغلب مواقع التورنت
                  اى بى تورنت - تورنت داى - تورنت ليتش
                  عرب سين - عرب اكسترا
                  تعليق

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

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