هيلبرنت | Helpernt

هيلبرنت | Helpernt (https://www.helpernt.com/vb/index.php)
-   ركن شروحات الزين فورو XENFORO (https://www.helpernt.com/vb/forumdisplay.php?f=94)
-   -   [ BBcode] : إضافة أزرار BbCode لتجميل الموضوع (https://www.helpernt.com/vb/showthread.php?t=10632)

MesterPerfect 05-22-2020 03:36 PM

إضافة أزرار BbCode لتجميل الموضوع
 
1 مرفق
بسم الله الرحمن الرحيم
أهلا بكم في شرح جديد وإن شاء الله يكون مفيد , فالبداية وقبل الشرح أهنئكم بالعشر الأواخر من رمضان المبارك وبإقتراب عيد الفطر , نسأل الله تعالى أن يتقبل منى ومنكم صالح الأعمال وأن نكون من عُتقائه من النار في هذا الشهر الكريم , وأن يعيد علينا وعليكم الأيام بكل خير وعافية على الأمة الإسلامية والعربية جميعها ,كما نسأله أن يزيل عنا الوباء والبلاء ويتجاوز عن سيئاتنا ويغفر لنا اللهم امين
والآن لنعود إلى الشرح
شرحنا اليوم يتمثل في كيفية إضافة مجموعة جميلة من ال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]

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

الملف بالمرفقات

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

abo-karim 05-22-2020 05:07 PM

رد: إضافة أزرار BbCode لتجميل الموضوع
 
مشاء الله

محاكاه افضل من اللى كانت فى الـ vBulletin

بارك الله فيك

MesterPerfect 05-22-2020 06:05 PM

رد: إضافة أزرار BbCode لتجميل الموضوع
 
اقتباس:

المشاركة الأصلية كتبت بواسطة abo-karim (المشاركة 36547)
مشاء الله

محاكاه افضل من اللى كانت فى الـ vBulletin

بارك الله فيك

وفيك الله بارك أخي أبو كريم
أعتقد يمكن عمل هذه الأشياء في vb
فهي مجرد أيكونات Font Awesome
لكن انا لا استخدمه صراحتا ولا أعرف عنه سوى القلييييل
وهذا مثال على أيقونة edit
كود:

<div class="Message Message--edit">
    <div class="Message-icon"><i class="fa fa-pencil-alt"></i></div>
    <div class="Message-body">{text}</div>
</div>

تحياتي

abo-karim 05-22-2020 06:27 PM

رد: إضافة أزرار BbCode لتجميل الموضوع
 
بالفعل اخى احمد تم فعلها بالسابق فى الــ VBULLETIN

علشان كده قولتك محاكاه رووووووعه emoji13

MesterPerfect 05-22-2020 06:30 PM

رد: إضافة أزرار BbCode لتجميل الموضوع
 
اقتباس:

المشاركة الأصلية كتبت بواسطة abo-karim (المشاركة 36551)
بالفعل اخى احمد تم فعلها بالسابق فى الــ VBULLETIN

علشان كده قولتك محاكاه رووووووعه emoji13

آها

ربما لأني لم أشاهد عصر المنتديات الذهبي لم أرا هذه الأشياء في vb :)

S!L3NT H!LL 05-22-2020 09:59 PM

رد: إضافة أزرار BbCode لتجميل الموضوع
 
فعلا منظرها مميز جدا
يعطيك الف عافية على الشرح

maaidni 05-23-2020 01:36 AM

رد: إضافة أزرار BbCode لتجميل الموضوع
 
رائعة جدا حيت تضيف ميزه جديده على الغالي زينفورو

Mc Nabulsy 05-23-2020 06:10 PM

رد: إضافة أزرار BbCode لتجميل الموضوع
 
ممكن وضع اكواد الايقونات لوحده بدون ملف xml لاني اريد اضافتها في pbboard

MesterPerfect 05-23-2020 07:11 PM

رد: إضافة أزرار BbCode لتجميل الموضوع
 
اقتباس:

المشاركة الأصلية كتبت بواسطة Mc Nabulsy (المشاركة 36616)
ممكن وضع اكواد الايقونات لوحده بدون ملف xml لاني اريد اضافتها في pbboard

تفضل صديقي
ولا تنسى مشاركتنا الBbCode الخاصة بسكربت pbboard
أيقونة edit

كود:

<div class="Message Message--edit">
    <div class="Message-icon"><i class="fa fa-pencil-alt"></i></div>
    <div class="Message-body"></div>
</div>

أيقونة help

كود:

<div class="Message Message--help">
    <div class="Message-icon"><i class="fa fa-question"></i></div>
    <div class="Message-body"></div>
</div>

أيقونة important

كود:

<div class="Message Message--important">
    <div class="Message-icon"><i class="fa fa-exclamation"></i></div>
    <div class="Message-body"></div>
</div>

أيقونة Information

كود:

<div class="Message Message--information">
    <div class="Message-icon"><i class="fa fa-info"></i></div>
    <div class="Message-body"></div>
</div>

أيقونة OffTopic

كود:

<div class="Message Message--offtopic">
    <div class="Message-icon"><i class="fa fa-power-off"></i></div>
    <div class="Message-body"></div>
</div>

أيقونة Success

كود:

<div class="Message Message--success">
    <div class="Message-icon"><i class="fa fa-check"></i></div>
    <div class="Message-body"></div>
</div>

أيقونة Warning

كود:

<div class="Message Message--warning">
    <div class="Message-icon"><i class="fa fa-exclamation-triangle"></i></div>
    <div class="Message-body"></div>
</div>


ahmedkhalifa 05-30-2020 02:51 AM

رد: إضافة أزرار BbCode لتجميل الموضوع
 
احسنت ياغالي ديما مبدع


الساعة الآن 12:14 PM

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By Almuhajir