How to Change Countdown Colors using Custom CSS

Countdown elements always inherit your primary brand color, but it is not always the case that you want to use the same brand color for all of your counters, sometimes you just want to use a different color, and in this article I am going to show you how you can do this using the Custom CSS feature available for all ShortPoint elements in the page builder.

Pre-requisites:

Custom CSS Feature in ShortPoint page builder, was introduced in August 2017 with version 5.2.2.28 and higher,

So In case you have an older version of ShortPoint, it will be good to head to our downloads page and get the latest version of ShortPoint.

Custom CSS:

Let us assume that I want my countdown to look in dark gray ( color value in HEX: #333, in RGBA  rgba(51, 51, 51, 1) ), 

If you want to maintain the same ShortPoint design, in which the icon has a solid color, and rest elements will have a transparent version of the same solid color, then you need to have the first solid color in RGBA format ( so we can play with transparency ), otherwise you can still use any color in any format you like, and it will still work.

Open the ShortPoint Page Builder, edit your Countdown element, navigate to the Custom CSS tab, and paste the following code:

/* icon */
.shortpoint-countdown-icon .shortpoint-countdown-amount {
  background-color: rgba(51,51,51, 1) !important;
}

/* days */
.shortpoint-countdown .shortpoint-countdown-section:first-child .shortpoint-countdown-amount {
  background-color: rgba(51,51,51, .2);
}

/* hours */
.shortpoint-countdown .shortpoint-countdown-section:nth-child(2) .shortpoint-countdown-amount {
  background-color: rgba(51,51,51, .16);
}

/* minutes */
.shortpoint-countdown .shortpoint-countdown-section:nth-child(3) .shortpoint-countdown-amount {
  background-color: rgba(51,51,51, .1);
}

/* seconds */
.shortpoint-countdown .shortpoint-countdown-section:nth-child(4) .shortpoint-countdown-amount {
  background-color: rgba(51,51,51, .08);
}

Click Update, and Save the page

And now we have a Countdown element, with our own element applied to it:

Please contact us in case you have any questions or suggestions.

For an advanced tutorial on Custom CSS please click here.

Also, you're welcome to check our other Custom CSS solutions.