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

Gravity Support Forums » Plugin Support » Gravity Forms

  1. 43basketball
    Member

    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 11 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 11 years ago on Tuesday May 28, 2013 | Permalink

  3. 43basketball
    Member

    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 11 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 11 years ago on Tuesday May 28, 2013 | Permalink

  5. 43basketball
    Member

    good try. but when adjusting the other input fields are growing too big...

    also the description text won't be adjusted.

    Posted 11 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 11 years ago on Tuesday May 28, 2013 | Permalink

  7. 43basketball
    Member

    good. problem solved.

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

  8. Richard Vav
    Administrator

    Good to hear.

    Regards,
    Richard

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

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