I've been working on a form and I had no problem editing the original plugin CSS by adding rules to my child theme CSS. It was working fine until I tried to change some of the colors in #gforms_confirmation_message. When I add CSS rules for that ID, they are overridden by the original plugin CSS. Can someone point me in the right direction on this issue?
PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.
Plugin CSS is Overriding Child Theme CSS for Certain Items
-
Posted 12 years ago on Monday October 31, 2011 | Permalink
-
Did you modify the forms.css from the plugin? We don't recommend doing that. All custom CSS should go in a stylesheet in your theme or child theme.
You probably need to have more specific rules to override what you do not like. Can you post a link to your form and explain what you want to do?
Posted 12 years ago on Monday October 31, 2011 | Permalink -
Hi Chris,
I haven't touched forms.css from the plugin. All my changes have been made in styles.css in my child theme.
You can view the form here: https://loanapp.firstamerican.org
Sorry, it's going to be a pain to get past all the required fields to the final confirmation page. Make sure you enter a name like Testing Form so we know your not a real client. And just enter dummy info.
I want to be able to change the background and outline color of the shaded box on that page. And I need to move the box down a bit.
When I write new styles in styles.css, they are being overridden by the plugin styles. I can see both using Firebug.
Posted 12 years ago on Monday October 31, 2011 | Permalink -
Gotcha on where you are making your changes.
If you can see both in Firebug, and the style.css is not being used, then the plugin has a more specific rule. You need to get more specific with the styles in your style.css, or resort to using the !important declaration, which is the equivalent of the nuclear option. Sometimes, with some themes, that's all you can do.
I added this to the beginning of line 16 in your style.css:
[css] .entry-content #gforms_confirmation_message {and the forms.css styles were overriden. You need to add something more specific to style.css so that it overrides the forms.css. Or, add !important to each line, but getting more specific is better.
Good reference and explanation of specificity:
http://css-tricks.com/855-specifics-on-css-specificity/Posted 12 years ago on Monday October 31, 2011 | Permalink -
Ah, perfect. I should have thought of that! I'll give it a try.
Posted 12 years ago on Monday October 31, 2011 | Permalink -
Please let us know how that works for you. Just get more specific until it works :-)
Posted 12 years ago on Monday October 31, 2011 | Permalink
