Counter/Progress Bar Font Color Changes

[snbozek]

I need to change some of the font colors for the Counter and Progress Bar short codes. The background of my site is dark and the current titles (both progress bar and counter) and the numbers/suffix for the counters are black/dark grey. (screen shots attached)

I don’t see where to manage these within the Theme Options or Color Customizer. Not good with CSS to add additional styling elements on my own. I would like to make the font white (or be able to change the hex code, ideally).

Thanks!
Sabrina

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Add the code bellow to your custom css options.
Change the Hexadecimal code to your desired color.

.count-number{
color:#FFF!important;
}

-Rui

[snbozek]

Thanks, still have a couple questions.
1. Am I putting that at the bottom of the textbox window where it says “Extra class name”? (I’m guessing no bc that didnt work…)
So where do I put this exactly and how do I reference it in the “extra class name” box? — as I mentioned, I’m new to css

2. What would the change be for the progress bar?
3. What would the change be for the titles in a Contact Form (contact form 7)?

Please be as explicit with steps as possible, thanks!

[Mohammad – SUPPORT]

Hi,
1. Am I putting that at the bottom of the textbox window where it says “Extra class name”? (I’m guessing no bc that didnt work…)
So where do I put this exactly and how do I reference it in the “extra class name” box? — as I mentioned, I’m new to css.

Answer-: Please insert extra css class at textbox and define its rule through custom css options at admin -> theme options -> custom css/js -> custom css.
Example-: You inserted extra class named textFontbig because you want bi font for this element so you will define it’s rule at custom css like –
.textFontbig{font-size:18px !important;}
Hope you will understand.

2. What would the change be for the progress bar?
Answer-: I am not getting you.

3. What would the change be for the titles in a Contact Form (contact form 7)?
Answer-: I am not getting you.

Thanks 🙂
With Best Regards
Mohammad

[snbozek]

Thank you, Mohammad. I think I get your first set of instructions.

For 2&3: I want to also add special elements for the Progress Bar (shortcode option for percentages) and also a Contact Form (via Contact Form 7 plugin), if possible…is there a special name for these elements (for example, the counter one is called “.count-number”).

Thanks!

[Rui Guerreiro – SUPPORT]

It’s better to first add the contact 7 form and the Progress Bar to the pages you need.
It’s easier for us to check the site inspecting those assets.

-Rui

[snbozek]

Hi, yes the progress bar was already added and included in my original screenshots. The bar titles show up too dark to read.

Also, I still need to update the theme but I’m nervous about losing changes – if I add my CSS changes to the Theme Options/Custom CSS: That acts like a child theme? So no need to worry if thats the only thing I change?

Thanks!

[Mohammad – SUPPORT]

Hi,
Please use this custom css change:-
.progress-bar-wrap .bar-text > span.bar-name{color:#fff !important;}

If you have custom css at Theme Options/Custom CSS then dont worry about update theme and your changes will not lost.
Thanks 🙂
With Best Regards
Mohammad