[ XF 2.1 ] - إضافة أزرار BbCode لتجميل الموضوع | معهد زين العربية

[ XF 2.1 ] إضافة أزرار BbCode لتجميل الموضوع

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
1,989
مستوى التفاعل
1,536
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
بسم الله الرحمن الرحيم
أهلا بكم في شرح جديد وإن شاء الله يكون مفيد
فالبداية وقبل الشرح أهنئكم بالعشر الأواخر من رمضان المبارك وبإقتراب عيد الفطر
نسأل الله تعالى أن يتقبل منى ومنكم صالح الأعمال وأن نكون من عُتقائه من النار في هذا الشهر الكريم
وأن يعيد علينا وعليكم الأيام بكل خير وعافية على الأمة الإسلامية والعربية جميعها
كما نسأله أن يزيل عنا الوباء والبلاء ويتجاوز عن سيئاتنا ويغفر لنا
اللهم امين
والآن لنعود إلى الشرح
شرحنا اليوم يتمثل في كيفية إضافة مجموعة جميلة من الBb_Code التي يمكن استخدامها لتزيين المواضيع
المعلومات
اسم الشرح: إضافة أزرار BbCode لتجميل الموضوع
توافق الشرح: xf2.0/xf2.1
موقع مقدم الشرح: mx-blind.com
مقدم الشرح: أحمد بكر @MesterPerfect

الشرح
ندخل إلى لوحة التحكم -==> المحتوى -==> BB Codes مخصصة

نضغط على زر إستيراد




نحدد الملف الموجود في المرفقات في آخر الموضوع
بعد استيراد الملف
ندخل إلى لوحة التحكم -==> المظهر -==> القوالب
نختار الستايل الذي نريد أن تظهر فيه الأيقونات بالشكل الصحيح
ثم نبحث عن قالب extra.less
ونضيف فيه الكود التالي
CSS:
.Message {
    display: table;
    position: relative;
    margin: 0px 0px 10px 0px;
    width: 100%;
    color: #fff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.Message-icon {
    display: table-cell;
    vertical-align: middle;
    width: 60px;
    padding: 30px;
    text-align: center;
    background-color: rgba(0,0,0,0.25);
}

.Message-icon > i {
    width: 30px;
    font-size: 30px;
}

.Message-body {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 10px 10px 10px;
}   
/* edit */
.Message--edit {
    color: #fefefe;
    background: /* #88D4CA */ rgba(136, 212, 202, 0.85);
    /* La couleur rgba permet l'ajout de transparance, si vous voulez vous
    pouvez supprimer les valeur rgba et décommenter la couleur par defaut (ex: background: #88D4CA; )*/
}

/* help */
.Message--help {
    color: #fefefe;
    background: /* #09835D */ rgba(9, 131, 93, 0.85);
    /* La couleur rgba permet l'ajout de transparance, si vous voulez vous
    pouvez supprimer les valeur rgba et décommenter la couleur par defaut (ex: background: #09835D; )*/
}

/* important */
.Message--important {
    color: #fefefe;
    background: /* #F39C12 */ rgba(243, 156, 18, 0.85);
    /* La couleur rgba permet l'ajout de transparance, si vous voulez vous
    pouvez supprimer les valeur rgba et décommenter la couleur par defaut (ex: background: #F39C12; )*/
}

/* Information */
.Message--information {
    color: #fefefe;
    background: /* #0074D9 */ rgba(0, 116, 217, 0.85);
    /* La couleur rgba permet l'ajout de transparance, si vous voulez vous
    pouvez supprimer les valeur rgba et décommenter la couleur par defaut (ex: background: #0074D9; )*/
}

/* offtopic */
.Message--offtopic {
    color: #fefefe;
    background: /* #7A7A7A */ rgba(122, 122, 122, 0.85);
    /* La couleur rgba permet l'ajout de transparance, si vous voulez vous
    pouvez supprimer les valeur rgba et décommenter la couleur par defaut (ex: background: #7A7A7A; )*/
}

/* success */
.Message--success {
    color: #fefefe;
    background: /* #2ECC40 */ rgba(46, 204, 64, 0.85);
    /* La couleur rgba permet l'ajout de transparance, si vous voulez vous
    pouvez supprimer les valeur rgba et décommenter la couleur par defaut (ex: background: #2ECC40; )*/
}

/* Warning */
.Message--warning {
    color: #fefefe;
    background: /* #B30000 */ rgba(179, 0, 0, 0.85);
    /* La couleur rgba permet l'ajout de transparance, si vous voulez vous
    pouvez supprimer les valeur rgba et décommenter la couleur par defaut (ex: background: #B30000; )*/
}

ثم نضغط على حفظ

طريقة الاستخدام
داخل المحرر في أي مكان في المنتدى نستخدم الأكواد التالية

كود:
[important]النص الخاص بك هنا...[/important]
[offtopic]النص الخاص بك هنا...[/offtopic]
[warning]النص الخاص بك هنا...[/warning]
[success]النص الخاص بك هنا...[/success]
[info]النص الخاص بك هنا...[/info]
[edit]النص الخاص بك هنا...[/edit]
[help]النص الخاص بك هنا...[/help]



والنتيجة تكون هكذا



وبهذا ينتهي شرحنا لهذا اليوم
ونلقاكم قريبا إن شاء الله
والسَلام عليكم ورحمة الله وبركاته
 

المرفقات

  • مجموعة أزرارbb_codes.zip
    944 بايت · المشاهدات: 19

أبو غَيْث

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
4,604
مستوى التفاعل
2,863
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني
ما شاء الله عليك أخي أحمد
اتحفتنا بهذه الدروس و الشروحات الجميلة
سلمت يداك و لا ننحرم من كل جديد منك
 

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
1,989
مستوى التفاعل
1,536
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
ما شاء الله عليك أخي أحمد
اتحفتنا بهذه الدروس و الشروحات الجميلة
سلمت يداك و لا ننحرم من كل جديد منك
سلمك الله أخي الحبيب محمد
بعض ما تعلمناه منكم نحاول الإفادة به قدر المستطاع
تحياتي لك يالغالي
 

Alrajabane

【★★★★】
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
657
مستوى التفاعل
508
النقاط
93
الإقامة
السعودية
الموقع الالكتروني
عفاك الرحمن اخي احمد ..
دروس رائعة كـ روعتك يالغالي ..
 

ALASEEL

:: الأعضاء ::
إنضم
7 يناير 2021
المشاركات
27
مستوى التفاعل
23
النقاط
3
الإقامة
غزة
الف شكر لك على هالشرح الجميل

بارك الله فيك
 

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .

التعليقات المنشورة لا تعبر عن رأي معهد زين العربية ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

طاقم الإدارة المتصلين حالياً

الأعضاء المتصلون

إحصائيات المنتدى

المواضيع
1,436
المشاركات
14,607
الأعضاء
543
آخر عضو مسجل
Maktoom
أعلى