Okay
  Public Ticket #1563288
Custom CSS Styling of minimalist contact form
Closed

Comments

  •  3
    Daniel started the conversation
    May 3, 2018 at 6:51pm

    Hi Salient,

    I've tried long and hard to change the styling of some elements of this form to look like attached, but have not been able to do so.

    I'm trying to give the form a class called "dark-form" and then change the underline colour and submit button colour. See attachment for reference.

    Here is an example of the code I used in the Salient theme options:

    .dark-form body[data-button-style="rounded"].ascend .container-wrap input[type="submit"], body[data-button-style="rounded"].ascend .container-wrap button[type="submit"] {
        color: #ffffff !important;
    }

    .dark-form body[data-form-submit="regular"] input[type=submit] {
        background-color: #000000!important;
    }

    Unfortunately, no lock.

    I've had an even more difficult time finding the css to edit the underline colours of the labels.


    Thanks for the help.

  •  8,470
    Tahir replied
    May 5, 2018 at 11:48am

    Hey Again,

    Sorry for the late turn around, we can get overwhelmed sometimes by the number of tickets. 

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    body[data-form-style="minimal"] .dark-form .minimal-form-input label:before, body[data-form-style="minimal"] .dark-form .minimal-form-input label:after {
    border-color: #000 !important;
}
body[data-button-style="rounded"].ascend .container-wrap .dark-form input[type="submit"] {
    background-color: #000 !important;
    color: #fff !important;
}

    Thanks

    ThemeNectar Support Team 

  •  3
    Daniel replied
    May 5, 2018 at 12:46pm

    Thank you. That worked. :)