In this article we are presenting the ShortPoint Tickers Design Element, which has some nice improvements starting from ShortPoint SPFx version 6.9.35.x. New ShortPoint Tickers will be soon released for SharePoint On-Premise (SharePoint 2013 and SharePoint 2016).

With this element, you can easily show your team, department or company updates:

Tickers work really well with the RSS Connection type to display, for example:

• breaking news:

• stock market indexes:
  
  

Let's have a closer look at the Tickers Design Element.

Prerequisite

• You have a ShortPoint SPFx version 6.9.35.x or higher. Click here to check and download the latest available version of ShortPoint.

Adding ShortPoint Tickers to the page

The Tickers Design Element can be easily added to your pages using ShortPoint Page Builder.

• Modern page:

You can start with adding a ShortPoint web part to your page by clicking the plus sign and selecting ShortPoint from the list of the web parts.

Then, click the blue Insert button to open the ShortPoint Page Builder.

Note: If adding the ShortPoint web part for the first time, Info Design Element will be added automatically. Click the cross icon to remove it. Then, click the blue Insert button to open the Page Builder.

• Classic page:

1. Choose the Insert tab in the Ribbon.

2. Click the blue Insert button.

Then, select the Tickers Design Element from your ShortPoint Page Builder menu:   

Note: There are two ways of creating tickers: static and dynamic.

• To continue with the static way of creating and managing tickers, please, check this article: Adding, Duplicating, Moving and Deleting ShortPoint Elements.
• We recommend using the dynamic way of adding, so that you can connect your SharePoint lists or the RSS Feeds links. Please, check our ShortPoint Connect: Basic Tutorial for more details on how it works, and continue to the next paragraph of this article.

Connecting ShortPoint Tickers

Use the ShortPoint Connect feature to connect your SharePoint lists or RSS Feeds to the Tickers Design Element. With this feature, you can always see the relevant updates and news on the page.

Connecting ShortPoint Tickers to SharePoint List

With ShortPoint you can connect the Tickers Design Element to the lists of your SharePoint.

Connecting ShortPoint Tickers to RSS Feeds

It is also possible to connect the Tickers Design Element to the RSS Feeds:

Please, check our solution article Connection Types: RSS Feeds.

Features

1. Settings tab

Here you can find some general settings you can apply for your Tickers Design Element. 

1.1. Style

You can customize the style of the tickers with this option. To change the tickers' style, select it from the drop-down of the Style option, as shown below:

1.2. Size

You can change the size of your tickers with this option. To change the tickers' size, select it from the drop-down of the Size option, as shown below:

1.3. Color

This option allows you to customize the background color of all the tickers in your Tickers Design Element.

Colors are picked up from the default color settings of your Site Collection. To change the background color, select it from the drop-down of the Color option, as shown below:

1.4. Speed

Choose how fast you would like the tickers items to move with this option. To change the speed, select it from the drop-down of the Speed option, as shown below:

1.5. Text Color

This option allows you to customize the text color of all the tickers in your Tickers Design Element.

Colors are picked up from the default color settings of your Site Collection. To change the color, select it from the drop-down of the Text Color option, as shown below:

1.6. Transition

This option allows you to change the style of appearing the next tickers. Select it from the drop-down of the Transition option, as shown below:

2. Advanced tab

Need more customization? Here you can find advanced settings you can apply for your Tickers Design Element. 

2.1. Background color

With this feature you can customize the background color of your tickers. 

There are following options to customize Background Color:

• Title background color. With this option you can change the title background color. Simply choose it from the drop-down of this option;
• Title hover color. If you would like to apply different colors to the tickers' titles when you hover over it, this feature is for you. Simply choose the color from the drop-down. 
• Item background color. With this option you can change the item background color. Simply choose it from the drop-down of this option;
• Item hover color. If you would like to apply different colors to the tickers' items when you hover over it, this feature is for you. Simply choose the color from the drop-down. 

You can play around with these options and customize the Background Color as much as you like.

For example, we have set primary as a title background color, primary-dark as a title hover color, white as an item background color and alternate-1 as an item hover color. This is how our result looks like:

2.2. Text Color

With this feature you can customize the text color of your tickers. 

There are following options to customize Text Color:

• Title. With this option you can change the title text color. Simply choose it from the drop-down of this option;
• Items. With this option you can change the items text color. Simply choose it from the drop-down of this option.

You can play around with these options and customize the Text Color as much as you like.

For example, we have set white-light as a title color and primary-dark as items color. This is how our result looks like:

Example

Here is the example of the page after the Tickers Design Element was customized:

Related articles:

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