Change Notification color

[ts]

hello, I want to change the pnotify color scheme to the standard bootstrap 4 alert colors as seen in their demo, when you select Bootstrap 3/4 (the light pastel colors); https://sciactive.com/pnotify/ – I am having trouble doing that. Please advise. Here is my PNotify code:

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

---

Template Version: Newest

[Support]

Hello,

This case is needed create custom notification color scheme classes and apply in the JS code. First add the code below at (css/custom.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;
}

* These are the bootstrap 4 alert colors

And here’s the JS code:

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

* Note addclass: 'custom-notification-alert-success ui-pnotify-no-icon',.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts