Number "Count Up" Plugin

I couldnt see anything like that when I looked at the site you gave as an example. Can you describe your proposed usage of this element? If it isnt counting visitors or other stats, what does it indicate or represent?

This is the correct URL: https://themes.moretech.it/zeta/about-us-standard/

near the bottom, in the bright blue – the numbers that count up. Its really simple but I haven’t seen a plugin like this. Just Jellyfish but I don’t the odometer style.

Jellyfish counter widget seems to be the only plugin in the www.remarpro.com theme directory that provides this functionality. It looks like it would be possible to override the default css with some new rules to make it display like the example you gave rather than the odometer style.

If you install the plugin to your site and post a link to a page on your site where it is displayed, I will take a look at what tweaks might be required.

Here is the page: https://rewards.kazooky.com/social-rewards/content-engagement/

Thanks for the help!

It looks like there are some plugin settings to adjust the font, the number of digits, and hide the animated 10ths digit. Can you configure those settings to appropriate values for your site please?

Ok – I think it is all set now.

It looks like you need to put some css into the widget itself to style it as it uses inline styles

so put something like this into the digit style field:

background: transparent; color: #900;font-family: Arial, monospace; font-weight: 900;

Unfortunately the way the CSS is added in the plugin isn’t very good for customizing so overriding the odometer-style shading is not as simple as I expected and required an edit to js/odometer.js
change

var style = {
        digits:        "position:absolute; height:"+this.digitHeight+"px; width:"+(this.digitWidth-(2*this.digitPadding))+"px; "+
                       "padding:"+this.digitPadding+"px; font-size:"+(this.digitHeight-(2*this.digitPadding))+"px; "+
                        "line-height:"+this.digitHeight+"px; "+
                       "background:black; color:white; text-align:center; "+this.fontStyle,
        columns:       "position:relative; float:left; overflow:hidden;"+
                       "height:"+this.digitHeight+"px; width:"+this.digitWidth+"px;",
        highlight:     "position:absolute; background:white; opacity:0.25; filter:alpha(opacity=25); width:100%; left:0px;",
        lowlight:      "position:absolute; background:black; opacity:0.25; filter:alpha(opacity=25); width:100%; left:0px;",
        sidehighlight: "position:absolute; background:white; opacity:0.50; filter:alpha(opacity=50); height:100%; top:0px;",
        sidelowlight:  "position:absolute; background:black; opacity:0.50; filter:alpha(opacity=50); height:100%; top:0px;"
    };

to

var style = {
        digits:        "position:absolute; height:"+this.digitHeight+"px; width:"+(this.digitWidth-(2*this.digitPadding))+"px; "+
                       "padding:"+this.digitPadding+"px; font-size:"+(this.digitHeight-(2*this.digitPadding))+"px; "+
                        "line-height:"+this.digitHeight+"px; "+
                       "background:black; color:white; text-align:center; "+this.fontStyle,
        columns:       "position:relative; float:left; overflow:hidden;"+
                       "height:"+this.digitHeight+"px; width:"+this.digitWidth+"px;"
    };

The numbers are still scrolling, but the appearance is changed. I think that’s probably as close as you can get with this plugin.

An alternative would be to make or commission a new plugin, perhaps based on this script or a similar one if the license allows it: https://jsfiddle.net/YWn9t/