Adjust the background hue within PNotify

I've integrated the Porto Admin Theme into my website, which can be found at

This theme utilizes PNotify for notifications, available at:

I'm looking to customize the notification colors in a light pastel scheme when choosing "Bootstrap 4" or Bootstrap 3 on the Pnotify site, instead of the current darker colors. How can I achieve this?

    function notify (message, type){
    new PNotify({
        title: false,
        text: message,
        type: type,
        addclass: 'ui-pnotify-no-icon',
        icon: false,
        buttons: {
                sticker: false
            }
    });
}

Above is the code snippet I am using

javascriptbootstrap-4pnotify

Answer №1

CSS:

    /* Changing Notification Colors */
.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;
}

/* Alerting Danger with 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;
}

/* Warning of Alerts in a Different 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;
}

/* Notifying with Information, Color Coded */
.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;
}

/* Lighting Up Alerts with Light Colors */
.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;
}

/* Darkening Notifications with Dark Hues */
.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:

    function notifyUser(message, category) {
    new PNotify({
        title: false,
        text: message,
        type: category,
        addclass: 'custom-notification-alert-success ui-pnotify-no-icon',
        icon: false,
        buttons: {
            sticker: false
        }
    });
}

Answer №2

function displayNotification(msg, notificationType, customClass){
    new Notification({
        title: false,
        message: msg,
        type: notificationType,
        styleClass: customClass,
        iconFlag: false,
        actionButtons: {
            closeBtn: false
        }
    });
}

Simply use the function by calling 

displayNotification('Your message','custom', 'your-css-class');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to consistently and frequently invoke a REST API in Angular 8 using RxJS?

I have developed a REST API that retrieves a list of values. My goal is to immediately invoke this API to fetch values and store them in a component's member variable. Subsequently, I plan to refresh the data every five minutes. Upon conducting some ...

javascriptangulartypescriptrxjs

Navigating through dynamic elements using Selenium

I'm having trouble extracting boxer information from the flashcore.com website using Selenium. The code I've written doesn't seem to be working properly. Can anyone point out where the error might be? The expectation is that Selenium should ...

javascriptpythonajaxseleniumparsing

Is there a method to avoid the default state from loading upon the initialization of my AngularJS application?

Context In order to ensure that the user has an authenticated session, my app must send a request to the server before loading the first state. Depending on the URL, if the user is not authenticated, they should be redirected to the login page. For examp ...

javascriptdjangoangularjsangular-ui-router

Get tabular information in xlsx format by utilizing the xlsx npm package for download

I have been attempting to convert my json-like data into an xlsx file format. I utilized the xlsx npm package and followed various code samples available online, however, when trying to open the file in Excel, I encountered the following error: https://i.s ...

javascriptnpmxlsx

Create a jQuery element callback

I am faced with a button that I need to call in order to retrieve its id number and then hide it. Here is the line of code for the button: <div id="follow_21" class="button rounded" title="">Follow</div> I'm ...

javascriptjqueryjquery-events

Extracting data from a JSON response and presenting it within a div element, using a weather API

Looking to parse json data in order to extract information from the json response, specifically the values of weather.main and weather.description and then display them inside a div. Below is the sample json response along with the accompanying JavaScript/ ...

javascriptjqueryhtmljson

Utilize Ajax to open and close an HTML tag within separate div elements

I am facing a challenge in my project where I have to dynamically open and close a form using ajax. The form needs to be opened within a div, and then closed in another div below it like the following: Opening form (header div) $('#header').h ...

javascriptjqueryhtmlajax

Authentication with PassportJS using Google OAuth2 strategy

When using the PassportJS Google OAuth Strategy, I encountered an issue where the user id I serialize and send to the cookie for the browser does not return when attempting to deserialize it. This becomes evident when I use console.log on the user, which r ...

javascriptnode.jsexpresspassport.jscookie-session

Is passportjs responsible for managing user registration?

Is it possible to utilize Passport for user signup if I am storing user information on a self-hosted server and cannot find a user signup function in the Passport.js documentation? ...

javascriptnode.jsexpresspassport.js

converting a JSON object into an array

I'm facing a challenge and unsure how to proceed. I have received JSON data from an API: https://i.stack.imgur.com/GdDUo.png When I log the data, this is what appears in the console: https://i.stack.imgur.com/GjSPW.png My goal is to extract the id ...

javascriptjsonreactjs

A single parallax transition designed exclusively for you

I am looking to add a unique parallax transition to my website, specifically one that features a nice scroll followed by a subtle bounce effect. For example, I want to incorporate an arrow that, when clicked, smoothly scrolls the user to the bottom of th ...

javascriptjqueryhtmlcss

Leveraging D3.js in combination with Total.js and node.js

I have been attempting to utilize total.js in conjunction with D3 for creating a tree visualization. However, I am encountering issues when trying to download D3. This is what I do: npm install D3 Upon running the above command, I receive the following e ...

javascriptnode.jsd3.jscontextifytotal.js

I am currently working on developing an HTML and JavaScript audio player that can play audio at specific scheduled times

Looking to create a custom HTML/JavaScript audio player that adjusts playback based on the time of day. For instance, if it's 1:00 pm, the file will start playing from 0:00 minutes; and if it's 1:01 pm, the file will begin playing from 1:00 minut ...

javascriptjqueryhtml

Angular Firebase Authentication: Simplifying User Authentication in Angular Apps

Tools I'm Utilizing Angular 5 AngularFire5 Firebase & Firestore Objective I am working on developing a straightforward authentication/login and registration system. While I have already created one, I am facing some challenges and seeking the ...

javascriptfirebasefirebase-authenticationangularfire2angular5

Is there a way to use JavaScript to modify the position of a div element

Can we adjust the div position using CSS (absolute or relative) with JavaScript? Here's an example code snippet: <div id="podpis" style="margin-top: 2rem;"> <div class="invoice-signature"> <span><?=$xml->sanitiz ...

javascript

React Native does not support Laravel Echo's listenForWhisper functionality

I have successfully implemented private channels and messaging in my Laravel App using websockets:serve. Now, I am attempting to enable whisper functionality for the typing status but encountering some issues. When sending a whisper: Echo.private('c ...

javascriptreactjslaravelreact-native

Is it possible to create a secondary <li> dropdown menu using JavaScript or jQuery from a PHP-generated dropdown menu?

Using a foreach loop to query the database, I have created a drop-down menu. Now, what I want is that when I select a subitem from the menu using JavaScript, I can retrieve the value and make an Ajax request to fetch all the values corresponding to the su ...

javascriptphpjqueryajaxdrop-down-menu

What is the best way to halt Keyframe Animation once users have logged in?

To enhance user engagement, I incorporated keyframe animation into my login icon on the website. The main objective is to capture the attention of visitors who are not registered users. However, once a user logs in, I intend for the keyframe animation to c ...

javascriptcsscss-animationskeyframe

Is your Cloud Functions task generating an Array when querying?

To access items and products in my database, I need to retrieve the "ean" field from the product and check if it matches the one in the request body. The structure of my database is as follows: "cart": { "items": { "0": {info here}, "1": {info ...

javascriptfirebase-realtime-databasegoogle-cloud-functions

Tips for storing arrays in AngularJS with JavaScript

I am new to using JavaScript. I have a function that stores objects in an array to an Angular model. Here is an example: function getSpec(){ debugger var i; for(i=0;i<main.specifications.length;i++){ main.newProduct.Specification= ( ...

javascriptangularjsmodel