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

[MesterPerfect]

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

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

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

نحدد الملف الموجود في المرفقات في آخر الموضوع
بعد استيراد الملف
ندخل إلى لوحة التحكم -==> المظهر -==> القوالب
نختار الستايل الذي نريد أن تظهر فيه الأيقونات بالشكل الصحيح
ثم نبحث عن قالب extra.less
ونضيف فيه الكود التالي

.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]

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

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

 

[أبو غَيْث]

ما شاء الله عليك أخي أحمد
اتحفتنا بهذه الدروس و الشروحات الجميلة
سلمت يداك و لا ننحرم من كل جديد منك

 

[MesterPerfect]

ما شاء الله عليك أخي أحمد
اتحفتنا بهذه الدروس و الشروحات الجميلة
سلمت يداك و لا ننحرم من كل جديد منك

سلمك الله أخي الحبيب محمد
بعض ما تعلمناه منكم نحاول الإفادة به قدر المستطاع
تحياتي لك يالغالي

 

[Alrajabane]

عفاك الرحمن اخي احمد ..
دروس رائعة كـ روعتك يالغالي ..

 

[المهدي]

توافق الشرح: xf2.0/xf2.1

تمت التجربة علي 2.2.2 و يعمل 100%
شكرا لك ❤️

 

[عابر سبيل]

بارك الله فيك

 

[ALASEEL]

الف شكر لك على هالشرح الجميل

بارك الله فيك

 

[خالد]

بارك الله فيك موضوع مفيد جدا

 

[MesterPerfect]

تمت التجربة علي 2.2.2 و يعمل 100%
شكرا لك ❤️

بارك الله فيك على التجربة