Pnotify - Custom Background Colours

by Yassar Khan

HTML

<link rel="stylesheet" href="//libs.cncdn.cn/pnotify/2.0.0/pnotify.all.min.css">
<script src="//libs.cncdn.cn/pnotify/2.0.0/pnotify.all.min.js"></script>
<button id="show-pnotify">Show pnotify</button>

CSS

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

.ui-pnotify.red .ui-pnotify-title,
.ui-pnotify.red .ui-pnotify-text {
  color: #FFF !important;
}

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

.ui-pnotify.blue .ui-pnotify-title,
.ui-pnotify.blue .ui-pnotify-text {
  color: #FFF !important;
}

JavaScript

$(document).ready(function() {
  $("#show-pnotify").on('click', function() {
      new PNotify({
        title: "Mapping Successfully deleted",
        styling: 'jqueryui',
        width: '400px',
        opacity: 0.9,
        addclass: 'red',
        type: 'success',
        hide: false,
        buttons: {
          sticker: false
        },
        animation: {
          effect_in: 'fade',
          effect_out: 'slide'
        }
      });
  });
});