Two different counters with two different colors on the same page: how to do it?

brunocruz7 · February 2020

Hey guys! I need to change the color of the second row of counter numbers (as you can see on the print screen).

The first one uses my single-color option that I choosed on BeTheme (#0c3373) and I'm not able to customize the second one (should be #429bdb). How can I do it? Have tried lots of different options. Thanks and sorry about my poor english.

URL: http://articainvest.com.br/home-com-arcadia/

Pablo · February 2020

Hello,

If you are using the "Skin Color" for the theme (Theme Options > Colors > General), you will not be able to change these colors in the theme options.

You would have to change it to the "Custom Skin", then you will be able to change all of the colors of the theme in the theme options.

thanks

brunocruz7 · February 2020

Hi Pablo,

I chaged it but it doesn't make any difference because I can't put two different colors for the short facts and counters.... Like you can see in the print screen (in portuguese).

Maybe a custom css code I can insert into one of these two counter toggles?

Thanks.

Pablo · February 2020

If you would like to use another color for other counter, you have to provide the custom id/class for the section in Muffin Builder and create a custom css code which will overwrite the default settings.

http://prntscr.com/r8hihs

Do you need help with CSS code?

Thanks

brunocruz7 · February 2020

Yes! Sorry, I was able to build the whole site (www.articainvest.com.br) but I have to add another "brand" and everything of this second brand will be light blue (#429bdb) instead of the navy blue (#0c3373). I was able to change everything I need to these colors on the pages I'm making, except for this counter. Can you please help me to creat the style for this light blue color on the counter? Thanks a lot.

brunocruz7 · February 2020

The counters with the light blue color (#429bdb) are the ones on the bottom of this page:

http://articainvest.com.br/home-com-arcadia/

Not the first ones, only the bottom ones.

Pablo · February 2020

You applied the "body {color:#92a8d1}" in the class field, that's not correct.

Please do, what I showed you in the image on the previous reply, after that I'll be able to help you.

http://prntscr.com/r8ixz6

Thanks

brunocruz7 · February 2020

Pablo,

Ok, now I've done this change as you can see on the print. Whats the next step?

Thanks a lot.

Pablo · February 2020

Please paste that CSS code into the Theme Options > Custom CSS & JS > CSS

.differentColor span{
	color: red !important;
}

Thanks

brunocruz7 · February 2020

Thanks a lot, pablo!

Two different counters with two different colors on the same page: how to do it?

Comments