Invert the Countdown Widget Colours

Follow

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.