1. First, log into your admin account and navigate to "Manage -> Customise -> Loyalty panel"

2. Next, scroll down and click "open CSS editor"

EDITING  NOTIFICATION

In the CSS editor, change the colour/text size to one of your choices:

.lion-notification {
    background-color: antiquewhite;
    }
  • Replace the background-colour, font-size etc. to match your preference
  • Replace  .lion-notification  with the following, depending on what element you want to style

ELEMENT / CSS

Main background: .lion-notification

Main text:  .lion-notification__message  

Button background:  .lion-notification__action-button 

Action button: .lion-notification__action-button 

Close button: .lion-notification__close-button

------------------------------------


Example notification:

CSS used:

.lion-notification{
  background-color: antiquewhite;
  }

.lion-notification__message{
  font-size: 20px;
  color: darkslategray;
  }

.lion-notification__action-button .lion-action-button{
  background-color: darkslategrey;
  color: white;
  }

.lion-notification__close-button{
  font-size: 24px;
  }

Customising Campaigns notifications:

To customise your Campaigns notification, please use the below class to target the campaigns notification.

.lion-notification—campaign
Did this answer your question?