The event countdown shortcode allows you to display a countdown tool that you can use for events such as an opening, marriage etc. This shortcode basically counts down from a given date and time to the current time.
In this article, we will explain how to display the event countdown shortcode, find the UTC time zone of your country and configure the style.
To see the event countdown shortcode in action, check out the demo page.
Displaying an Event Countdown Shortcode
To add the event countdown shortcode:
Available Event Countdown Settings
There are a few settings in the event countdown pop-up screen regarding the countdown details.
| Setting | Description |
|---|---|
| Title | Sets the countdown title. |
| Upcoming Event Date | Sets the countdown due time. The entered date must be in month/day/year hour:minute:second format. The result will be displayed in Days – Hours – Minutes – Seconds format. |
| UTC Timezone | Sets the countdown time zone. Read the “Finding the UTC time zone of your country” section to find your time zone. |
| Extra Class Name | Adds a classname to the shortcode for Custom CSS. |
Finding the UTC Time Zone of Your Country
UTC is the time standard commonly used across the world. Every country has its own timezone, so it is important to choose this correctly to show your users the right time.
To find your UTC time zone:
Configuring the Style
The event countdown shortcode does not have any styling options. This countdown shortcode style is set to dark colors by default but some users may need to make the event countdown text and border colors lighter to use the shortcode on a dark background.
To make the event countdown text and border colors lighter:
/* Sets the countdown title */
.make-countdown-light .mk-event-countdown .mk-event-title {
color: #fff!important;
}
/* Sets the countdown border color */
.make-countdown-light .mk-event-countdown-ul li {
border-color: #fff!important;
}
/* Sets the countdown time stamp color */
.make-countdown-light .mk-event-countdown-ul li .timestamp {
color: #fff!important;
}
/* Sets the countdown time reference */
.make-countdown-light .mk-event-countdown-ul li .timeRef {
color: #fff!important;
}
