Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 16, 2019 at 5:12 pm #1101525
    Louise_Brace

    Hi There

    I have added a CSS to General Settings so that my contact forms have a special colour scheme throughout the website. However, on the actual contact us page, I need that colour scheme to be different. I have read through lots of posts but none that tell me what css to put in a single contact form in Avia to change that form only.

    Please can you help, as I changed all the forms to white boxes and text, now I can’t read the contact form on the contact us page, as it is sitting directly on the white background.

    Thanks,
    Louise

    May 18, 2019 at 5:47 am #1101985
    Mike

    Hey Louise_Brace,
    Sorry for the late reply, can you please link to your page so we can examine it closer.

    Best regards,
    Mike

    May 18, 2019 at 5:39 pm #1102067
    Louise_Brace

    Ah yes sorry! Details below..

    May 19, 2019 at 4:53 pm #1102301
    Mike

    Hi,
    Thanks for the link,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.page-id-209 div .av-light-form .input-text, #top.page-id-209 div .av-light-form input[type='text'], #top.page-id-209 div .av-light-form input[type='input'], #top.page-id-209 div .av-light-form input[type='password'], #top.page-id-209 div .av-light-form input[type='email'], #top.page-id-209 div .av-light-form input[type='number'], #top.page-id-209 div .av-light-form input[type='url'], #top.page-id-209 div .av-light-form input[type='tel'], #top.page-id-209 div .av-light-form input[type='search'], #top.page-id-209 div .av-light-form textarea, #top.page-id-209 div .av-light-form select, #top.page-id-209 div div .av-light-form .button {
    border-color: #3fb19d !important; 
}
#top.page-id-209 .av-custom-form-color * {
    color: #3fb19d !important; 
}
#top.page-id-209 .av_seperator_big_border .av-main-nav > #menu-item-search > a {
border-width: 0px !important; 
}

    Please clear your browser cache and check.

    Best regards,
    Mike

    May 19, 2019 at 6:43 pm #1102314
    Louise_Brace

    Hi Mike
    Thanks for that. I put it into the additional css field and it works in that I now have borders around the contact form, but I still can’t read the titles i.e. elements. I need for the text to also appear in that green. Can you help?

    Thanks, Louise

    May 19, 2019 at 10:57 pm #1102334
    Mike

    Hi,
    Please try adding this css:

    #top.page-id-209 .avia_ajax_form p * {
   color: #3fb19d !important; 
}

    It also looks as though there is a class error in your form, have you added:

    ’#top.page-id-209 av-centered-form  ’

    in the class field?
    I recommend removing this as you may have issues in the future.

    Best regards,
    Mike

    May 20, 2019 at 10:25 am #1102427
    Louise_Brace

    I just added the code that you send me above. Do I now have to add both codes in to the contact form to make both borders and text show? Or just the last one you sent for all? Plus when I put one code in and save and then go back into the form again it has deleted the coding.

    May 21, 2019 at 6:41 am #1102690
    Mike

    Hi,
    I added the css for you, Please clear your browser cache and check.

    Best regards,
    Mike

    May 21, 2019 at 8:07 am #1102719
    Louise_Brace

    That’s wonderful. Thank you so much Mike!

    May 21, 2019 at 4:40 pm #1102917
    Nikko

    Hi Louise_Brace,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Changing colour scheme of single contact form’ is closed to new replies.