XenForo Add BbCode buttons to beautify the theme

[wikislo]

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

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]

 

[Argun]

icons are not visible