首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在PNotify中更改背景颜色

在PNotify中更改背景颜色
EN

Stack Overflow用户
提问于 2020-09-29 18:08:20
回答 2查看 538关注 0票数 0

我使用了一个主题,Porto Admin主题;http://preview.oklerthemes.com/porto-admin/3.0.0/ui-elements-notifications.html

此主题是使用PNotify传递通知:https://sciactive.com/pnotify/

当你在上面列出的Pnotify链接上选择"Bootstrap 4“(或Bootstrap 3)而不是深色丑陋的颜色时,我想用这个浅粉色的配色方案来做通知。我该怎么做呢?

代码语言:javascript
复制
    function notify (message, type){
    new PNotify({
        title: false,
        text: message,
        type: type,
        addclass: 'ui-pnotify-no-icon',
        icon: false,
        buttons: {
                sticker: false
            }
    });
}

这是我的代码

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-09-30 11:43:09

CSS:

代码语言:javascript
复制
    /* 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:

代码语言: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
        }
    });
}
票数 0
EN

Stack Overflow用户

发布于 2020-09-29 18:26:32

代码语言:javascript
复制
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');

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64117413

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档