Form taking on the styling of my theme.

Gravity Support Forums » Plugin Support » Gravity Forms

shorn
Member

Hi all,

Just looking for a quick nudge in right direction. I have added a form to my main site and one in the sidebar, however these forms have taken on none of the style/css of my main site theme.

Am I right in thinking I will need to add or change something within the css files to achieve this?
I used your documentation to remove the bullet points that were showing, and my theme has a handy custom.css file to add any such changes, which make it easier than editing the main css file.

Any point in the right direction will be greatly appreciated! Thanks!

Posted 12 years ago on Sunday June 26, 2011 | Permalink
Kevin Flahaut
Administrator

Gravity Forms are designed to inherit some of their styling from the theme - font styles, colors, etc. along with some styles for the form inputs themselves if they exist in your theme. Without seeing your form, It sounds like there aren't really any form styles in your theme right now, or else they're very specific to an existing form and your new forms don't inherit from those rules.

You can add your own new styles to your active theme's style.css file. Here's some documentation on how to properly target all of the form elements so you can manipulate them with CSS.

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

If you run into problems, please post a URL to your form page and I'll be happy to take a look and help out.

Posted 12 years ago on Sunday June 26, 2011 | Permalink
shorn
Member

Hi, thanks for the reply. Shortly after reading your reply, I kinda worked it out, so I'm feeling a bot more confident about going through my theme and applying the relative styling from my themes css file and applying to the different elements of each of my form.

I have a couple of further questions however, that I have been unable to work out.
I have added added some styling to standard text fields, and this has styled the element of the form which is a "name" field (first and last name), however when I change the width, it does not change in this field, and therefore the two side by side is a bit too wide for my theme.

Secondly, I have styled my Submit button, but is there a way to style a hover over? i.e a different colour when the cursor is over it?

Many thanks!

Posted 12 years ago on Monday June 27, 2011 | Permalink
Kevin Flahaut
Administrator

@shorn

Can you post a URL to your form page? It will be easier for me to help out if I can see the form itself, what styles are being inherited, not, etc.

Posted 12 years ago on Monday June 27, 2011 | Permalink
shorn
Member

Hi there,
sorry for the delay in responding, been away for a while.

The form is here...
http://lavishstudios.co.uk/?page_id=4

As you can see each element is styled to match the site, but the name fields are a little too wide. Im not sure how to change these. Also, I would like to add a hover over effect (background colour change) on the submit button if thats possible? (to match the "continue reading" button on the font page. Thanks.

Posted 12 years ago on Wednesday June 29, 2011 | Permalink
Kevin Flahaut
Administrator
Your styles add extra left/right padding which effectivly increases the default widths of the inputs and that's why they're overflowing the wrapper on the right. You can add this to your theme stylesheet to reduce the width of the last name input slightly so it fits properly. I also included a rule to change the button state on hover.. you can tweak that to suit your needs.
```
[css]
body .gform_wrapper .ginput_complex .ginput_right input,
body .gform_wrapper .field_name_last input {
    width: 90% !important;
}

body .gform_wrapper .gform_footer input#gform_submit_button_1.button:hover {
    background-color: #000;
}
```
screenshot: http://bit.ly/lyRzZ7
Posted 12 years ago on Thursday June 30, 2011 | Permalink
shorn
Member

Hi there! Thats brilliant! really appreciated! Two problems solved!

Posted 12 years ago on Friday July 1, 2011 | Permalink
Kevin Flahaut
Administrator

Great. I'm pleased I could help.

Posted 12 years ago on Friday July 1, 2011 | Permalink