How can we help you today?

How to Customize the Alert Design Element

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


Sample Alert


TABLE OF CONTENTS


Prerequisites



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.


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.


Alert tag

  • Click the blue plus icon.


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.


eye icon


  • Click Save to apply all your changes.


Save


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 tab


Content tab


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.
IconIcon
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:


Rich Text editor


1Bold
makes the format of the text Bold
2Italic
makes the format of the text Italic
3Underlinemakes the format of the text Underline
4Text Color
allows you to change the color of your text
5Font Family
allows you to change the font of your text. If you have any custom fonts, previously added to the Theme Builder, check these articles on how to add custom fonts from Google Fonts, Fonts.com, Adobe Typekit, or manually. They will be displayed in the list of fonts.
6Font Size allows you to change the size of your text
7Paragraph Format
allows you to specify the heading of the text
8Undoallows you to undo your last action
9Redo
allows you to redo your last action
10More Rich opens more options in the Rich Text Editor
11Background Color
allows you to add a background color to the text
12Strikethrough 
allows you to add a strikethrough to your text
13Clear Formatting
clears the formatting of the text selected
14Ordered Listallows you to create an ordered list using numbers
15Unordered Listallows you to create an unordered list using bullet points
16Align
allows you to change the alignment of the text
17All Caps
capitalizes the selected text
18Small Caps
turns the selected text into small letters
19Code View
allows you to edit the text in code view
20Insert Linkallows you to insert a link
21Insert Table allows you to insert a table
22Insert Video
allows you to insert a video
23Insert Image
allows you to insert an image



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


ShortPoint icon


It has the following options:


Inline Design Elements


1Buttonallows you to insert a button
2Linkallows you to insert a link
3Tooltipallows you to insert a tooltip
4Popover
allows you to insert a popover
5Abbreviationallows you to add an abbreviation
6Dropcapallows you to show drop-cap
7Label 
allows you to add a label
8Emphasisallows adding emphasis
9Icon allows you to add an icon
10Emoticonallows you to add an emoticon


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:


Design tab


ColorColorcustomize the main color of your alert.
Close button toggleClose Button
allows you to close the alert.
Remember Dismissed Alerts toggleRemember 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.


Custom CSS tab


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:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 63 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more