Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 7, 2017 at 11:36 am #805028
    silvercorn

    Hi,

    I’d like to change the colour and weight of the contact form. I’m stuck for the right css codes. Any suggestions?

    Thank you and best regards,
    Christian

    June 8, 2017 at 9:52 am #805496
    Nikko

    Hey silvercorn,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    
#top .avia_ajax_form .text_input {
    border: 2px solid #000 !important;
}

    Just change the color and thickness of the border as you see fit. Hope this helps :)

    Best regards,
    Nikko

    June 8, 2017 at 12:41 pm #805548
    silvercorn

    iI Nikko,

    That changed the color but nothing else.

    I added this code:
    #top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area {
    border: 1px solid #4d4d4d !important;
    }

    which changed the color of the name, email and message field – but not the send field. The border was reduced only on the message field. I’m out of practice when it comes to css so I’m hoping you can help me out here ;-)

    June 8, 2017 at 5:02 pm #805666
    Sarah

    Hi,

    Please you try adding this as well:

    #top .av-custom-form-color .button {
	border: 1px solid #4d4d4d !important;
}

    Best regards,
    Sarah

    June 8, 2017 at 6:24 pm #805698
    silvercorn

    Hi Sarah, thank you, that sorted out the button border. But I still need the class for the other fields, preferably with the ability to tailor the size of the fields and font formatting.

    Thank you.

    June 9, 2017 at 10:14 am #805965
    Sarah

    Hi Christian,

    Can you let us know how exactly you would like the form to look like so we can accurately help you? If you have a mockup of how you would like the form to be, that would be helpful.

    Best regards,
    Sarah

    June 9, 2017 at 4:49 pm #806141
    silvercorn

    It’s not specific, it’s more about having the option to change it. The only thing I really want is to find the class that controls:

    – name and email field border.

    Thank you

    June 9, 2017 at 5:35 pm #806157
    Sarah

    Hi,

    You can try using the placeholder attribute or the name attribute like this:

    input[placeholder='Name*'] { 
	border: 1px solid #4d4d4d !important;
}

input[placeholder='E-mail*'] { 
	border: 1px solid #4d4d4d !important;
}

    If you want to use the name attribute, you can use the following selectors instead: input[name='avia1_1'] for the name field, and input[name='avia2_1'] for the E-mail field. But please remember that this only works in the order that your form is in now. If rearrange the form elements, these names may change.

    I hope that helps!

    Best regards,
    Sarah

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.