Invert the Countdown Widget Colours


  This article is for our new Experience Manager.

If you are an EventMobi customer and using your account is using our Classic Content Manager. If this is the case, please visit

This code switches the colours for the background of the countdown widget and the background of the numbers. It also shifts the number labels to the bottom and makes the number background boxes round. The name of the countdown widget is also changed.


  • Make sure that you change the bolded text in the code to align with your app's branding.
  • This site is very helpful for finding hexcodes:


/*Invert Countdown */
.widget-countdown-number {
   background: #fff;
   border-radius: 100%;
.widget-countdown {
.widget-countdown-block span {
   margin-bottom: 5px;
   line-height: .4em;
   display: block;
   color: white;
   font-weight: bolder;
.widget-countdown-block {
   padding-top: 45px;
.widget-countdown-title {
.widget-countdown-number {
   position: relative;
   top: -60px;
   height: 44px;
   color: #61596a;
.widget-countdown-title>span {
.widget-countdown-block>span {
/* Change name of countdown widget */
.widget-countdown-title::after {
   content:'Name of countdown Widget';

0 out of 0 found this helpful



Article is closed for comments.