How to Customize the Alert Design Element

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

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Insert the Alert Design Element
  • Step 3: Customize the content
  • Step 4: Customize the Alert’s design
  • Step 5 (Optional): Add a Design Element inside the Alert
  • Step 6: Save
• Alert Features
  • A. Content tab
  • B. Design Tab
  • C. Custom CSS Tab

Prerequisites

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

Interactive Tutorial

Click Get Started to learn how to customize the Alert Design Element:

NOTECheck out Alert Features to learn more about the OOTB options you can customize

Step-by-step Tutorial

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

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Insert the Alert Design Element

• Click the plus icon.
• Use the search box to look for Alert and click it.

Step 3: Customize the content

• Add Content.
• Add an Icon.

NOTECheck out our Icons page to see all the icons you can add to your SharePoint page.

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

Step 4: Customize the Alert’s design

• Navigate to the Design tab.
• Customize the Alert according to your preferences.
• Once satisfied, click the green check mark.

NOTECheck out Alert Features to learn more about the OOTB options you can customize

Step 5 (Optional): Add a Design Element inside the Alert

NOTEAlert is a content-holder Design Element. This means that you can add any other Design Element inside it.

• Hover over the Alert tag and click it.

• Click the blue plus icon.

• Select the Design Element you want to display inside the Alert.
• Customize the selected Design Element according to your preference.
• Click the green check mark once satisfied.

Step 6: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

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. Content tab

The Content tab allows you to customize the content of the Alert. It has the following options:

	Content	allows you to add content inside the Alert. The content field also has a Rich Text Editor. Check out the table below to see its editing features.
	Icon	allows you to display an icon inside the Alert. Check out our Icons page to see all the icons you can add to your SharePoint page.

The Rich Text Editor allows you to customize how your text will appear on your page. It has the following options:

The Rich Text Editor also has ShortPoint Inline Design Elements. You can see them by clicking the ShortPoint icon:

It has the following options:

NOTECheck out Introducing Inline Design Elements Feature for ShortPoint Page Builder Live Mode and ShortPoint Page Builder Grid to learn more about Inline Design Elements.

B. 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. NOTE: Clearing the browser history will cause all dismissed alerts to be shown again to all users.

C. 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 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