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


/*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; }
0 out of 0 found this helpful



Article is closed for comments.