[شــرح] عرض أنواع مختلفة من الرسائل (تحذيرات، إشعارات، رسائل نجاح، إلخ)

[WIKIBA]

Bismillahir Rahmanir Raheem ('بِسْمِ ٱللَّٰهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ)

هذا النمط مفيد جدًا لتوفير تجربة مستخدم متسقة عند عرض أنواع مختلفة
من الرسائل (تحذيرات، إشعارات، رسائل نجاح، إلخ).

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

/* help */
.Message--help {
    color: #fefefe;
    background: /* #09835D */ rgba(9, 131, 93, 0.85);
}

/* important */
.Message--important {
    color: #fefefe;
    background: /* #F39C12 */ rgba(243, 156, 18, 0.85);
}

/* Information */
.Message--information {
    color: #fefefe;
    background: /* #0074D9 */ rgba(0, 116, 217, 0.85);
}

/* offtopic */
.Message--offtopic {
    color: #fefefe;
    background: /* #7A7A7A */ rgba(122, 122, 122, 0.85);
}

/* success */
.Message--success {
    color: #fefefe;
    background: /* #2ECC40 */ rgba(46, 204, 64, 0.85);
}

/* Warning */
.Message--warning {
    color: #fefefe;
    background: /* #B30000 */ rgba(179, 0, 0, 0.85);
}

رموز المساعدة

[هام] نصك هنا...[/هام]
[خارج الموضوع] نصك هنا...[/خارج الموضوع]
[تحذير] نصك هنا...[/تحذير]
[نجاح] نصك هنا...[/نجاح]
[معلومات] نصك هنا...[/معلومات]
[تعديل] نصك هنا...[/تعديل]
[مساعدة] نصك هنا...[/مساعدة]

Help codes

[important]Your text here...[/important]
[offtopic]Your text here...[/offtopic]
[warning]Your text here...[/warning]
[success]Your text here...[/success]
[info]Your text here...[/info]
[edit]Your text here...[/edit]
[help]Your text here...[/help]

 

[تيزيرة]

بارك الله فيك
وجزاك الله خير​

 

[العبد الفقير إلى الله]

شكراً جزيلاً على جهدكم.
تحية واحترام وتقدير​

 

[Jamal]

موضوع مميز شكراً لك

 

[Alotaibi]

بارك الله فيك

شكرا لك على المشاركة​

 

[الداعية أبوعبدالله]

جزاك الله خير​