How can we help you today?

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:


Before


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


After


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!


NoteShortPoint 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


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:


Textshows Visual Builder 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:

Textshows New Wireframe Builder Settings


  • Legacy Page Builder:

Textshows Legacy Wireframe Builder Settings


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.


Please copy the code to the clipboard.


For the Slideshows Design Element


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


Please copy the code to the clipboard.


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 :


Add Custom CSS Visual Builder


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):


Add Custom CSS Wireframe


Confirm your changes by clicking Update:


Preview and Update Wireframe


Finally, save and/or republish the page.


Result


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


Result


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