Invert the Countdown Widget Colours

Follow

  This article is for our new Experience Manager.

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

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.

Notes/Tips:

  • 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: http://www.colorpicker.com/

Code:

/*Invert Countdown */
.widget-countdown-number {
   background: #fff;
   border-radius: 100%;
}
.widget-countdown {
   background-color:#669366;
}
.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 {
   color:white;
}
.widget-countdown-number {
   position: relative;
   top: -60px;
   height: 44px;
   color: #61596a;
}
.widget-countdown-title>span {
   display:none;
}
.widget-countdown-block>span {
   margin-top:10px;
}
/* Change name of countdown widget */
.widget-countdown-title::after {
   content:'Name of countdown Widget';
}

0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.