Listing Category: Countdown Timer

Hide A Value When It Reaches Zero

The countdown timer module will, by default, make a value semi-transparent when it reaches zero (ie. there are less than 24 hours left so days = 0).

This may not be what you want to happen. I have been in situations were I don’t want to deemphasize a value when it reaches zero. I want to emphasize it so that visitors feel a sense of urgency…..

Put a Shadow Effect on each of the Timer Values

A shadow effect is a great way to add depth to your design and with the countdown timer you also want to make your values stand out….

Adjust the Vertical Alignment of the Timer Value Separators

A weird quirk in the timer module is that if you increase the font-size of the numbers, the separators will eventually not line up correctly….

Add Space Between the title and timer values

If you enlarge the timer values enough, the spacing between the title and values will overlap. Therefore, you will want to add some extra padding…..

Add A Background To The Countdown Timer Values

An effect that I thinks adds a lot of value to the countdown timer module is adding a background color to the values rather than the entire countdown timer module….

Hide The Separators On The Countdown Timer Module

To get rid of the value separators I add this CSS to my site….

Hide The Days Value From The Countdown Timer

To remove the days value add the following CSS….