Color in Counter's shortcode doesn't work

olimana

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

olimana

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

olimana

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

olimana

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

olimana

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

Is there anything else I can help you with?

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

olimana

No, close this question