0

我正在使用一个主题,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
            }
    });
}

有我的代码

4

2 回答 2

0
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');

于 2020-09-29T10:26:31.967 回答
0

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
        }
    });
}
于 2020-09-30T03:43:09.130 回答