Color in Counter's shortcode doesn't work

olimana · December 2018

Hi,

I need different colored counters on one page. And there is such an attribute in the shortcode, but for some reason it does not work.

Tell me please how to fix it.

Wordpress

5.0.1

Betheme

20.9.8.2

Bryan · December 2018

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

olimana · December 2018

Thanks for the helpful advices. But I have attached screenshots, I don’t know why you couldn’t open them, perhaps your submission form is not working properly. And if I could reset the link and disable the maintenance mode, I would definitely do it.

So let's continue, I will send you screenshots in another way and some code snippets. I haven't styled the counters in any other way.

I take this shortcode from your website [counter icon="icon-lamp" color="" image="" number="44" prefix="" label="%" title="" type="vertical" animate=""]

Put it in column https://cdn.pbrd.co/images/HTm9ZuP.jpg

And here is the result https://pasteboard.co/HTmfLos.jpg

#444 color is not used in the Betheme settings in any of the color items. In custom css - also. In this page css there is no #444 color.

But look at the code https://pasteboard.co/HTmhv1E.jpg

So what could be the reason? And how can I control the colors in the shortcode counter?

Bryan · December 2018

Thank you for the screenshots but we would require a link to the website. Could you please send it? This is most likey caused by some errors in the HTML code. We have to inspect the code and see which color is set.

thanks

olimana · December 2018

Guys, if I could turn off developer mode and give you a link, I would do it and not cause you any problems.

BUT I CAN'T DO THIS, because I am a developer and not the owner of this website that advertises it in Google.

Have you tested your websites? Do you have a shortcode color? I can send a link to all the necessary files that you want to check.

But I checked how color works in shortcode on my other site https://caviar.net.ua.

The result is the same https://pasteboard.co/HTwq2n1.jpg

So, let's go from the reverse. Please give me your link to the resource, where the color in this shotcode works.

Pablo · December 2018

I tested this shortcode on my testing page and it works fine:

https://i.imgur.com/Y6hg9r6.png

https://i.imgur.com/XX0EzEk.png

As Bryan said, it could be the HTML issue on your website.

You have to send us a link to your website if you want to solve that problem.

Also, I do not see the 'counter' item on the website you sent.

Thanks

olimana · December 2018

We, it turns out, are talking about different colors. Now I see that the color in shortcode applies to the icon. But in my case, I do not use the icon, and I need to understand how to influence the color of the numbers in the counter?

Pablo · December 2018

This color comes from theme files, so it can be changed only with CSS.

Please paste this code to the Theme Options > Custom CSS & JS > CSS

.counter .number-wrapper span{
	color:red !important;
}

Thanks

olimana · December 2018

Thanks, in my case I need to have two different colors for numbers.

So, I made additional css classes for two different counters

<div class="count-blue" >[counter number="480" type="vertical" animate=""]</div>

<div class="count-rose" >[counter number="400" type="vertical" animate=""]</div>

And I add styles into page css

.count-blue .counter .desc_wrapper .number-wrapper {color: #00b5bf;}

.count-rose .counter .desc_wrapper .number-wrapper {color: #f27caa;}

Maybe it will be useful for somebody.

Pablo · December 2018

Is there anything else I can help you with?

Thanks

olimana · December 2018

No, close this question

Color in Counter's shortcode doesn't work

5.0.1

20.9.8.2

Comments

This website uses cookies