Change background color in PNotify

1.4k Views Asked by At

I am using a theme, Porto Admin Theme; http://preview.oklerthemes.com/porto-admin/3.0.0/ui-elements-notifications.html

This theme is using PNotify to deliver notifications: https://sciactive.com/pnotify/

I want to make the notifications in this light pastel color scheme when you select "Bootstrap 4" (or Bootstrap 3) on the Pnotify link listed above, instead of the dark ugly colors. How can I do this?

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

There is my code

2

There are 2 best solutions below

0
tony On BEST ANSWER

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
        }
    });
}
2
Gabor On
function notify(message, type, class){
    new PNotify({
        title: false,
        text: message,
        type: type,
        addclass: class,
        icon: false,
        buttons: {
                sticker: false
            }
    });
}

Then call notify('Your message','custom', 'your-css-class');