Hi,
I'm currently working with Gravity Forms using Headway Themes. I'm finding the various CSS options a bit confusing and I was wondering is there any way to just merge the Gravity Forms styling with the default styling of my Headway Theme? If not what is the best approach to take in styling a form?
I'm still a beginner to all this so any help would be greatly appreciated.
Thanks,
Kirsty
Kirsty, here is a link that houses most of our design documentation:
http://www.gravityhelp.com/documentation/page/Design_and_Layout
You should always place new CSS into your theme's stylesheet. If you want to share a link and your intentions we can help you out here.
Hi Kristy and Rob,
I have the same question. The form I'm trying to style (while also using Headway) is http://www.familyservice.us/donate
I would especially like to increase the font size of the field descriptions and increase the spacing between sections.
If its not possible to merge the Gravity Forms styling with the default styling of the Headway theme, then I think the question is... what exactly is the proper CSS code to tell Headway to acknowledge CSS edits.
Headway requires, for example, that all custom CSS edits begin with body.custom
Thanks for any help you can give.
-- Katie @Family Service
Katie, then to target the li's you would do something like:
[css]
body.custom .gform_wrapper ul li.gfield {
margin: 15px 0;
}For the descriptions:
[css]
body.custom .gform_wrapper .gfield_description {
font-size: 20px;
}Obviously change the values and add styles as needed there.
Hello Katie,
I have installed the Gravity Forms plug in on my website. I am creating a new contact form. In order for me to change the colours/design of the form, do I go to "Advanced" and include new CSS code in "CSS Class Name" field?
Thank you,
Erin
Hey Erin, you will want to do all of your custom styling in your theme's stylesheet. You should be able to hook onto plenty of elements as-is. However, you can add custom classes as you're describing to then target in your style sheet. Got a link to your form? I can help you get to where you'd like to be if you need some guidance. :)
Hey Rob,
Thank you for replying back. I use Coffee Cup to make changes to my website. Am I able to change the look of my gravity forms by editing my Gravity Plug In? Or is there a line of code which I need to add to my main CSS style sheet?
Are you able to view the form from this link?
http://www.erinsecolist.com/?gf_page=preview&id=1
Any advice on how I can tweak this would be greatly appreciated. :)
Thank you,
Erin
Hey Erin, no problem. Actually I'd need a login to view that particular link since it's a preview. Can you either place the form on a publicly accessible page or if you need to keep it private you can feel free to email me a login to rob@rocketgenius.com
We won't be editing the plugin because doing that would mean each time we release an update to the plugin your changes would get wiped out.
Hey Rob,
That makes sense not to edit the plug in. Do I use short code to include that form on my contact page so that you can view it? If so, what line of code would I need to include in my contact page for you to be able to view it?
Thank you,
Erin
Yes, you can use the short code builder to place the form and then just send a link to it so we can check it out if you need assistance/guidance. You will want to edit styles at the theme level.
Hey Rob,
I have found the Gravity Form code in my CSS Style sheet.
Here is what I can see:
[css]
.gform_wrapper input, .gform_wrapper textarea, .gform_wrapper select {
background: #ffffff !important;
color: #003300!important;
font-family: Georgia, Arial, Tahoma, Verdana !important;
font-size: 12px !important;
padding: 4px 0 4px 5px !important;
border: 1px solid #DDDDDD;
}
.gform_footer input.button {
color: #FFFFFF !important;
}
.gform_wrapper .ginput_complex label {
font-size: 12px !important;
}
.gform_wrapper li, .gform_wrapper form li {
margin: 0 0 10px 0 !important;
}
.gform_wrapper .gform_footer {
border: none !important;
}Is there a video tutorial on where I can customize my forms to change the colors in CSS? I am not sure where I should be adding extra code within the section above.
Thank you,
Erin
Erin, the first declaration above will style the look of the form boxes. The color that is shown there will be what the user types into the box (input/textarea).
The label (text that shows with the form box) is another piece you could change the color of, for example you could place this into your theme's stylesheet to change the label color:
[css]
.gform_wrapper .top_label .gfield_label {
color: #003300;
}There isn't a video tutorial on this, but there is a good amount of documentation, which is on the link up above:
http://www.gravityhelp.com/documentation/page/Design_and_Layout