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