How to Customize the Ticker Design Element

This article will walk you through the process of customizing the Ticker Design Element and its basic features.

Prerequisite

• You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.

Step-by-step Tutorial

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

Step 1: Insert the Ticker Design Element

Click Get Started to start the interactive tutorial on how to insert design elements:

Step 2: Edit the Ticker content

Start the interactive tutorial to learn how to edit the Ticker’s content:

NOTE: You can also create dynamic Ticker content. Go to How to Connect a ShortPoint Ticker to a SharePoint List or Connection Type: RSS Feeds to learn how.

Step 3: Customize the Ticker’s Design

Begin the interactive tutorial to customize the Ticker’s design:

NOTE: Check out Ticker Features to learn more about the features you can customize.

Step 4: Insert and Save

Get started to learn how to insert and save the Ticker Design Element:

Ticker Features

Below are the tabs you can use to customize the Ticker Design Element:

A. Design tab

The Design tab allows you to customize the design of the Ticker Design Element. It has the following options:

	Title	allows you to modify the main title of the Ticker
	Style	allows you to customize the Ticker Style. You can choose from Border or Solid.
	Size	allows you to change the size of your Tickers. You can choose from Normal, Medium, Large, or Huge.
	Color	allows you to customize the color background of your Ticker.
	Speed	allows you to control how fast the Ticker items transition from one to another. You can choose from Fast, Medium, or Slow.
	Text Color	allows you to customize the text color of the items on your Ticker.
	Transition	allows you to modify how your Ticker moves. You can choose from Default or Slide-up.

B. Items tab

The Items tab allows you to duplicate, delete, configure content, and add new items. It has the following options:

ITEMS ACTION ICONS

	Cogwheel	opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.
	Duplicate	duplicates the item selected.
	Trash	deletes the item selected.
	Add New	adds a new item.
	Drag and Drop	allows you to re-arrange the position of the item.

COGWHEEL ICON SETTINGS

	Title	add item title.
	Link	add a link to redirect users who click on an item.
	Linking Options	allows you to select how your link will open. Check out Linking Options to learn more about each option.

C. Advanced tab

The Advanced tab contains more customizations to edit your Ticker Design Element. It has the following options: 

TEXT COLOR

	Title	allows you to customize the text color of the Ticker Title.
	Items	allows you to customize the text color of the items in your Ticker.

BACKGROUND COLOR

	Title background color	allows you to change the title background color.
	Title hover color	allows you to apply a different color to the ticker's title when you hover over it.
	Item background color	allows you to change the items' background color.
	Item hover color	allows you to apply different colors to the tickers' items when you hover over them.

D. Custom CSS Tab

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

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

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

That’s it! You now know how to customize the Ticker Design Element. Enjoy using this Design Element on your SharePoint pages.

Related articles:

• Adding, Duplicating, Moving and Deleting Items of ShortPoint Design Elements
• ShortPoint Connect: Basic Tutorial
• Connection Types: RSS Feeds