Pnotify 通知颜色错误答案

【问题标题】：Pnotify Notifications wrong colourPnotify 通知颜色错误
【发布时间】：2016-06-09 10:24:16
【问题描述】：

您好，我正在尝试更改每个通知的颜色，但我无法从哪里找到。我正在使用 jqueryui 作为样式。下面你可以看到错误和成功通知是如何出现在我的屏幕上的！

这是我用来动态构建调用 pnotify 脚本的代码

string script1 = @"var displayIcon = " + displayIcon + @";
                            $(function(){
                                new PNotify({
                                    title: '" + messageString + @"',
                                    styling: 'jqueryui',
                                    width: '400px',
                                    opacity: 0.9,
                                    type: '" + typeLowercase + @"',
                                    icon: displayIcon,
                                    hide: false,
                                    buttons: {
                                        sticker: false
                                    },
                                    animation: {
                                        effect_in: 'fade',
                                        effect_out: 'slide'
                                    }
                                });
                            });";

【问题讨论】：

颜色是什么意思？文字颜色还是背景颜色？根据我对 pnotify 的了解，您可以指定 info、notice 或 error 的类型。如果您想要自定义样式，可以使用addclass 选项。
您好，您可以看到我正在使用样式：'jqueryui'，但我无法在 css 文件中找到我需要更改的位置以更改通知的 bg 颜色。跨度>

标签： c# css jquery-ui pnotify bootstrap-notify

【解决方案1】：

初始化 PNotify 时没有 background-colour 选项。对于任何自定义样式，您都需要使用 addclass 选项。 ui.pnotify .ui-pnotify-container 定义通知的背景颜色。在ui.pnotify 的末尾附加一个附加类（例如ui.pnotify.myclass）并为其分配background-color 将允许您在初始化阶段使用myclass。

因此，如果您想为通知分配红色背景色，您可以创建如下 CSS 规则：

.ui-pnotify.red .ui-pnotify-container {
  background-color: red !important;
}

然后，在初始化阶段，您可以像这样使用addclass 选项：

$(function() {
  new PNotify({
    title: '" + messageString + @"',
    styling: 'jqueryui',
    width: '400px',
    opacity: 0.9,
    type: '" + typeLowercase + @"',
    icon: displayIcon,
    hide: false,
    addclass: 'red',
    buttons: {
      sticker: false
    },
    animation: {
      effect_in: 'fade',
      effect_out: 'slide'
    }
  });
});

在addclass选项中指定自定义类名时，不需要包含ui-pnotify；只是后面的类的名称（在本例中为 red）。

在下面的小提琴中，我创建了两个自定义类（red 和 blue）。将addclass 的值更改为red 或blue 以查看自定义背景颜色：

Fiddle Demo

【讨论】：