How to Change Dot Colors on the Textshows and Slideshows Design Elements Using Custom CSS

By default, the ShortPoint Textshows and Slideshows Design Elements have a simple white and blue dot (for the current slide), and white and grey dots (for the other slides), as shown below:

However, you can change the colors of these dots using some custom CSS to achieve a more personalized look:

In this article, we will explain how to accomplish this. Here we will use the Textshows Design Element as our example, but the CSS code needed for the Slideshows Design Element will be provided as well. Let's get customizing!

Note: ShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid Mode was formerly known as Wireframe Builder.

TABLE OF CONTENTS

• Before we begin
• Step 1. Open the settings of the Textshows Design Element
• Step 2. Copy the custom CSS code
  • For the Textshows Design Element
  • For the Slideshows Design Element
• Step 3. Update the Textshows Design Element with the code
• Result

Before we begin

ShortPoint CSS customizations are available since the ShortPoint version 5.2.2.28 or higher. We recommend you to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.

Step 1. Open the settings of the Textshows Design Element

Edit the page. Open the settings of the Textshows Design Element:

• In the ShortPoint Page Builder Live Mode:

Locate the Design Element you would like to modify and enter the EasyPass Active Mode. Then click the cog wheel icon to open the settings:

The Design tab will open.

• In the ShortPoint Page Builder Grid Mode:

Click the cog wheel icon to open the settings of the Textshows Design Element:

• New ShortPoint Page Builder Grid Mode:

• Legacy Page Builder:

The Settings tab will open.

Step 2. Copy the custom CSS code

Here is the custom CSS code you will need to use for changing the dot colors:

For the Textshows Design Element

/* 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
}

Note: You may update the background values according to your preferences.

/* 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;
}

Note: You may update the background and border-color values according to your preferences.

Step 3. Update the Textshows Design Element with the code

Switch to the Custom CSS tab (1) and paste the copied code (2):

• In the ShortPoint Page Builder Live Mode :

You will see the changes applied to your Design Element in real time.

Confirm your changes by clicking the checkmark button (3).

• In the ShortPoint Page Builder Grid Mode :

You may check how it will look on your page by clicking the Preview button (3):

Confirm your changes by clicking Update:

Finally, save and/or republish the page.

Result

That's it. This is how it may look like:

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