Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • July 22, 2016 at 3:58 pm #663948
    hasbeat

    Hi,

    In order to get 1px border-width design for my contact form I have added the following css
    under general styling:

    #top div .av-dark-form input[type=’text’] {
    border-color: #000000 !important;
    border-width: 1px !important;
    background-color: #ffffff !important;
    }

    #top .avia_ajax_form .text_area {
    border-color: #000000 !important;
    border-width: 1px !important;
    background-color: #ffffff !important;
    }

    .av-custom-form-color .button:hover {
    border-color: #000000 !important;
    border-width: 1px !important;
    background-color: #6786a1 !important;
    }

    .av-custom-form-color .button {
    border-color: #000000 !important;
    border-width: 1px !important;
    background-color: #ffffff !important;
    }

    Unfortunately, it did not do trick for the button, the form element “select element”, and the form element “checkbox”.
    Please can you advise what to do. Thank you!

    July 25, 2016 at 10:01 pm #664848
    Yigit

    Hey hasbeat,

    Please go to Enfold/css/shortcodes.css and find

    #top div .av-dark-form .input-text, #top div .av-dark-form input[type='text'], #top div .av-dark-form input[type='input'], #top div .av-dark-form input[type='password'], #top div .av-dark-form input[type='email'], #top div .av-dark-form input[type='number'], #top div .av-dark-form input[type='url'], #top div .av-dark-form input[type='tel'], #top div .av-dark-form input[type='search'], #top div .av-dark-form textarea, #top div .av-dark-form select, div div .av-dark-form .button {
    color: #222;
    border-color: #222;
    border-width: 2px !important;
    background-color: transparent;
}

    and change it to

    #top div .av-dark-form .input-text, #top div .av-dark-form input[type='text'], #top div .av-dark-form input[type='input'], #top div .av-dark-form input[type='password'], #top div .av-dark-form input[type='email'], #top div .av-dark-form input[type='number'], #top div .av-dark-form input[type='url'], #top div .av-dark-form input[type='tel'], #top div .av-dark-form input[type='search'], #top div .av-dark-form textarea, #top div .av-dark-form select, div div .av-dark-form .button {
    color: #222;
    border-color: #222;
    border-width: 2px;
    background-color: transparent;
}

    and it should work fine

    Best regards,
    Yigit

    July 29, 2016 at 9:49 am #666513
    hasbeat

    Yigit – Thanks for your prompt answer!
    I added the new css under Enfold Child: Stylesheet (style.css).
    Unfortunately, nothing has changed.

    Best
    hasbeat

    July 29, 2016 at 1:29 pm #666565
    Yigit

    Hey!

    Do you mind creating a temporary admin login and posting it here privately?

    Cheers!
    Yigit

    July 29, 2016 at 1:40 pm #666572
    hasbeat

    Hi Yigit,

    Please find the login credentials below.
    Thank you!

    July 29, 2016 at 1:43 pm #666573
    Yigit

    Hi!

    You had one small CSS error in your Quick CSS field, i fixed it and then added following code to Style.css file of your child theme in Appearance > Editor 

    #top div .av-dark-form .input-text, #top div .av-dark-form input[type='text'], #top div .av-dark-form input[type='input'], #top div .av-dark-form input[type='password'], #top div .av-dark-form input[type='email'], #top div .av-dark-form input[type='number'], #top div .av-dark-form input[type='url'], #top div .av-dark-form input[type='tel'], #top div .av-dark-form input[type='search'], #top div .av-dark-form textarea, #top div .av-dark-form select, div div .av-dark-form .button {
    border-width: 1px !important;
}

    please review your website now

    Cheers!
    Yigit

    July 29, 2016 at 1:59 pm #666583
    hasbeat

    Yigit – Great, thank you!
    I used the contact form for newsletter registration, too (please see Home, just before footer). Nothing
    has changed there. Can you check please! Thanks

    July 29, 2016 at 2:02 pm #666587
    Yigit

    Hey!

    Please add following code to Style.css as well 

    #top .av-custom-form-color .button, #top div .av-light-form .input-text, #top div .av-light-form input[type='text'], #top div .av-light-form input[type='input'], #top div .av-light-form input[type='password'], #top div .av-light-form input[type='email'], #top div .av-light-form input[type='number'], #top div .av-light-form input[type='url'], #top div .av-light-form input[type='tel'], #top div .av-light-form input[type='search'], #top div .av-light-form textarea, #top div .av-light-form select, div div .av-light-form .button { 
border-width: 1px !important;
}

    Cheers!
    Yigit

    July 29, 2016 at 2:09 pm #666590
    hasbeat

    Yigit – It did not do the trick!

    August 1, 2016 at 11:47 am #667204
    Rikard

    Hi,

    Great, glad we could help. Let us know if you should need any further help on the topic.

    Thanks,
    Rikard

    August 1, 2016 at 12:39 pm #667223
    hasbeat

    Hi Rikard,
    Thanks for your reply. The code added worked fine for the contact form on the contact page.
    However, the code does not effect the contact form element used for newsletter registration at the bottom
    of the starting page.
    Please advise. Thank you!

    August 6, 2016 at 5:17 am #669201
    Rikard

    Hi,

    Sorry for the late reply, please try this instead: 

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

    Thanks,
    Rikard

    August 6, 2016 at 9:56 am #669290
    hasbeat

    Thanks for the code snippet, Rikard. All fine now.

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