• أعضاء وزوار معهد زين العربية، نود أن نعلمكم أن المعهد سيشهد في الفترة القادمة الكثير من التغيرات سواءا على المستوى الاداري او مستوى الاقسام، لذا نرجو منكم التعاون، وأي ملاحظات او استفسارات يرجى التواصل معنا عبر قسم الشكاوي و الإقتراحات و الطلبات ونشكركم على حسن تفهمكم وتعاونكم ،مع خالص الشكر والتقدير والاحترام من إدارة زين العربية.

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

MesterPerfect

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

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

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


CTIOjcd.png


نحدد الملف الموجود في المرفقات في آخر الموضوع
بعد استيراد الملف
ندخل إلى لوحة التحكم -==> المظهر -==> القوالب
نختار الستايل الذي نريد أن تظهر فيه الأيقونات بالشكل الصحيح
ثم نبحث عن قالب 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]

WNd0EfB.png


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

ohuh3CF.png


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

المرفقات

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

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

المواضيع
1,451
المشاركات
16,647
الأعضاء
1,027
آخر عضو مسجل
dedowbas
أعلى