在 PNotify 中更改背景颜色答案

【问题标题】：Change background color in PNotify在 PNotify 中更改背景颜色
【发布时间】：2021-01-14 22:26:54
【问题描述】：

我正在使用一个主题，Porto Admin Theme； http://preview.oklerthemes.com/porto-admin/3.0.0/ui-elements-notifications.html

这个主题正在使用 PNotify 来传递通知：https://sciactive.com/pnotify/

当您在上面列出的 Pnotify 链接上选择“Bootstrap 4”（或 Bootstrap 3）时，我想以这种浅色柔和的配色方案发出通知，而不是使用深色难看的颜色。我该怎么做？

    function notify (message, type){
    new PNotify({
        title: false,
        text: message,
        type: type,
        addclass: 'ui-pnotify-no-icon',
        icon: false,
        buttons: {
                sticker: false
            }
    });
}

这是我的代码

【问题讨论】：

欢迎来到 SO。您的问题是针对这个主题的，这使得获得答案变得更加困难。样式可以在 CSS 中找到，显然是在 ui-pnotify-no-icon 类中。

标签： javascript bootstrap-4 pnotify

【解决方案1】：

function notify(message, type, class){
    new PNotify({
        title: false,
        text: message,
        type: type,
        addclass: class,
        icon: false,
        buttons: {
                sticker: false
            }
    });
}

然后拨打notify('Your message','custom', 'your-css-class');

【讨论】：

我不希望它成为自定义类，我希望它使用引导程序中列出的默认警报类。喜欢他们网站上的演示。
查看portotheme.com/html/porto-admin/2.2.0/… 上的示例和portotheme.com/html/porto-admin/2.2.0/js/examples/… 上的脚本

【解决方案2】：

CSS：

    /* Alert Success Color */
.custom-notification-alert-success .notification {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.custom-notification-alert-success .ui-pnotify .notification .ui-pnotify-icon > span {
    border-color: #c3e6cb;
}

/* Alert Danger Color */
.custom-notification-alert-danger .notification {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.custom-notification-alert-danger .ui-pnotify .notification .ui-pnotify-icon > span {
    border-color: #f5c6cb;
}

/* Alert Warning Color */
.custom-notification-alert-warning .notification {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.custom-notification-alert-warning .ui-pnotify .notification .ui-pnotify-icon > span {
    border-color: #ffeeba;
}

/* Alert Info Color */
.custom-notification-alert-info .notification {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.custom-notification-alert-info .ui-pnotify .notification .ui-pnotify-icon > span {
    border-color: #bee5eb;
}

/* Alert light Color */
.custom-notification-alert-light .notification {
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe;
}

.custom-notification-alert-light .ui-pnotify .notification .ui-pnotify-icon > span {
    border-color: #fdfdfe;
}

/* Alert dark Color */
.custom-notification-alert-dark .notification {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
}

.custom-notification-alert-dark .ui-pnotify .notification .ui-pnotify-icon > span {
    border-color: #c6c8ca;
}

JavaScript：

    function notify (message, type){
    new PNotify({
        title: false,
        text: message,
        type: type,
        addclass: 'custom-notification-alert-success ui-pnotify-no-icon',
        icon: false,
        buttons: {
            sticker: false
        }
    });
}

【讨论】：