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.

CSS Styling

  1. Hi,

    I would like to style the Gravity Forms which we are using in Woocommerce.

    How can we do it? Here is an example http://www.forthree.com/basketball/single-layer-shirt-weiss-basketballtrikot/

    The following has to be changed - see http://imgur.com/owV2kzU:

    1. heading: smaller
    2. description: smaller
    3. text + checkbox in one line
    4. checkbox + price in one line
    5.dropdown not 100% width

    Also the Error message won't be displayed in another colour.
    Also the hidden product field ("Individualisiertes Produkt" above 3.) appears even though is marked "hidden".

    Somehow the wordpress theme Replete css confuses the Gravity Forms css - see http://imgur.com/eFfzDxW.

    Thanks in advance for your help.
    Best regards,
    Max

    Posted 6 years ago on Tuesday May 28, 2013 | Permalink
  2. Richard Vav
    Administrator

    Hi Max,

    Your theme isn't confusing the Gravity Forms CSS, it looks like the Gravity Forms CSS files are not being included in your page. Can you go to the Gravity Forms general settings page and try setting 'Output CSS' to 'Yes' then check your page again and see what difference that makes.

    It should solve the problem of the labels and the inputs being on separate lines and it should hide the hidden field.

    Regards,
    Richard

    Posted 6 years ago on Tuesday May 28, 2013 | Permalink
  3. hi Richard,

    great news. It works. How can I define which width the first line has?

    "Möchten Sie den Artikel individualisieren?" I do not want to have a break here.

    Regards,
    Max

    Posted 6 years ago on Tuesday May 28, 2013 | Permalink
  4. Richard Vav
    Administrator

    Max,

    That's great, now to increase the width of the label try adding the following to your theme's custom.css file or wherever you are instructed to place custom CSS.

    .gform_wrapper .left_label .gfield_label {
    width: 45%;
    }

    Regards,
    Richard

    Posted 6 years ago on Tuesday May 28, 2013 | Permalink
  5. good try. but when adjusting the other input fields are growing too big...

    also the description text won't be adjusted.

    Posted 6 years ago on Tuesday May 28, 2013 | Permalink
  6. Richard Vav
    Administrator

    Sorry,

    Try this instead, it will target just that one field label

    #field_2_12 .gfield_label {
    width: 45%;
    }
    Posted 6 years ago on Tuesday May 28, 2013 | Permalink
  7. good. problem solved.

    Posted 6 years ago on Tuesday May 28, 2013 | Permalink
  8. Richard Vav
    Administrator

    Good to hear.

    Regards,
    Richard

    Posted 6 years ago on Tuesday May 28, 2013 | Permalink

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