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

Answer 1

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