I don't suppose it's possible to use a theme from the jQuery ThemeRoller to add custom CSS to my form or at least to certain elements? I hate the default look of the datepicker and would like a smaller, more aesthetic calendar widget. There are some great ones in the ThemeRoller and I would love to incorporate one of these.
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.
Custom CSS using jQuery ThemeRoller
-
All of the datepicker styles are pulled into the plugin's forms.css file. You should have no problems overriding the look of those via your theme's stylesheet. Have you tried it out yet?
You can also choose not to export the forms.css file out, which is an option in the plugin settings. At that point you can target everything individually without having to overwrite styles.
Posted 12 years ago on Friday January 13, 2012 | Permalink -
The theme's stylesheet is loaded before the plugin's forms.css, so how could my theme settings possibly override those of Gravity Forms? Also, the datepicker pop-up calendar is not mentioned in any of the documentation which is the part I'm trying to re-style. There are so many issues here that are not addressed in any of the documentation.
- I have used #ui-datepicker-div but it made no difference. Exactly what element should I be targeting? It seems that Gravity Forms is using an outdated version of jQuery or has virtually rewritten it. I see tables being used in the GF pop-up calendar!
- If I finally manage to find the right target, will every line have to end with !important just to make it work?
- I'm pretty familiar with CSS, but Gravity Forms seems to be very reticent to anything more than minor tweaks to the form's UI without an act of God. Ok, that's hyperbole, but it does seem to be much more difficult than it should be to majorly re-style my form to match my site.
Sorry this sounds like a rant, but I really need to figure this stuff out. Thanks!
Posted 12 years ago on Saturday January 14, 2012 | Permalink -
Yes, if you want to override styles from another stylesheet, there is a high chance you will have to use !important declarations. Unless you can hook onto a more specific selector, such as using form ID's for example. At the begining of each form there are unique ID's, you should be able to use that potentially, ie #gform_wrapper_2 #ui-datepicker-div. Do you happen to use Firebug or Chrome Developer tools?
Again, you can choose to not output any of the GF styles in the plugin settings and then you won't have to worry about overriding anything. We've done and seen many complex customizations to Gravity Forms, so yes, an Act of God is def a hyperbole. If you'd like to post a link to your form and the styles you are trying to integrate, I'd be happy to take a look with you to offer some guidance.
Posted 12 years ago on Saturday January 14, 2012 | Permalink
