أثبت وجودك لا تقرأ وترحل



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

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

بسم الله الرحمن الرحيم أهلا بكم في شرح جديد وإن شاء الله يكون مفيد , فالبداية وقبل الشرح أهنئكم بالعشر الأواخر...

احصائياتى

الردود
11

المشاهدات
6494
MesterPerfect
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • MesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to beholdMesterPerfect is a splendid one to behold

  • MesterPerfect غير متواجد حالياً

المشاركات
2,837

+التقييم
199

تاريخ التسجيل
Jan 2018

الاقامة
sohag, Egypt

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

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

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


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

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

الملفات المرفقة
نوع الملف: zip bb_codes.zip‏ (944 بايت, المشاهدات 501)

قديم 05-22-2020, 05:07 PM
المشاركة 2
abo-karim
.:: Administrator ::.
  • abo-karim غير متواجد حالياً
افتراضي رد: إضافة أزرار BbCode لتجميل الموضوع
مشاء الله

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

بارك الله فيك

قديم 05-22-2020, 06:05 PM
المشاركة 3
MesterPerfect
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • MesterPerfect غير متواجد حالياً
افتراضي رد: إضافة أزرار BbCode لتجميل الموضوع
مشاء الله

محاكاه افضل من اللى كانت فى الـ 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>
تحياتي

قديم 05-22-2020, 06:27 PM
المشاركة 4
abo-karim
.:: Administrator ::.
  • abo-karim غير متواجد حالياً
افتراضي رد: إضافة أزرار BbCode لتجميل الموضوع
بالفعل اخى احمد تم فعلها بالسابق فى الــ VBULLETIN

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

قديم 05-22-2020, 06:30 PM
المشاركة 5
MesterPerfect
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • MesterPerfect غير متواجد حالياً
افتراضي رد: إضافة أزرار BbCode لتجميل الموضوع
بالفعل اخى احمد تم فعلها بالسابق فى الــ VBULLETIN

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

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

قديم 05-22-2020, 09:59 PM
المشاركة 6
S!L3NT H!LL
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • S!L3NT H!LL غير متواجد حالياً
افتراضي رد: إضافة أزرار BbCode لتجميل الموضوع
فعلا منظرها مميز جدا
يعطيك الف عافية على الشرح

قديم 05-23-2020, 01:36 AM
المشاركة 7
maaidni
.:: معرب ومطور ومشرف ::.
قسم منتديات XenForo
  • maaidni غير متواجد حالياً
افتراضي رد: إضافة أزرار BbCode لتجميل الموضوع
رائعة جدا حيت تضيف ميزه جديده على الغالي زينفورو

قديم 05-23-2020, 06:10 PM
المشاركة 8
Mc Nabulsy
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • Mc Nabulsy غير متواجد حالياً
افتراضي رد: إضافة أزرار BbCode لتجميل الموضوع
ممكن وضع اكواد الايقونات لوحده بدون ملف xml لاني اريد اضافتها في pbboard

قديم 05-23-2020, 07:11 PM
المشاركة 9
MesterPerfect
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • MesterPerfect غير متواجد حالياً
افتراضي رد: إضافة أزرار BbCode لتجميل الموضوع
ممكن وضع اكواد الايقونات لوحده بدون ملف 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>

قديم 05-30-2020, 02:51 AM
المشاركة 10
ahmedkhalifa
.:: عضو مشارك ::.
  • ahmedkhalifa غير متواجد حالياً
افتراضي رد: إضافة أزرار BbCode لتجميل الموضوع
احسنت ياغالي ديما مبدع

اضافة رد

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

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


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

الانتقال السريع
المواضيع المتشابهه للموضوع: إضافة أزرار BbCode لتجميل الموضوع
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[ شرح ] : إضافة خيار عدد المشاهدات أعلى الموضوع bahri ركن شروحات الزين فورو XENFORO 8 05-09-2019 04:28 AM
إضافة رابط لعنوان الموضوع Fallag ركن مشاكل وطلبات الزين فورو XENFORO 2 03-25-2019 08:08 PM
[XF 2.x Add] : [ حصريا ]- إضافة أزرار التحميل الديمو المصدر رابط الفحص xenforo 2.1 معدلة لتعمل مع الإصدار XF2.1 maaidni اضافات الزين فورو XENFORO 3 02-19-2019 10:25 PM
[XF 2.x Add] : [ حصريا ]- إضافة أزرار التحميل الديمو المصدر رابط الفحص SVG DemoDownloadVirusTotal مع التعرب maaidni اضافات الزين فورو XENFORO 7 10-06-2018 02:41 PM
[XF 2.x Add] : إضافة أزرار مواقع التواصل في الفوتر SocialFooter maaidni اضافات الزين فورو XENFORO 3 09-16-2018 11:36 PM




الساعة الآن 07:55 AM
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum