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.

Load custom stylesheet

  1. stvwlf
    Member

    Hi - I've assigned the same custom CSS class to 4 forms in Form Settings. The class correctly appears as a class on the HTML form tag.

    I have custom CSS I want applied to that class. Normally this would get added to a theme's stylesheet. However this is a multisite installation and many themes will be active at the same time. I don't want to have to maintain this on every individual theme. In essence I want to load additional CSS every time Gravity's forms.css stylesheet gets loaded on the front end.

    Suggestions on the best way to accomplish that?
    thank you

    Posted 12 years ago on Wednesday May 11, 2011 | Permalink
  2. There isn't currently a way to do this automatically when Gravity Forms forms.css gets loaded. Gravity Forms uses the WordPress enqueue function to enqueue the scripts. There isn't any action you can use to add your CSS only if Gravity Forms forms.css is also being added.

    Your only options are going to be:

    - Edit the forms.css file itself and add your custom CSS. We don't generally advocate this because when you update (and we always recommend users update when an update is available) you will have to re-apply your customization because it will be overwritten.

    - Add the custom CSS to each theme's stylesheet on your multi-site install.

    - Write a custom plugin that all it does is output a custom stylesheet using the wp_head hook to output it in the header. Network activate this custom plugin.

    Your other options is to enqueue a custom stylesheet from the theme itself, but that still requires editing the theme so it would be just as easy to add the CSS to themes stylesheet itself in that situation.

    Posted 12 years ago on Thursday May 12, 2011 | Permalink
  3. stvwlf
    Member

    Hi Carl

    thanks for this.

    I've noticed Gravity's script and stylesheet are only loaded on pages that display a Gravity form. What does your code look at to determine when to load these?

    Posted 12 years ago on Friday May 13, 2011 | Permalink
  4. When the Gravity Forms shortcode is executed in a post/page it enqueues the necessary scripts and CSS as part of the form display using the WordPress enqueue function call. So it's part of the execution when a form is displayed.

    Posted 12 years ago on Friday May 13, 2011 | Permalink
  5. stvwlf
    Member

    In form_display.php is enqueue_form_scripts()
    At the bottom of that function is
    do_action("gform_enqueue_scripts_{$form["id"]}", $form, $ajax);

    Although the hook is named enqueue_scripts it looks like I could use it to also conditionally enqueue_style in my hook code. Does that seem correct?

    thank you

    Posted 12 years ago on Friday May 13, 2011 | Permalink
  6. Hi stvwlf, I'm interested in doing this exact modification as well. Did you get a conditional statement to work in your theme? I have been trying this for a few days now and can't come up with anything that works.

    Posted 12 years ago on Friday April 27, 2012 | Permalink
  7. stvwlf
    Member

    @corradomatt - Hi - My ticket was from a year ago and I didn't remember how I resolved this. I didn't find anything specific. If you mean a similar issue with WordPress Multisite and mutiple themes, if I was doing this today, if the amount of CSS required is small, I'd either load it on every page load, or more efficiently, look into the hook I mentioned above.
    The gist is the Gravity Forms shortcode entered in a post/page to load the form runs the hook in its initialization. The one I asked about above won't work because its tied to a specific Gravity Form ID#. When run on Multisite not every site will have the same ID # for the same form. So it would be better running on the gform_enqueue_scripts hook. Within the callback function, use something like the name of the form to determine whether to load the CSS. As long as all sites are using the same name for the same form that should work correctly. Hope this is helpful. The code can either be added to a network activated plugin (so its active on all sites) or dropped into the mu-plugins folder.

    Posted 12 years ago on Sunday April 29, 2012 | Permalink