• 0
Sign in to follow this  
Followers 0

Issues with style....

Question

Posted · Report post

I recently posted this over on the Gravity Forms site, but I think it needs to be posted here as well: Hey guys... I am having a heck of a lot of trouble with a form that includes an "address" group of fields. I am no CSS expert so I am using stylebot for google chrome to modify the look of the form fields, and then I dump the generated CSS into the code area of my WP theme (PlatformPro). Look at the "state" field though. It's got a green background! I cannot figure it out. http://www.customseedpacks.com/order/ The only difference i see is that this field takes on a format of: #input_2_4.4 while others are #input_2_4_5 (underscore vs a period). I am at a total loss and going nuts over this. Any help would be GREATLY appreciated! Thanks!

Share this post


Link to post
Share on other sites

14 answers to this question

  • 0

Posted · Report post

This was their response over @ Gravity Forms:

The background color is coming from a rule on line 88 of the dynamic.css file. http://www.customseedpacks.com/wp-content/uploads/pagelines/dynamic.css?ver=135-06141151959 Here's the rule.. it applys a green background color to all of these elements.. including a blanket application to all inputs, textareas, etc... pretty sloppy CSS. The best thing to do is to edit this file and remove the input & textarea references or you'll probably encounter this again somewhere else. It appears that you've overriden that blanket style with some other rules for the rest of your form. It's best to just nix it at the source than try to override it with more CSS unless you absolutely have to.
It appears as though you guys both love to sling mud at each other, but this time it seems as though Pagelines is to blame for the sloppy CSS. I am having a heck of a time with the theme because of issues like this and it's getting VERY frustrating!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Chris, That line is actually coming from a line that's generated by the user. (I'm assuming that's you, unless you have someone else working on the site too.) Anything below the line

/* Custom CSS */

is generated by Settings->Custom Code->Custom CSS. So, you'll have to go into that area to make the modifications. Hope that helps!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hmm this is all I have in the custom CSS. Certainly no green text input areas? ` body{} .entry_content img { max-width: 100%; } #branding .content-pad { padding: 20px 0px 15px; } #sidebar-wrap {margin-top: 26px;} span.gform_description { font-family: Palatino, "Palatino Linotype", serif; } div.gform_body { font-family: "Lucida Grande", Verdana, sans-serif; font-size: 15px; font-weight: bold; font-style: normal; } input.medium { background-color: #FFFFFF; } textarea.textarea.medium { background-color: #FFFFFF; } input.button.gform_button { height: 60px; width: 100px; margin-left: 28px; border-color: #49ad54; } span.date.time.published { color: #2c9e43; } span.post-comments a { color: #2c9e43; } span.fn a { color: #2c9e43; } span.date.time.published { color: #2c9e43; } span.post-comments a { color: #2c9e43; } span.fn a { color: #2c9e43; } #input_2_4_1 { background-color: #FFFFFF; } #input_2_4_2 { background-color: #FFFFFF; } #input_2_4_3 { background-color: #FFFFFF; } #input_2_4_5 { background-color: #FFFFFF; } #input_2_4.4 { background-color: #FFFFFF !important; } `

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can see all of my attempts at the bottom of the CSS to mask the green fields and make them white. It just wont work on the ONE field. :(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It would work if you changed the last rule there to ` #input_2_4_4 input { background-color: #FFFFFF !important; } `

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Actually, Adam - that does not do it. I thought it would too. Plus stylebot tells me that one element is named differently than all the others, thus the period instead of underscore on that one field.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You could try:

.ginput_container input {background-color: white !important}

to target all the input fields in that container.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks, Jimmy! That worked. I was beginning to think I bought into yet ANOTHER junky theme that was pushed on me by affiliate marketers. Maybe I can make this thing work - although the occasional update would be nice. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Still battling with conflicting CSS using this theme. It doesnt seem to play well with anything. :(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What issues are you having?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Just overall CSS formatting. We've gone round and round about this before. Change one color in the CP and 15 things change. Background colors are tied to form field colors and all sorts of nonsense. :( I have been trying to make gravity forms look good on several platform pro sites for weeks. I am terrible with CSS, and often times I have to target every single field just to change things like color, background color, input font size, etc. Making a gravity form look good (or even like it belongs on the site) in platform pro seems nearly impossible. Gravity suggests that Pagelines CSS is a complete mess and that I should go into dynamic.css and remove a bunch of stuff if I ever want things to look right. Their exact words were that pagelines has some "pretty sloppy css" Very, very frustrating - especially for someone who knows very little about css. :(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The goal of the dynamic CSS is for rapid development of color schemes for people that are not going to code ANYTHING. Of course this is problematic for development and the removal/improvement of the css is slated for future releases. In general, however, you just need to take the outermost div of your gravity forms container and use that in your selector instead of each individual input id. .gform_wrapper input{}...something like that...but obviously making sure it overrides necessary specificty and hierarchy of the dynamic css file

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks cmunns - the .gform_wrapper worked. A little tweaking with padding & margins on another part & we got it fixed up.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If this matter is resolved, may I close this issue for you?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0