How to Change Dot Colors on the Textshow and Slideshow Design Elements Using Custom CSS

By default, the Slideshow and Textshow Design Elements have horizontal dots that signify the number of slides on them. This article will explain how to modify the color of the horizontal dots using Custom CSS. 

Slideshow:

Default	Custom CSS

Textshow: 

Default	Custom CSS

TABLE OF CONTENTS

• Prerequisites
• Customizing Horizontal Dot Color for the Slideshow Design Element:
  • Step 1: Edit the ShortPoint web part
  • Step 2: Copy the Custom CSS
  • Step 3: Paste the Custom CSS
  • Step 4: Save
• Customizing Horizontal Dot Color for the Textshow Design Element:
  • Step 1: Edit the ShortPoint web part
  • Step 2: Copy the Custom CSS
  • Step 3: Paste the Custom CSS
  • Step 4: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have the Slideshow / the Textshow Design Element on your page.

Customizing Horizontal Dot Color for the Slideshow Design Element:

Follow the interactive tutorial or the detailed guide below to learn how to change the dot colors for Slideshows.

Before starting the interactive tutorial, copy the Custom CSS below:

/* background of ACTIVE dot: */
.slick-dots > li.slick-active button {
  background: magenta !important;
border-color: white !important;
}
/* interior of ACTIVE dot: */
.slick-dots > li.slick-active button:after {
  background: magenta !important;
}
/* background of INACTIVE dots: */
.slick-dots li button {
  background: cyan !important;
  border-color: white !important;
}
/* interior of INACTIVE dots: */
.slick-dots li button:after {
  background: cyan !important;
}

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: Copy the Custom CSS

• Copy the Custom CSS below:

/* background of ACTIVE dot: */
.slick-dots > li.slick-active button {
  background: magenta !important;
border-color: white !important;
}
/* interior of ACTIVE dot: */
.slick-dots > li.slick-active button:after {
  background: magenta !important;
}
/* background of INACTIVE dots: */
.slick-dots li button {
  background: cyan !important;
  border-color: white !important;
}
/* interior of INACTIVE dots: */
.slick-dots li button:after {
  background: cyan !important;
}

NoteYou may update the background and border-color values according to your preferences.

Step 3: Paste the Custom CSS

NOTEBefore proceeding, ensure a Slideshow Design Element is on your page.

• Click the Slideshow tag.
• Select the cogwheel icon.
• Navigate to the Custom CSS tab.
• Paste the copied code in the field provided.
• Click the green checkmark.

Step 4: Save

• Click the eye icon to see your page in real-time.

• Click Save to apply your changes.

Customizing Horizontal Dot Color for the Textshow Design Element:

Follow the interactive tutorial or the detailed guide below to learn how to change the dot colors for Textshows.

Before starting the interactive tutorial, copy the Custom CSS below:

/* background of ACTIVE dot: */
.shortpoint-textshow-indicators .shortpoint-textshow-active {
  background: magenta !important;
  border: none !important;
}
/* interior of ACTIVE dot: */
.shortpoint-textshow-indicators > *.shortpoint-textshow-active:after {
  background: magenta !important;
}
/* background of INACTIVE dots: */
.shortpoint-textshow-indicators > * {
  background: cyan !important;
  border: none !important;
}
/* interior of INACTIVE dots: */
.shortpoint-textshow-indicators > *:after {
  background: cyan !important
}

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: Copy the Custom CSS

• Copy the Custom CSS below:

/* background of ACTIVE dot: */
.shortpoint-textshow-indicators .shortpoint-textshow-active {
  background: magenta !important;
  border: none !important;
}
/* interior of ACTIVE dot: */
.shortpoint-textshow-indicators > *.shortpoint-textshow-active:after {
  background: magenta !important;
}
/* background of INACTIVE dots: */
.shortpoint-textshow-indicators > * {
  background: cyan !important;
  border: none !important;
}
/* interior of INACTIVE dots: */
.shortpoint-textshow-indicators > *:after {
  background: cyan !important
}

NoteYou may update the background values according to your preferences.

Step 3: Paste the Custom CSS

NOTEBefore proceeding, ensure a Textshow Design Element is on your page.

• Click the Textshow tag.
• Select the cogwheel icon.
• Navigate to the Custom CSS tab.
• Paste the copied code in the field provided.
• Click the green checkmark.

Step 4: Save

• Click the eye icon to see your page in real-time.

• Click Save to apply your changes.

Congratulations! You can now customize the colors of the horizontal dots on the Slideshow and Textshow Design Elements.

Related articles:

• How to Add Play/Pause Functionality to the Slideshows Design Element
• How to Make Rounded Corners for the ShortPoint Slideshows Design Element
• Order Bullets Are Misplaced for Slideshows & Image Carousels on Modern Pages
• How to Customize the Loop Speed in Slideshows, Image Carousels or Tickers Design Elements