How To Create an Alert Message Box

[gall21]

Hey Everyone . do you know how to create colored frames with text Alert , Info , Danger

Examples screens

 

[wikislo]

First option


Two options

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]

we collect the file found in the attachments at the end of the topic.
After importing the file
we go to control panel -==> Templates.
We choose the style in which we want the icons to appear correctly,
then we look for the extra.less template

.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; )*/
}

More options in here

 

[gall21]

Thank you very much but I updated from version 2.2.15 to 2.3.3,and I have this result:

I only see exclamation mark icons I need to see the rest of the icons Info - Success - Warning..... etc Can you help me with this problem?
bb code alert

<div class="alert-custom {option}">
    <i class="fas fa-exclamation-circle" data-xf-init="icon"></i> {text}
</div>

extra.less

/**/
.alert-custom i {
    font-size: 20px;
    margin-right: 12px;
}
/**/
.alert-custom.info .alert-icon::before { content: "\f05a"; } /* Icon "info" */
.alert-custom.success .alert-icon::before { content: "\f00c"; } /* Icon "check" */
.alert-custom.warning .alert-icon::before { content: "\f071"; } /* Icon "exclamation-triangle" */
.alert-custom.error .alert-icon::before { content: "\f06a"; } /* Icon "exclamation-circle" */
/**/