Countdown Widget‘s latest version is working on jquery. So it is not a flash movie anymore. You can customize its appearance easily using CSS. In this simple tutorial, I will show you how to create a new year theme for countdown widget.

Countdown Widget HTML Structure

Unless you change the default layout, the countdown widget has the following HTML block structure:

<div class="hasCountdown">
<div class="countdown_row">
 <div class="countdown_section">
  <div class="countdown_amount">
    --Number here--
  </div>
  --Unit here--
 </div>
</div>
<div class="countdown_row countdown_descr">
 -- Description here--
</div>
</div>

We will use those CSS classes to customize our countdown widget.

See Also

Adding Border and Padding to Countdown Widget

Let’s start with a red rounded border around it:

.hasCountdown{ border:2px solid red; border-radius: 10px; }

You may also add some padding to it but this will affect the width value of the widget. So you will need to decrease the width 2 times the padding.

.hasCountdown{ border:2px solid red; border-radius: 10px; padding:10px; }

Changing Fonts on Numbers and Description

Let’s change number font using google fonts. To learn how to embed custom fonts on your site read my tutorial here. Orbitron font seemed good for me.

.countdown_amount{  font-family: 'Orbitron', serif; }

And, we can change the description font to Tangerine:

.countdown_descr{ font-family: 'Tangerine', serif; }

Change Countdown Widget Background Color

And one last touch, let’s give it a slight red background color. Please note, if you are using the widget, you can do this using widget options also:

body.hasCountdown{ border:2px solid red; border-radius: 10px; background:#fde; }

Complete Customization CSS Code

Here is the full customization CSS for our new Countdown Widget:

body.hasCountdown{ border:2px solid red; border-radius: 10px; background:#fde; padding:10px; }
body.countdown_amount{  font-family: 'Orbitron', serif; }
body.countdown_descr{ font-family: 'Tangerine', serif; }

Please note that I have put the body tag in front of the CSS rules to override any previous declarations. You can also use widget id for this purpose. And, here is the embed code for fonts used:

<link href='http://fonts.googleapis.com/css?family=Orbitron|Tangerine:regular' rel='stylesheet' type='text/css' />

This font embed code should go right before the <link> tag of your theme CSS in header.php:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url') ?>" />

Adding Custom CSS Code To Your Site

Note. After WordPress 4.0 and on, WordPress added custom CSS field to Theme Customizer. You can add any custom CSS codes into that field, which will be easier than editing your theme CSS files.

You can just copy and paste this code at the end of your theme style CSS and you will get something similar to this:

If you want to put a background image on your countdown widget, just use the template below:

body.hasCountdown{ background:url('http://path.to/image.file') 50% 50% no-repeat; }