Custom CSS for Gravity Forms Not Working [RESOLVED]

Get Help
,
1

Hello all, new guy here. I’m trying to customize the colors of the progress bar in my form. I’m running Avada theme and there seems to be CSS all over the place. I’ve put the following into the Avada Custom CSS field and it seems to have no effect. You can see the form live on my site at the link below. I’m trying to change the colors of the bar from blue / black to green and red.

Can anyone tell me what I’m doing wrong? Many thanks!

Code in Avada Custom CSS:
.gform_wrapper .gf_progressbar {
padding: 50px !important;
position: relative;
background-color: rgba(100,0,0,0);
border-radius: 25px;
box-shadow: inset 0 0 1px 1px rgba(0,0,0,.05);
width: 100%;
}

Website and form link: https://www.modernservantleader.com/assessments/unilog-servant-leadership-assessment/

1 Like
2

For starters, you could change the progressbar color to red in the form settings. Or if you wanted to leave it, try using:

.gform_wrapper .percentbar_blue {background-color: red;}

Then for the horizontal stripes, change the colors in this part to red (but keep the transparencies!):

.gform_wrapper .gf_progressbar_percentage {
background: repeating-linear-gradient( -45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px),linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}

2 Likes
3

Thank you for your response, Mad Dog. I must be blind, because I cannot locate where to change the color in the form settings?

Second, I identified the problem was somehow that AVada’s custom CSS was not being reflected in the page because of the order. My guess is the default CSS for GF was later than the custom CSS embed by Avada.

So my solution was to embed the CSS in the PAGE. It’s not elegant and probably is like nails on a chalk board to developers, but it works.

4

The progress bar settings are in the PAGE section:

progressbar

I’m glad you found a way around it, though embedding the CSS makes me cringe. LOL I would think Avada’s Custom CSS would be last, though it’s been a few years since I worked with Avada so what do I know…

You can probably make it working adding !important to each line, such as:

.gform_wrapper .percentbar_blue {background-color: red !important;}

Alternately you might have to use more specific CSS to override it, for example something along the lines of:

body #gform_wrapper_40 #gform_40 .gform_wrapper .percentbar_blue {background-color: red;}

MD

5

Unreal. I cannot believe I never looked for settings there. Thank you for that.

I did try more specific targetting and the !important attribute - none of those worked but I’m sure I either missed something or butchered the CSS somewhere upstream. Regardless, I am grateful for the assist!

1 Like