How to Customize the Alert Design Element in Live Mode

This article will demonstrate how to insert and customize the Alert Design Element in Live Mode.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Insert the Alert Design Element
  • Step 2: Customize the Alert
  • Step 3: Add Content inside the Alert
  • Step 4: Save
• Alert Features
  • A. Design Tab
  • B. Custom CSS Tab

Prerequisites

• You have the latest ShortPoint SPFx version installed for your environment
• You are a ShortPoint Designer with an active license

Step-by-step Tutorial

Follow the steps below to learn how to customize the Alert Design Element:

Step 1: Insert the Alert Design Element

Watch the video below to learn how to insert the Alert Design Element in Live Mode:

NOTE: Check out ShortPoint Basics: How to Insert a ShortPoint Design Element in Live Mode for more details.

Step 2: Customize the Alert

Go to the Design tab and click the down icon to customize the color of your alert. The Primary color of your theme will be the default color of the alert. Choose any color you prefer from the drop-down list.

(Optional) Toggle on the Close Button option if you want to allow users to dismiss the alert.

(Optional) You can also toggle on Remember Dismissed Alerts, which allows you to only show the alert to users who have not yet dismissed the alert. Once a user dismisses an alert, it will not appear again for them.

Add an icon. 

Once you are satisfied, click the green checkmark.

Step 3: Add Content inside the Alert

Double-click the Text tag to edit the text inside the alert.

NOTE: To display multiple alerts, check out How to Connect the ShortPoint Alert Design Element to a SharePoint List.

Step 4: Save

Click Save to keep your progress.

Then, click Republish.

Alert Features

There are many ways to customize the features of the Alert Design Element. In the settings window, you will find the following tabs:

A. Design Tab

You can modify the default design of the element in the Design Tab. Below are the settings you can configure:

	Color	customize the main color of your alert.
	Close Button	allows you to close the alert.
	Remember Dismissed Alerts	allows you to only show the alert to people who have not closed it yet.
	Icon	customize the icon of the alert.

B. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Alert Design Element. 

NOTE: Check out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.

NOTE: The Connect and Visibility tabs are currently not available in Live Mode.

And you’re done! Start customizing your Alert Design Element in Live Mode now.

Related articles:

• How to Hide ShortPoint Alert After a Page Refresh
• Adding, Duplicating, Moving and Deleting Items of ShortPoint Design Elements
• Managing Visibility for ShortPoint Elements
• ShortPoint Connect: Basic Tutorial
• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• Add Custom CSS to a ShortPoint Element right from the Page Builder (Advanced Tutorial)
• ShortPoint Generator: Introduction
• ShortPoint Generator Basic Tutorial. Part 1: Creating Generated Content
• ShortPoint Generator Basic Tutorial. Part 2: Using Generated Content on Pages
• Getting Started with ShortPoint Footer for SharePoint
• Part 1: Create the Footer from ShortPoint Generator Page
• Part 2: Add the Footer to SharePoint