Tagged: , , ,

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • June 28, 2018 at 3:14 pm #978909
    raymondleever

    Hi, could you please help me.

    I want to change the styling of my gravity forms but I don’t know where to find the code to edit the colors. The form can be found here https://www.zwembadbranche.nl/dag/aanmelding-zwembadbranche-dag/

    I want the backgroundcolor of the form fields to be #ffffff and I want a small grey border around the form fields, just like this form. https://www.vakbeurssportaccommodaties.nl/nl/bezoeker/registreer

    Is it also possible to edit the color of the radio field buttons to our main color #2997ab

    Thanks in advance for your help!
    Best regards
    Raymond

    June 28, 2018 at 6:52 pm #979007
    Jordan Shannon

    Hey raymondleever,
    If you know how to use the browser inspector, you can see the exact classes and styles that you will need to achieve the exact styles you want.

    Best regards,
    Jordan Shannon

    June 28, 2018 at 6:55 pm #979008
    Jordan Shannon

    Hi,

    Also, to the second half of your question, a radio button is a native element specific to each OS/browser. There is no way to change its color/style, unless you want to implement custom images or use a custom Javascript library which includes images

    Best regards,
    Jordan Shannon

    June 28, 2018 at 9:21 pm #979073
    raymondleever

    Hi Jordan, if I could find it I wouldn’t ask…
    So I tried to find the code but I failed.
    I am very sorry, but could you please help me a bit more…

    June 28, 2018 at 9:41 pm #979082
    Jordan Shannon

    Hi,

    Add this to quick css:

    #gform_fields_66 input{
background:#fff!important;
border:1px solid #c9c9c9!important;
}

    Best regards,
    Jordan Shannon

    June 28, 2018 at 9:48 pm #979088
    raymondleever

    Hi Jordan, you are the best!
    Now this only changes the form id #66. But is it also possible to change this for all of my Gravity Forms?

    June 28, 2018 at 9:53 pm #979093
    Jordan Shannon

    Hi,

    Adjust the code to this:

    .gform_page_fields input{
background:#fff!important;
border:1px solid #c9c9c9!important;
}

    Best regards,
    Jordan Shannon

    June 28, 2018 at 10:01 pm #979100
    raymondleever

    Hi Jordan, Thanks for your prompt reply!
    I looks this time your magic is not working… I have copied the code but now nothing changes. I have also tried different browsers and have cleared my cache

    June 28, 2018 at 10:09 pm #979105
    Jordan Shannon

    Hi,

    Are you adding my code to the very top of quick css so that it runs first?

    You can also go very general with this:

    input{
background:#fff!important;
border:1px solid #c9c9c9!important;
}

    Best regards,
    Jordan Shannon

    June 28, 2018 at 10:16 pm #979115
    raymondleever

    Yep I have inserted the code at the very top, but nothing changes.
    Also the general code does not seem to work

    July 1, 2018 at 4:31 pm #979852
    Mike

    Hi,
    Perhaps it was a cache issue, because when I look at your form it has a white background & gray boarder, Please see screenshot in Private Content area.
    Is this correct now?

    Best regards,
    Mike

    July 1, 2018 at 7:48 pm #979888
    raymondleever

    Hi Mike,

    It seems to work now.
    But now the “submit” and other buttons are also white with a thin border. Just like the square of the search field part of the site also disappeared due to this adjustment…

    July 1, 2018 at 8:00 pm #979892
    Mike

    Hi,
    Please try replacing the css with this css:

    .gform_page_fields input[type='text']{
background:#fff!important;
border:1px solid #c9c9c9!important;
}

    Then please clear your browser cache and check.

    Best regards,
    Mike

    July 1, 2018 at 9:03 pm #979902
    raymondleever

    Hi Mike,
    Thanks for your help, it seem to work, but only on this page https://www.zwembadbranche.nl/dag/aanmelding-zwembadbranche-dag/
    Other pages such as

    Vacatures

    Contact

    Abonnement

    Don’t seem to work. Also the dropdown fields in the form are still gray. Maybe you have an other work-around to solve this?

    July 1, 2018 at 10:40 pm #979910
    Mike

    Hi,
    Please try:

    .gform_page_fields input[type='text'],.gfield_select,.ginput_container input[type='text'],.ginput_container textarea {
background:#fff!important;
border:1px solid #c9c9c9!important;
}

    Best regards,
    Mike

    July 2, 2018 at 9:23 am #980017
    raymondleever

    Hi Mike,
    We are almost there! Now for 99% I am happy with this styling! Many thanks for your help!
    Now the only small thing missing is the arrow in a dropdown field is gone…

    July 2, 2018 at 1:32 pm #980080
    Mike

    Hi,
    Please try this instead:

    .gform_page_fields input[type='text'],.ginput_container input[type='text'],.ginput_container textarea {
background:#fff!important;
border:1px solid #c9c9c9!important;
}
 #top .gform_wrapper select {
background-color: #fff !important; 
border:1px solid #c9c9c9!important;
}

    Best regards,
    Mike

    July 2, 2018 at 2:20 pm #980090
    raymondleever

    Thanks a million Mike!

    July 2, 2018 at 2:46 pm #980101
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘styling gravity forms’ is closed to new replies.