Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1058368

    Hi Enfold team,

    I’m working on customising the dark contact form and was able to adjust quite a bit thanks to your documentation.
    As of now everything I added is working except for some or the ‘button’ adjustments.
    1. I’m trying to get the border-width of the send button to be 3px – even though I added it it is not changing on my site, but it does work when hovering over the button.
    2. I’m trying to change the button font-color to be #cf3662
    3. I trying to change the button hover font-color to be white

    4. Additionally I would like to change the font-size and color of the text I added to a check-box label and for the Captcha Text – but couldn’t find anything that was working

    I’m posting what I have added to the Quick CSS styling area here. Please let me know if you need any further information. Thanks :)

    #top div .av-dark-form input[type=’text’] {
    border-color: #333333 !important;
    background-color: transparent;
    border-radius: 6px;
    font-family: ‘montserrat-regular’
    }

    #top .avia_ajax_form .text_area {
    border-color: #333333 !important;
    background-color: transparent;
    border-radius: 6px;
    font-family: ‘montserrat-regular’;
    }

    .av-custom-form-color .button {
    border-color: #cf3662 !important;
    border-width: 3px !important;
    font-color: #cf3662 !important;
    background-color: transparent !important;
    border-radius: 6px;
    font-family: ‘montserrat-regular’;
    font-size: 17px;
    }

    .av-custom-form-color .button:hover {
    border-color: #cf3662 !important;
    border-width: 3px !important;
    font-transform: #ffffff !important;
    background-color: #cf3662 !important;
    border-radius: 6px;
    font-family: ‘montserrat-regular’;
    font-size: 17px;
    }

    #top .avia_ajax_form .error input[type=’text’],
    #top .avia_ajax_form .error .text_area {
    background: #ffffff!important;
    }

    #1058837

    Hey Diana,

    Could you please give us a link to your website, we need more context to be able to help you.

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    #1058879

    Hello Victoria,

    thanks for your fast reply :)

    My site is still under construction…can I attach screenshots here?

    Thanks,
    Diana

    #1059443

    Hi,

    Sure, we will see if we can get somewhere with the screenshot.

    Best regards,
    Basilis

    #1059673

    Hi Again,
    sorry is there a way to upload screenshots here? Or is it easier if I give you access to my website?
    regards,
    Diana

    #1059734
    This reply has been marked as private.
    #1061834

    Hi,
    Sorry for the late reply, to change the font size of the labels, please use this css:

    #top.page-id-45 label[for=avia_5_1], #top.page-id-45 label[for=avia_6_1] {
      font-size: 16px !important; 
    }

    To change the border width of the submit button, and the font color, we will have to override a !important; that is in current use, but this should do it:

    #top.page-id-45 #av_section_1 .av-dark-form .button {
        border-width: 3px !important;
        color: #cf3662 !important; 
    }

    To change the background color of the submit button, and font, when hovering:

    #top.page-id-45 #av_section_1 .av-dark-form .button:hover {
        background-color: #cf3662 !important; 
        color: #ffffff !important;
    }

    Best regards,
    Mike

    #1061979

    Thanks so much Mike.

    Works perfectly :)

    Have a great day.
    Diana

    #1062000

    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Customising dark transparent contact form’ is closed to new replies.