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.

Styling Multiple Forms - Working for some styles not others?

Gravity Support Forums » Plugin Support » Gravity Forms

  1. awarner20
    Member

    Hi all,

    I've got 5 different forms on one install and I've been trying to style them independently. I've been searching the forums and it looks like I just need to specify the form ID in my css as I learned in this thread:
    http://forum.gravityhelp.com/topic/different-styles-for-different-pages#post-1643

    The examples given here worked like a charm on my form for changing the title, but for some reason I cannot get it to work on any other css within the form. I don't get it!

    So, assuming my form is ID 6, I've entered this to change the title to green:
    form#gform_6 .gform_heading h3.gform_title { color:green }

    Works great, so then I did the same with the description and tried changing the font color:
    form#gform_6 .gform_wrapper span.gform_description { color: red;font-weight:normal }

    ...but this has no effect. Why? Shouldn't it be working? In fact, a larger question I have is couldn't I just append form#gform_6 to every single style element in the css?

    Can anyone explain why the above doesn't work?

    Posted 14 years ago on Friday August 6, 2010 | Permalink

  2. Kevin Flahaut
    Administrator

    It's difficult to tell what's going on without being able to see your form. It could be that another rule is overriding yours somewhere. If you can post a URL to your form page, we'll be happy to look at it further.

    As far as adding the form ID to everything, If you did that, then it the rules wouldn't apply to any other forms, only the form ID you specified. I wouldn't recommend it.

    Are you making these changes in the forms.css file or adding styles to your theme stylesheet? We recommend that you do NOT make changes to the default forms stylesheet in the plugin folder as that will be overwritten when you run the automatic updates and you'll loose your custom css.

    You should add any new rules to your theme's style sheet. If you need to make extensive changes, it's best to copy the entire contents of the forms.css file and append that to your theme stylesheet. Then you can go into the forms settings and change the "output css" option to "no". From there, you can style your heart out and won't have to worry about updates overwriting your changes.

    Posted 14 years ago on Friday August 6, 2010 | Permalink

  3. awarner20
    Member

    Hi Kevin,

    I can't show the form publicly as it's for my employer's members only content (pricelists, etc). Is it possible to contact me through my registered GF email so I can share the link with you?

    To answer your questions:

    Yes, I've copied the entire form.css to my theme's stylesheet and am making my edits there.
    Yes, the "output css" option is set to "no".

    Thanks for any additional assistance you can provide.

    Adam

    Posted 14 years ago on Friday August 6, 2010 | Permalink

  4. Kevin Flahaut
    Administrator

    Adam,

    You can email me directly at kevin at rocketgenius.com and I'll check it out. Please include a link back to this thread for reference.

    Posted 14 years ago on Friday August 6, 2010 | Permalink

  5. Kevin Flahaut
    Administrator

    Adam, here's what I found. You put your custom rules before the default rules in the CSS and the default rules were overriding the new ones.

    You need to put any custom rules below the default forms CSS in the stylesheet so it renders the last rules read.

    http://pastie.org/1081799

    Posted 14 years ago on Monday August 9, 2010 | Permalink

  6. GJudy
    Member

    I have an issue going on with this suggestion for the form specific code. I want it to work so bad, but I can't get it. Trying this line from the pastie above. /*-- Form ID 1 specific styles ---------------------------------------------*/

    Using StudioPress Education child theme and Premise landing page.
    The sandbox website is http://sensiblestrategy.com and the pages are http://sensiblestrategy.com/landing/nonsense/ (premise landing page) and
    http://sensiblestrategy.com/stealth-nonsense/

    The code is in a custom css.

    if it works, the one at nonsense would have a coral background (form ID 1) and the one at stealth-nonsense would be blue background. (form ID 4)

    I have an extra { in the custom css to make them coral; if i remove that they are blue. I wanted them to be one coral and one blue.

    I hope it is okay to bump this topic as opposed to starting a new one. Thank you.

    Posted 12 years ago on Sunday August 19, 2012 | Permalink

  7. Chris Hajer
    Key Master

    In the future, it's probably best to start your own topic so we can address your issue individually.

    Can you explain what you want to be coral and what you want to be blue exactly? Background for the complete page, or the form, or the inputs?

    If adding a bracket changes your CSS like that, it's either invalid before you added it, or after, and the fact that the color changes is a side-effect of that error.

    Posted 12 years ago on Monday August 20, 2012 | Permalink

  8. Chris Hajer
    Key Master

    Continued here.

    Posted 12 years ago on Monday August 20, 2012 | Permalink

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