Alert Box

Multiple purpose alerts can be fixed to the viewport or added inside content. Control how they appear and if/when to show them again to returning visitors.

The difference between the built-in Modal and Alert Box components is that the Alert Box’s alerts

  • can be placed inside the content, not just fixed like a modal.
  • there isn’t a backdrop.
  • comes with a close icon built-in.
  • can be used for inline alerts or notices that need to be fixed.
  • can be used to place inside a header row to create an announcement bar that can be closed.

Option Controls

Alerts can either be shown just once to visitors, shown every time a visitor lands on the page or shown every x days.

Gutenberg Visibility

If using the Oxygen – Gutenberg integration, alerts can be set to be hidden or visible inside the gutenberg editor, depending on if the content inside needs to be editable.

Alert Closing

The alert box currently has two ways of being closed. Fading Out or Sliding Up. The sliding up is designed to work best when the alert is being used as a notification bar, see the instructions below.

Close Icon

The alert box comes with a default close icon which can be customised using Oxygen’s familiar icon controls to change the icon or for styling.

The default close icon can also be removed if you want to add another icon to act as the close button. As long as the element inside is given the class ‘oxy-close-alert’ then it will work as a close button.

Note – for changing this default icon, some changes may not be seen in real time. The solution is to click ‘Apply Params’ at the bottom of the settings to apply the changes.

Building a Header Notification Bar

  • Create a new header row to go above the header row you are using for your header content. Set the width for the header row to be full width and don’t set a height.
  • Place an alert box in the row center and set the width to 100%. The alert box should now take up 100% of the site width.
  • Change the alert closing to slide up.
  • Add your content and use a condition if you only want the notification to appear on certain pages or time.
chevron-down