More counter styles

Another Jellyfish counter style example based on a WordPress forum question. There are a few ways to do something like this. This is a quick and dirty approach, dirty because it relies on !important, which generally should be avoided if possible, but it’s just a quick example…

Here’s what we are creating:

 

The counter itself is a shortcode counter, it’s created with an id of boxtest so we can target it directly in the CSS styles with #jellyfish-counter-shortcode-boxtest This just means that these styles will only effect this single counter, not every counter on the site.

The Counter shortcode:

		

Then we’ll just use a couple of CSS rules added to our theme style sheet to handle all the styling, including the digit colours. There is nothing too fancy here, it should all be fairly self explanatory.

The CSS:

#jellyfish-counter-shortcode-boxtest .jcw-digit-container {
  height: 60px !important;
  width: 60px !important;
  background: #aaa;
  border: #aaa 10px solid;
  border-radius: 5px;
  margin-right: 10px;
  padding: 0 5px;
}

#jellyfish-counter-shortcode-boxtest .jcw-digit, 
#jellyfish-counter-shortcode-boxtest .jcw-tenth {
  background: transparent !important;
  color: black !important;
}

Got a question? Add your own comment

Raul

Hi Rob,
Awesome plugin. How can I get the counter to stop once it gets to the end number?
Thanks

Reply
Rob

It should just stop if there is an end value. If you have an example URL where a counter isn’t stopping I can take a look to see if I spot anything.

Reply

Leave a Reply to Bo Nielsen Cancel reply

Your email address is required will not be published.