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