How to Custom CSS works

Krunal -

how to add custom CSS to your notifications at both the notification-level and domain-level:

We have two types of custom CSS options

1. Notification-level custom CSS

  1. Notification-level custom CSS

With notification-level custom CSS, you have the ability to add your own CSS styles specifically for a particular notification. To do this, you'll need to follow these steps:

  • Right-click on the notification element and select "Inspect" from the context menu. This will open the developer tools in your browser.
  • In the Elements panel of the developer tools, locate the notification element that you want to apply custom styles to.
  • Find the CSS class name for the notification element. This will be listed in the HTML code for the notification.
  • Copy the class name and use it to create a custom CSS rule that targets the notification element. For example, if the class name is "notification-box", you would create a rule like this:

.Single-Line-One {

/* your custom styles go here */

}

For font size:
.Single-Line-One {
font-size:20px;
}

  • Add the CSS properties you want to apply to the notification element within the custom rule. For example, you might want to change the background color or font size of the notification.

Once you've created your custom CSS rule, you can save it and the styles will be applied specifically to that notification.

2. Domain-level custom CSS

With domain-level custom CSS, you can add your own CSS styles that will apply to all notifications that appear on a particular domain. To do this, you'll follow the same steps as with notification-level CSS, but instead of targeting a specific notification element, you'll target all notifications on the domain. 

You have to follow the same steps as the notification-level CSS. However, this CSS class style will apply to all notifications for a particular domain

Example: if you want to add z-index to all notification then copy below code & paste it in CSS box.

For z-index:

.NFDGdflt26_Sb425txt_lt_bt,
.NFDGdflt26_Sb425txt_rt_bt,
.NFDGdflt26_Sb425txt_cnt_bt,
.NFDGdflt26_Sb425txt_lt_cnt,
.NFDGdflt26_Sb425txt_rt_cnt,
.NFDGdflt26_Sb425txt_cnt_cnt,
.NFDGdflt26_Sb425txt_rt_tp,
.NFDGdflt26_Sb425txt_cnt_tp,
.NFDGdflt26_Sb425txt_lt_tp {
z-index: 99999999999;
}

Example: If you see, Notifications are not using website's font then you can use the below CSS & replace your font family instead of  "Montserrat"

.notificatio-pro{
 font-family: Montserrat; //your font
}