Facebook Pixel Countdown Snippets | Western Kentucky University Skip to main content

Countdowns


The Countdown snippet allows you to create a graphic timer that counts down to a defined date. This snippet allows you to set font size, font style, and has multiple style as well as display options you can combine. Use this snippet to draw attention to an upcoming event or deadline.

 

Available Settings

STYLE
Changes the overall style or color of the countdown timer. (Options: STYLE-1(Red) default, STYLE-2(Gray), or STYLE-3(White))

DISPLAY
Controls the display mode of the timer. (Options: ROW default, GRID, or DAY)

FONT-STYLE
Changes the style of the numbers between normal and a serif font from in the hero area. (Options: NORMAL default, or SERIF).

FONT-SIZE
Controls the size of the countdown numbers. Remember to adjust your font size to suit the location and display of your countdown timer. (Options: SM, MD default, LG, or XL).

 

Snippet Columns

Event Title Optional
An optional title included above the countdown timer. You may also leave this blank and insert a title on your page in any style.

Event Date Required
Enter the date of your event to countdown to. The format must match MM/DD/YYYY HH:MM AM with leading zeros or the snippet will not countdown correctly. (Ex - 03/04/2018 01:08 PM). You can also use the Datetime Picker below to generate the correctly formatted date, then paste into your snippet.

Copy this value into your snippet




Style 1 - Red

Row Style

This example uses the row style, serif style, and LG font size.

Row Example

Days,
Hours,
Minutes,
Seconds
Loading...
Countdown Snippet
STYLE STYLE-1
DISPLAY ROW
FONT-STYLE SERIF
FONT-SIZE LG
Event Date Event Title
11/11/2018 12:00 PM Row Example

 

Grid Style

This example uses the grid style and MD text.

Grid Example

Days,
Hours,
Minutes,
Seconds
Loading...
Countdown Snippet
STYLE STYLE-1
DISPLAY GRID
FONT-STYLE NORMAL
FONT-SIZE MD
Event Date Event Title
11/11/2018 12:00 PM Grid Example

Day Style

This example uses the day style and XL text.

Day Example

Days
Loading...
Countdown Snippet
STYLE STYLE-1
DISPLAY DAY
FONT-STYLE SERIF
FONT-SIZE XL
Event Date Event Title
11/11/2018 12:00 PM Day Example

 




Style 2 - Gray

Row Style

This example uses the row style and XL font size.

Row Example

Days,
Hours,
Minutes,
Seconds
Loading...
Countdown Snippet
STYLE STYLE-2
DISPLAY ROW
FONT-STYLE NORMAL
FONT-SIZE LG
Event Date Event Title
11/11/2018 12:00 PM Row Example

 

Grid Style

This example uses the grid style, serif style, and SM text.

Grid Example

Days,
Hours,
Minutes,
Seconds
Loading...
Countdown Snippet
STYLE STYLE-2
DISPLAY GRID
FONT-STYLE SERIF
FONT-SIZE SM
Event Date Event Title
11/11/2018 12:00 PM Grid Example

Day Style

This example uses the day style and XL text.

Day Example

Days
Loading...
Countdown Snippet
STYLE STYLE-2
DISPLAY DAY
FONT-STYLE NORMAL
FONT-SIZE LG
Event Date Event Title
11/11/2018 12:00 PM Day Example



Style 3 - White

Row Style

This example uses the row style and XL font size.

Row Example

Days,
Hours,
Minutes,
Seconds
Loading...
Countdown Snippet
STYLE STYLE-3
DISPLAY ROW
FONT-STYLE NORMAL
FONT-SIZE XL
Event Date Event Title
11/11/2018 12:00 PM Row Example

 

Grid Style

This example uses the grid style and MD text.

Grid Example

Days,
Hours,
Minutes,
Seconds
Loading...
Countdown Snippet
STYLE STYLE-3
DISPLAY GRID
FONT-STYLE SERIF
FONT-SIZE MD
Event Date Event Title
11/11/2018 12:00 PM Grid Example

Day Style

This example uses the day style, serif style, and LG text.

Day Example

Days
Loading...
Countdown Snippet
STYLE STYLE-3
DISPLAY DAY
FONT-STYLE SERIF
FONT-SIZE LG
Event Date Event Title
11/11/2018 12:00 PM Day Example

Some of the links on this page may require additional software to view.

 Last Modified 3/21/18