更改 PNotify 中的背景颜色
Change background color in PNotify
我正在使用一个主题,Porto Admin Theme; http://preview.oklerthemes.com/porto-admin/3.0.0/ui-elements-notifications.html
此主题正在使用 PNotify 传递通知:https://sciactive.com/pnotify/
当你在列出的 Pnotify link 上 select“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
}
});
}
有我的代码
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');
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
}
});
}
我正在使用一个主题,Porto Admin Theme; http://preview.oklerthemes.com/porto-admin/3.0.0/ui-elements-notifications.html
此主题正在使用 PNotify 传递通知:https://sciactive.com/pnotify/
当你在列出的 Pnotify link 上 select“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
}
});
}
有我的代码
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');
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
}
});
}