Follow

Invert the Countdown Widget Colours

This snippet switches the colours for the background of the countdown widget and the background of the numbers. 

Before  After 
Screen_Shot_2017-07-04_at_2.01.13_PM.png Screen_Shot_2017-07-04_at_2.01.01_PM.png 

In order to customize the colors, you will need to fill in the hex codes for the colors (hex codes start with #, and can be seen below as #fff and #635fd9. A great resource for finding the hex code for the colors you want is http://www.colorpicker.com/.

Code:

/*Invert Countdown */
.widget-countdown-number {
   background: #fff;
}
.widget-countdown {
   background-color:#635fd9;
}
.widget-countdown-block span {
   margin-bottom: 5px;
   line-height: .4em;
   display: block;
   color: white;
   font-weight: bolder;
}

.widget-countdown-title {
   color:white;
}
.widget-countdown-number {
   color: #61596a;
}
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk