Adding borders to a Jellyfish Counter

The Jellyfish Counter for WordPress has a whole heap of options to configure the look and feel of the counter digits, but what if you want to finish it off with a frame or fancy border? Time to dive into some CSS, but don’t be afraid it’s easier than you think!

To do any advanced styling on a counter you’ll need to create some custom CSS rules in your theme stylesheet. Don’t worry if you aren’t happy about editing the stylesheet directly there are plenty of great plugins available from the WordPress plugin repository that make it easy to add little CSS snippets to your site without ever touching your theme or stylesheets.

Identifying your counter

First things first, what do we want to style? Unless you want apply the same style to every counter on your site you’ll need to uniquely identify the counter you want by it’s element id. Widget counters all have their own unique id by default which you can find by inspecting the page source, but if you are using a shortcode to generate the counter you’ll need to provide an id string in the shortcode, like this:

The above example allows the counter generated to be referenced using #jellyfish-counter-shortcode-example1 and now we know this id we can play around with the counter using CSS and JavaScript (more about that in a later post!).

A very basic example

Let’s start with something very simple (as quite a few people have asked me how to do this): How to add a border around the whole counter.

If you examine the HTML source of a page with a counter you’ll find the structure something like this:

<div class="jellyfish-counter jcw-center" id="jellyfish-counter-shortcode-example1" data-interval="1" data-timestamp="" data-direction="up" data-end-value="1000" data-start-value="0" data-wait-time="20" data-flat="" data-bustedness="2" data-alignment="center" data-digit-style="" data-digit-padding="0" data-digit-width="30" data-digit-height="40" data-tenths="1" data-format="" data-digits="6">
  <div class="jcw-odometer-div">
    <div class="jcw-digit-container" style="height: 40px; width: 30px;">
    ... many more digit container divs ...
    </div>
  </div>
</div>

You’ll see the main counter container div with the id #jellyfish-counter-shortcode-example1 Depending on what you want to do with styling you may well want to create a CSS rule for this, however for the purpose of this border example we’ll be using the next div inside the main container that has a class .jcw-odometer-div, this div wraps the collection of digits so it’s perfect for applying a border style around the counter.

Anyway, enough words, here is the CSS that adds a very unsubtle blue border around the counter below:

#jellyfish-counter-shortcode-example1 .jcw-odometer-div {
  border: solid 6px #0000aa;
}

Right, so that’s deliberately ugly, let’s make something a little nicer.

This time let’s add some rounded corners to the border demonstrate how they clip off the corners of the underlying digits, and why not add a bit of shadow too…

#jellyfish-counter-shortcode-example2 {
  padding-bottom: 15px;
}

#jellyfish-counter-shortcode-example2 .jcw-odometer-div {
  border: solid 4px #464646;
  border-radius: 12px;
  box-shadow: 4px 8px 8px rgba(0,0,0,0.4);
}

You’ll notice that I also added some padding to the bottom of #jellyfish-counter-shortcode-example2, that’s just to give some space for the shadow to be drawn, otherwise it would be hidden because the counter div would only be as high as the digits.

Fun with images

So the last example was very simple and possibly not all that interesting, now lets do an alternative border effect using an image.

This time I applied styles to the main container div, giving it a background image and suitable size and padding to position the counter in the correct position. Size of the digits is handled by shortcode parameters. For reference, this is the CSS producing the effect above:

#jellyfish-counter-shortcode-example3 {
  background-image: url( url_of_background-image );
  background-position: 50% 50%;
  background-repeat: no-repeat;
  padding-top: 85px;
  height: 260px;
}

And here’s the shortcode that created the counter:

As you can see it’s really quite simple to add CSS styling to a counter, these examples have been fairly basic but should give you an idea of which elements and classes to target with your own CSS rules.

Next time I’ll show you how to interact with counters using JavaScript, stay tuned!