Countdown
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.
Example 2
Change the number and text size and colour and add a separator between them.
Example 3
Add a background colour to each section and adjust the weight of the numbers and text.
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.
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.
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.
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.
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;
}
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?
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.