jayd
Member
I'm a newbie to css and I need some help with the css of my form...
I need make the "submit" button bigger and also center it (how would I do that?)
I have a multi page form set up and at the top where it tells you "step 1 of 3" it's really small and I would like to make that bigger, also can you change the % sign on the progress bar a different color? what code would I be looking for to change that?
See this documentation on targeting and applying styles to different elements of the form. The link below goes directly to information on how to target elements in the Footer of the form, including the submit button.
http://www.gravityhelp.com/documentation/css-targeting-samples/#formfooter
You would have to apply custom CSS to your themes stylesheet that targets the submit button and applies the CSS styles you would want used for the submit button.
As far as changing the progress bar, yes it can be done with CSS also. Examples are in the CSS targeting document referenced above. Specifically this section of the page:
http://www.gravityhelp.com/documentation/css-targeting-samples/#multipage
You will need to know CSS to apply the correct styles, we can't write the custom CSS for you. You will need to read up on the basics of CSS which is pretty simple once you start learning it.
Any custom CSS changes you want to make should be added in your themes stylesheet at the bottom of your themes stylesheet. Never change the Gravity Forms plugin files directly as your changes will be overwritten when you apply an upgrade and we always recommend users run the latest version of the plugin and upgrade when available.
jayd
Member
I was able to change most of it, but when I try to change the size of the text from the "Multi-Page Form Step" using this code it isn't doing anything...any suggestions?
The form I'm using is using the progress bar but above the progress bar where it tells you what step your on I need to make that text size bigger..
body .gform_wrapper .gf_page_steps .gf_step_active {font-size:16px}
body .gform_wrapper .gf_page_steps {font-size: 16px; border:1px solid red}
The "Step X of X" text? This is a different element. You can target this with CSS by targeting the gf_progressbar_title class.
So:
.gf_progressbar_title {font-size: 16px;}
jayd
Member
Yes, "step x of x" text but that didn't seem to work for me
you can see here..
http://www.50realestateagents.com/survey
Thanks for all your help btw.
It appears to be working to me...
The problem is you are applying styles to that class multiple times using different selectors.
On line 1559 of your Style.css file you have this:
.gform_wrapper .gf_progressbar_wrapper h3.gf_progressbar_title {font-size:13px; line-height:1em!important; margin:0 0 6px 0!important; padding:0!important; clear:both; filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6}
On line 1570 of your Style.css file you have this:
.gform_wrapper .gf_progressbar_title {font-size: 16px;}
The problem is because of how you are defining it online 1559 at a font-size of 13px it is overriding your definition on line 1570.
You've already defined it on line 1559 so just change font-size: 13px; to what you want it to be. When I view it in Chrome it has a font size of 13px which is what your stylesheet is telling it to do.
The CSS you have setting it at 16px isn't being applied because it's being overridden because of how you have declared it previously.
Remove the second instance of it and just change the first to the correct font size.
