How can we help you today?

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
Slideshowslideshow custom css


Textshow: 


DefaultCustom CSS
textshow defaulttextshow custom css



TABLE OF CONTENTS


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.


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.


eye icon

  • Click Save to apply your changes.


Save


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.


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.


eye icon

  • Click Save to apply your changes.


Save


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


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 57 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