Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 24, 2015 at 8:44 pm #464307
    djshortkut

    I would like to make my contact form transparent like it is on your one page portfolio demo. I would imagine this is a feature in the theme but I can’t seem to find a way to do this. I selected light transparent but it didn’t help. Can you please let me know how to achieve this? Thank you!

    June 26, 2015 at 4:26 am #464753
    Rikard

    Hey djshortkut!

    Please try the following in Quick CSS under Enfold–>General Styling:

    .page-id-6920 #avia_email_1 {
background-color: transparent !important;
}

    Best regards,
    Rikard

    June 26, 2015 at 4:31 am #464756
    djshortkut

    Thanks Rikard but that didn’t work.

    June 26, 2015 at 2:58 pm #465002
    Yigit

    Hey!

    You have following code in your custom CSS code

    #top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area {
  border: none!important;
  background-color: #f5f5f5!important;
}

    Please change it to following 

    #top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area {
  border: none!important;
  background-color: #f5f5f5;
}

    Regards,
    Yigit

    June 27, 2015 at 1:43 am #465150
    djshortkut

    Thanks Yigit. Unfortunately changing this code doesn’t work. It screws up my other contact forms and removes the box completely from the contact form. Is there any way I can modify only this contact form so that the email box and sign up box are in the light transparent style with a 3 px white border like your demo?

    June 29, 2015 at 2:23 pm #465860
    Ismael

    Hey!

    Please try this instead:

    #top div .av-light-form input[type='text'] {
  border: 3px solid #fff !important;
  background-color: rgba(255,255,255,.5) !important;
}

    Regards,
    Ismael

    June 29, 2015 at 4:06 pm #465910
    djshortkut

    Thank you Ismael, getting closer! How can I target the “sign up” button for this contact form in the same way? I only want to modify this specific button and not have it change the rest of the contact form buttons so that it has a 3px white border and white text with a transparent background. On hover I still want it to act like the other buttons so when the button is hovered the background color is #018db0 and the text is white. I added a custom class of transparent-contact-form if that helps target this button. Thanks!

    June 30, 2015 at 11:04 am #466296
    Ismael

    Hey!

    You can use this for the sign up button:

    .transparent-contact-form input[value="SIGN UP"] {
  border: 3px solid #fff !important;
  color: #fff !important;
}

    Cheers!
    Ismael

    June 30, 2015 at 4:44 pm #466562
    djshortkut

    Thanks Ismael, so close! The button looks great. Upon hover the button works correctly except I want the 3px white border for the button to be #018db0 on hover as well. Everything else looks great. Thanks!

    June 30, 2015 at 6:09 pm #466594
    djshortkut

    Never mind, I figured it out. You can close this thread.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Transparent Contact Form’ is closed to new replies.