علانات هيلبرنت



قسم تعديلات القوالب والشروحات XENFORO هذا القسم خاص بكل شروحات إستخدام XENFORO وتعديلات القوالب
احصائياتى

الردود
0

المشاهدات
81
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant future

  • هيلبرنت غير متواجد حالياً

المشاركات
3,873

+التقييم
310

تاريخ التسجيل
Jul 2015

الاقامة
فى الدنيا

نظام التشغيل
windows 8

رقم العضوية
18
08-06-2016, 11:42 PM
المشاركة 1
08-06-2016, 11:42 PM
المشاركة 1
افتراضي طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo
1- في البداية لا بد من تحميل الملفات من موقع
Font Awesome, the iconic font and CSS toolkit .

2. بعد التحميل ستجد المجلدات التالية

3. قم بتحميل المجلدات الى المجلد الرئيسي للمنتدى باستخدام برنامج الــ FTP

4. من خلال لوحة التحكم افتح المظهر ... ثم التمبلت

5. قم بايجاد التمبلت node_list.css

6. قم بحذف الكود التالي
كود:
.node .forumNodeInfo .nodeIcon,
    .node .categoryForumNodeInfo .nodeIcon
    {
        @property "nodeIconForum";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: 0 0;
        @property "/nodeIconForum";
    }

    .node .forumNodeInfo.unread .nodeIcon,
    .node .categoryForumNodeInfo.unread .nodeIcon
    {
        @property "nodeIconForumUnread";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -36px 0;
        @property "/nodeIconForumUnread";
    }

    .node .pageNodeInfo .nodeIcon
    {
        @property "nodeIconPage";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -72px 0;
        @property "/nodeIconPage";
    }

    .node .linkNodeInfo .nodeIcon
    {
        @property "nodeIconLink";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -108px 0;
        @property "/nodeIconLink";
    }



7. قم بفتح التمبلت Extra.css ثم اضف الكود التالي:

كود:
/* FONT AWESOME NODE ICONS */
@font-face
{
        font-family: 'FontAwesome';
        src: url('./styles/default/xenforo/fonts/fontawesome-webfont.eot');
        src: url('./styles/default/xenforo/fonts/fontawesome-webfont.ttf') format("truetype"),
                url('./styles/default/xenforo/fonts/fontawesome-webfont.woff') format('woff'),
                url('./styles/default/xenforo/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
                url('./styles/default/xenforo/fonts/fontawesome-webfont.svg#fontawesome-webfont') format('svg');
        font-style: normal;
        font-weight: normal;
}

.node.node_51 .forumNodeInfo .nodeIcon:after, .node.node_51 .categoryForumNodeInfo .nodeIcon:after
{
    font-family: "FontAwesome";
    font-size: 34px;
    content: "\f0e6";
    padding: 4px;
}

.node.node_51 .forumNodeInfo.unread .nodeIcon:after, .node.node_51 .categoryForumNodeInfo.unread .nodeIcon:after
{
    font-family: "FontAwesome";
    font-size: 34px;
    content: "\f0e6";
    padding: 4px;
}

/* FONT AWESOME NODE ICONS */
8. استبدل الرقم 51 بالــ ID الخاص بالقسم المراد تغغير الايقونة الخاصة بها.

9. تستطيع تغيير شكل ولون وحجم الايقونة بالطريقة التي تريدها

10. للحصول على رموز الايقونات المراد تغييرها من خلال موقع Font Awesome


بعد الدخول للرابط ستجد الايقونات ورموزها وهي تتحدث باستمرار

اذا كنت تريد اعطاء الاقسام ايقونة واحدة فإنك تستطيع اختصار الطريقة من خلال وضع الكود التالي في تمبلت Extra.css بدلا من الكود السابق

كود:
.node .forumNodeInfo .nodeIcon:after, .node .categoryForumNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}

.node .forumNodeInfo.unread .nodeIcon:after, .node .categoryForumNodeInfo.unread .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}


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

وأخيرا ان كنت ترغب بتغيير اللون اضف الكود للايقونة التي تريدها وقم بتغيير ارقام اللون:
في المثال اللون هو اللون الأسود


كود:
color: #000000;
الشرح تم اقتباسه من موقع معهد xenForo

اضافة رد

العلامات المرجعية

طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo


أدوات الموضوع

الانتقال السريع

المواضيع المتشابهه للموضوع: طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
شرح اضافة ايقونة تظهر بجانب اسم موقعك بالمتصفح لمنتديات الزين فورو -Xenforo هيلبرنت قسم تعديلات القوالب والشروحات XENFORO 2 11-30-2016 09:56 PM
طلب صندوق التحرير بأزرار من مكتبة Font Awesome HICHEM-27 ركن مشاكل وطلبات المنتديات 2 08-08-2016 05:30 PM
الرجوع للاعلى باستخدام مكتبة Font-Awesome safwan khazraji ركن تطوير منتديات vb3.8.0 0 03-30-2016 10:21 PM
تغيير رتب الاعضاء بمختصرات مكتبة Font Awesome safwan khazraji ركن تطوير منتديات vb3.8.0 2 02-22-2016 10:06 PM
شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome هيلبرنت ركن تطوير منتديات vb3.8.0 4 01-19-2016 12:28 PM





الساعة الآن 09:50 AM