Invert the Countdown Widget Colours

Caitlan Davidson

April 05, 2018 18:03

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

Before	After

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;
}

Invert the Countdown Widget Colours

Comments

Articles in this section