Commas in Counter

Hi lahiru,

You can try to use custom css code to add that mark, for example try to use code below

.evc-counter .evc-c-digit {
    position: relative;
    letter-spacing: .12em;
}

.evc-counter .evc-c-digit:after {
    content: ',';
    position: absolute;
    top: 0;
    left: 0.5em;
}

Best regards,
Nenad

• This reply was modified 5 years, 4 months ago by Nenad Obradovic.

Thanks Nenad. This would only work if the number is less than 9,999. Is there a way to add the 1000 separator for a large number as well? E.g. 348,944,812

Hi lahiru,
Try to replace code I sent you with this one

.evc-counter .evc-c-digit {
    position: relative;
    letter-spacing: .15em;
}

.evc-counter .evc-c-digit:before {
    content: ',';
    position: absolute;
    top: 0;
    left: 0.5em;
}

.evc-counter .evc-c-digit:after {
    content: ',';
    position: absolute;
    top: 0;
    right: 2em;
}

Best regards,
Nenad

Thanks Nenad. This still doesn’t work for large numbers. It adds the comma like 3,48944,812 instead of 348,944,812

Hi lahiru,

Just modify left: 0.5em; and right: 2em; values inside code I sent you, to move that marks on the right places. Also you can add Custom CSS class for each shortcode item (you have option for that inside shortcode options), after that just set different left and right positions for it, example shortcode for that case will be

.evc-counter.my-custom-class .evc-c-digit:before {
    content: ',';
    position: absolute;
    top: 0;
    left: 0.5em;
}

Best regards,
Nenad

• This reply was modified 5 years, 4 months ago by Nenad Obradovic.