Example 1

The default number counter shows days, hours, minutes and seconds. There are no options to display years. The number counter is always centrally placed in the column or row.

 

Day
Hour
Minute
Second

Example 2

Change the number and text size and colour and add a separator between them.

Day
Hour
Minute
Second

Example 3

Add a background colour to each section and adjust the weight of the numbers and text.

Day
Hour
Minute
Second

Example 4

Here's a countdown for Christmas 2016 with a circular indicator showing the orange time counters descending. The fonts and circle sizes can be set and coloured and the circle stroke size can be adjusted too.

 

Day
Hour
Minute
Second

Example 5

You can reverse the circle countdown by swapping the active colours. Here, we have reversed the colours and changed the width of the circle stroke.

Day
Hour
Minute
Second

Example 6

If you don't like moving circular countdowns but like the stroke border outlines, then colour both the circle foreground and background colours to match.

Day
Hour
Minute
Second

Example 7

Staying with the Christmas theme, style the backgrounds of your numbers and manipulate the border radius settings for a similar look and feel without the countdown outlines.

Day
Hour
Minute
Second

Example 8

To remove unwanted numbers with CSS, start by adding a class name for your countdown in the Advanced settings. (e.g my-class)

Then use the following CSS example, changing my-class to the class name you used:

 

.my-class .fl-countdown-seconds, .my-class .fl-countdown-minutes {
    display: none;
}

Christmas in Beaver Time

Day
Hour
Minute
Second
[beaver_tunnels] [/beaver_tunnels]
  1. Susan on December 15, 2016 at 3:12 pm

    I love the appearance of your countdown timer, but would like to edit the default by omitting the minutes and seconds. How would I do that?

    • Michael Davis on December 15, 2016 at 9:42 pm

      Hi Susan,

      There’s no settings to do what you asked, but I created a new example above, #8, so show you a way to do this using CSS.

Leave a Comment