Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • February 2, 2016 at 5:25 pm #576569
    hloft

    Hi,

    I’m looking to style this gravity form with the ‘light transparent’ theme that you guys provide on your forms.

    Please can you tell me how to go about this? I have included the link in the private content section.

    Many Thanks,
    Harry Loft

    • This topic was modified 8 years, 9 months ago by hloft.
    February 2, 2016 at 5:26 pm #576571
    hloft

    It also needs a bit of a tidy up as you can see. Can you tell me how to go about this also?

    February 2, 2016 at 5:29 pm #576576
    Yigit

    Hey!

    Please edit your element and make sure to add your shortcode in text tab and then let us know so we can look further into it :)

    Cheers!
    Yigit

    February 2, 2016 at 5:30 pm #576578
    hloft

    Hi Yigit, What do you mean?

    Code Portal

    February 2, 2016 at 5:36 pm #576583
    Yigit

    Hi!

    HTML Code tags are being added to your shortcode, that is because you probably added your shortcode in Text Block element in Visual Tab instead of Text Tab – http://i.imgur.com/1gE0ldX.png?1. Please edit your element and make sure to add your shortcode in text tab

    Best regards,
    Yigit

    February 2, 2016 at 5:43 pm #576588
    hloft

    Hi Yigit,

    All done, thank you, that makes sense.

    How can I make it the light transparent theme?

    Thanks
    Harry

    February 2, 2016 at 5:46 pm #576591
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .gfield_required {
    color: orange!important;
}
.gform_wrapper label {
    color: white;
}
#top .gform_wrapper input, #top .gform_wrapper select {
    background: transparent!important;
    border: 2px solid white!important;
    color: white;
}

    Cheers!
    Yigit

    February 2, 2016 at 5:59 pm #576600
    hloft

    Hi Yigit,

    Awesome, thank you!

    Can you make the text white (when user inputs text).

    Also, any idea why the ‘first name’ ‘last name’ and ‘submit’ seemed to be padded?

    Thanks,
    Harry

    February 2, 2016 at 6:05 pm #576604
    hloft

    Ive sorted the padding, just the white text that needs sorting!

    Thank you
    Harry

    February 2, 2016 at 6:09 pm #576608
    Yigit

    Hi!

    Please change the code to following one 

    .gfield_required {
    color: orange!important;
}
.gform_wrapper label {
    color: white;
}
#top .gform_wrapper input, #top .gform_wrapper select {
    background: transparent!important;
    border: 2px solid white!important;
    color: white !important;
}

    Regards,
    Yigit

    February 2, 2016 at 6:12 pm #576611
    hloft

    Hi Yigit,

    That is perfect! Thank you for all your help

    Many Thanks
    Harry Loft

    February 3, 2016 at 8:20 am #576947
    Rikard

    Hi,

    Great, glad we could help :-)

    Regards,
    Rikard

    April 13, 2017 at 8:52 pm #777519
    CPM_usa

    Hello, I used the code you provided to make the gravity form transparent. Brilliant! Thank you. However, for some reason randomly, one field is not taking. It is still gray within the inbox

    ***I figured it out!!!.

    • This reply was modified 7 years, 7 months ago by CPM_usa.
    April 14, 2017 at 7:10 pm #777983
    Victoria

    Hi CPM_usa,

    Glad you figured it out! :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    December 2, 2017 at 9:06 pm #884189
    Damien

    Hi there,

    I have a questions regarding the transparent fields. I added the CSS code Yigit provided and it worked just fine. Problem I have is that all of my form fields are now transparent. I just wanted to have on a signle page…it this possible? Thanks!

    .gfield_required {
    color: orange!important;
    }
    .gform_wrapper label {
    color: white;
    }
    #top .gform_wrapper input, #top .gform_wrapper select {
    background: transparent!important;
    border: 2px solid white!important;
    color: white !important;
    }

    Best regards,
    Damien

    December 3, 2017 at 12:30 pm #884315
    Rikard

    Hi,

    If you inspect the page you want the CSS on then you can find the page-id class in the body tag. Try replacing #top with that class in the CSS you pasted, or just place it ahead of the selectors, for instance:

    .page-id-101 .gfield_required {
color: orange!important;
}

    Best regards,
    Rikard

    December 3, 2017 at 4:57 pm #884362
    Damien

    Hi Rikard!

    I changed the page id nr as you describe. This below CSS still affects all of my pages and not just page I pecified. Where em I doing wrong?

    .page-id-635 .gfield_required {
    color: orange!important;
    }
    .gform_wrapper label {
    color: white;
    }
    #top .gform_wrapper input, #top .gform_wrapper select {
    background: transparent!important;
    border: 2px solid white!important;
    color: white !important;
    }

    Best regards,
    Damien

    December 3, 2017 at 5:20 pm #884366
    Mike

    Hi,
    You need to add your page id to each rule like this:

    
.page-id-635 .gfield_required {
color: orange!important;
}
.page-id-635 .gform_wrapper label {
color: white!important; 
}
.page-id-635 .gform_wrapper input, .page-id-635 .gform_wrapper select {
background: transparent!important;
border: 2px solid white!important;
color: white !important;
}

    Let us know if this helps.

    Best regards,
    Mike

    December 3, 2017 at 8:33 pm #884389
    Damien

    Hi there Mike!

    It worked perfectly Mike, thank you for your help!
    Best regards,
    Damien
    —————————
    Hi there,
    The above solution worked fine. I just did not realize that we have 2 webforms instead of 1 webform on this page until now. If you take a page and look at the bottom webform that is all transparent as we wanted to, but the other webform in the middle of the page is now all white and not readable. Is there anyway I could just specify a specific webform to be transparent? Thanks!

    Best regards,
    Damien Banks

    • This reply was modified 6 years, 11 months ago by Damien.
    December 3, 2017 at 8:39 pm #884391
    Mike

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

    Best regards,
    Mike

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Gravity Forms "Light transparent" styling’ is closed to new replies.