Round Counters

Quick CSS style test for Jellyfish Counter Widget

Using border-radius to make individual digit backgrounds rounded

The CSS:

#jellyfish-counter-shortcode-small-circles .jcw-digit-container {
    height: 60px !important;
    width: 60px !important;
    background: #DE4BC3;
    border: #DE4BC3 10px solid;
    border-radius: 50%;
    margin-right: 10px;
    padding: 5px;
}

#jellyfish-counter-shortcode-small-circles .jcw-digit {
    background: transparent !important;
    color: white !important;
}

 

Using border-radius on the digit wrapper div to wrap the entire counter in a circle

The CSS:

#jellyfish-counter-shortcode-big-circle .jcw-odometer-div {
    padding: 35px 10px;
    background: #DE4BC3;
    border-radius: 50%;
}

#jellyfish-counter-shortcode-big-circle .jcw-digit {
    background: transparent !important;
    color: white !important;
    font-family: Arial, sans-serif;
}