Headway and Gravity CSS « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

kirstyshark
Member

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

Posted 13 years ago on Wednesday December 7, 2011 | Permalink
Rob Harrell
Member

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.

Posted 13 years ago on Wednesday December 7, 2011 | Permalink
Family Service
Member

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

Posted 13 years ago on Friday December 9, 2011 | Permalink
Rob Harrell
Member
Katie, then to target the li's you would do something like:
[css] body.custom .gform_wrapper ul li.gfield { margin: 15px 0; }
Copy
For the descriptions:
[css] body.custom .gform_wrapper .gfield_description { font-size: 20px; }
Copy
Obviously change the values and add styles as needed there.
Posted 13 years ago on Friday December 9, 2011 | Permalink
Erin
Member

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

Posted 13 years ago on Saturday December 10, 2011 | Permalink
Erin
Member

Sorry, I meant to ask Rob Harrell this question.

Posted 13 years ago on Saturday December 10, 2011 | Permalink
Rob Harrell
Member

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. :)

Posted 13 years ago on Saturday December 10, 2011 | Permalink
Erin
Member

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

Posted 13 years ago on Saturday December 10, 2011 | Permalink
Rob Harrell
Member

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.

Posted 13 years ago on Saturday December 10, 2011 | Permalink
Erin
Member

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

Posted 13 years ago on Saturday December 10, 2011 | Permalink
Rob Harrell
Member

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.

Posted 13 years ago on Saturday December 10, 2011 | Permalink

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

Posted 13 years ago on Sunday December 11, 2011 | Permalink

Rob Harrell
Member
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; }
Copy
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
Posted 13 years ago on Sunday December 11, 2011 | Permalink

This topic has been resolved and has been closed to new replies.