Pnotify Notifications wrong colour

Question

Hello i am trying to change the colour of each notification but i cant find from where. I am using jqueryui as styling. Bellow you can see how the error and success notification appears in my screen!

This is is the code that i am using in order to build dynamically the script of calling 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'
                                    }
                                });
                            });";

What do you mean by colour? The text colour or the background colour? From what I know of pnotify, you specify a type of either `info`, `notice` or `error`. If you want a custom style, you can use the `addclass` option. — Yass, Feb 26 '16 at 18:48
Hello there as you can see i am using styling: 'jqueryui', but i cant find where in the css file what i need to change in order to change the bg colour of the notification. — apoellitsi, Feb 29 '16 at 10:20

Yass · Accepted Answer · 2016-03-02T21:16:31.330

There's no background-colour option when you initialize PNotify. You'll need to use the addclass option for any custom styles. ui.pnotify .ui-pnotify-container defines the background color of the notification. Appending an additional class to the end of ui.pnotify (e.g. ui.pnotify.myclass) and assigning it a background-color will allow you to make use of myclass in the initialization stage.

So, if you'd like to assign the notification a background colour of red, you'd create a css rule like this:

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

Then, in the initialization stage, you can use the addclass option like this:

$(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'
    }
  });
});

When you specify the custom class name in the addclass option, you don't need to include ui-pnotify; just the name of the class that follows (in this case red).

In the fiddle below, I've created two custom classes (red and blue). Change the value of addclass to red or blue to see the custom background colour:

Fiddle Demo

Pnotify Notifications wrong colour

1 Answers1