Customizing countdown widget using CSS

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.

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

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

We will use those base classes to customize our countdown. 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 effect 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; }

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 change description font to Tangerine:

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

And one last touch, give it a red tint. You can do this using widget options also:

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

That’s all. Here is the full customization CSS:

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

I’ve put body in front of them to override previous declarations. You can also use widget id.
Here is the embed code for fonts used:

<link href='|Tangerine:regular' rel='stylesheet' type='text/css' />

It should go right before <link> tag of your theme css in header.php:

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

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

Note. You can also put a background image to your countdown widget. Just use the template below:

body.hasCountdown{ background:url('') 50% 50% no-repeat; }

This will center the image in the background.

Liked this post? Read more tutorials here:

[query] No posts found matching the arguments