Style Overrides Just Won't Work- tried the targeting already

Gravity Support Forums » Plugin Support » Gravity Forms

esdavis
Member

I've spent hours on this trying to get override styles for my first gravity forms form. Nothing seems to work. I tried changing my stylesheet according to the targeting. I tried adding the whole stylsheet to mine and modifying and overriding. Nothing is working. I've Yes/No'd the settings for including CSS and HTML 5. I'm seriously frustrated.

Here's the page in question. Site isn't live so you have to go directly to the URL:
http://www.localmarketingexpertvancouver.com/contact

Here's the styles I've tried modifying (very bottom of my stylesheet). As you can see, I went crazy with very exact declarations, as the less-detailed ones didn't work either.

Here's the link to my stylesheet - it's long, and the Gravity Forms overrides are all the way at the bottom.
http://www.localmarketingexpertvancouver.com/wp-content/themes/esimarketer/style.css

There is some definite similarity to the 2010 theme as I studied it quite heavily in making mine. That's why I added the extra declarations, as it was mentioned in the GF docs and stylesheet.

Help! I bought GF because everyone says it was wonderful, and it seemed very powerful. The docs made it seem very simple to add styles if you know anything about CSS, and I'm seriously frustrated about this. I do know at least a fair bit about CSS. I'm not a total noob.

Posted 13 years ago on Sunday April 3, 2011 | Permalink
esdavis
Member

Update:
I also tried using inline styles in the actual code in one of the HTML box fields since I could enter complete actual code. That style displayed. Then I removed the inline styles in the code and changed that field's class to an ID. I styled first the actual ID selector in the HTML box I added. Didn't work. Then I added the LI's ID code to the styles with again no luck.

There's got to be something blocking here ...?

Posted 13 years ago on Sunday April 3, 2011 | Permalink
danielpettifer
Member

Have you tried using firebug to see which css rules are being used on your form elements, it appears some elements have been styled and not others (eMail and website entries appear different to everything else) - I wouldn't use html for styling, try to keep everything in the css

Posted 13 years ago on Sunday April 3, 2011 | Permalink
esdavis
Member

Totally agree on inline CSS. I was using a free contact form plugin before but it planted all the CSS in the HTML. Main that was ugly. Inline is messy. I just wanted to see if the "ultimate override" would work.

Thanks for pointing out email and website. Their borders are different. I'll check Firebug next.

Posted 13 years ago on Sunday April 3, 2011 | Permalink
esdavis
Member

OK. I trundled my way through Firebug Very few interactions between my styles and GF. In most cases, 4-6 things were styled by GF in their standard CSS that overrode my stylesheet. To be expected. I really didn't come up with anything I could see in my pre-GF CSS that was interfering with GF.

But, I did notice that not one of the new modification declarations that I wrote for GF showed up in Firebug as an applied style. Zip. So now I guess I have to figure out if it is my CSS code screwed up (not sure it is that), is there something blocking application of the CSS I wrote, or what?

I don't think it is a matter of my stylesheet hitting first and then those special styles being overridden by GF, because I'd think they'd show up in Firebug as being lined out.

Oh, and in consideration of testing, the only plugins enabled are Akismet, Yoast Breadcrumbs, and GF. I disabled the other contact form (FS contact form).

Any help would be appreciated.

Posted 13 years ago on Sunday April 3, 2011 | Permalink
danielpettifer
Member
I had a quick look through your stylesheet and I could only find references to text/input areas, try using this code at the BOTTOM of your style sheet, or at the BOTTOM of the forms.css. This code covers all of the text/input areas including eMail-urls etc. If this code works then you can edit it to your liking. Try it at the BOTTOM of your style.css first, then the forms.css after. Make sure it is at the bottom so that it is the last rule to be read by the browser, this will ensure the rule is used.
```
/* form elements -----------------------------------------*/

input,
textarea,
select {font-size:14px}
textarea {overflow:auto}
input[type=text],
input[type=email],
input[type=password],
input[type=url],
input[type=tel],
select,
textarea {background-color:#f9f9f9; color:#252525; border:1px solid #ccc; padding:6px 2px; font-size:14px!important; box-shadow:inset 0px 0px 5px #ccc; -moz-box-shadow:inset 0px 0px 5px #ccc; -webkit-box-shadow:inset 0px 0px 5px #ccc; word-spacing: 0.4pt; letter-spacing:0.2pt;}
```
Posted 13 years ago on Sunday April 3, 2011 | Permalink
Kevin Flahaut
Administrator

You can try adding the rules to your theme stylesheet but I advise against editing the forms.css file directly. The default form styles get overwritten when the plugin updates so any changes you make there will be overwritten as well. It's always advisable to keep custom CSS rules in your theme stylesheet.

Posted 13 years ago on Monday April 4, 2011 | Permalink
esdavis
Member

Thanks to you both. I agree with Kevin about not using the plugin stylesheet, so I buckled down and finally figured it out. Something totally stupid on my part.

Using a LOT of testing, I finally realized the the CSS performed fine if I moved it higher in the CSS code. Lo and behold, I'd accidentally deleted the closing bracket for the print media stylesheet elements, making everything below it lumped in with the print version, not the screen version.

Dumb, and I had the answer staring me in the face the whole time, as I mentioned even here that it seemed like the browser wasn't even "seeing" the CSS.

Looks like we're resolved. Thanks. And now I REALLY love this plugin.

Posted 13 years ago on Monday April 4, 2011 | Permalink

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

Style Overrides Just Won't Work- tried the targeting already - no luck