ResolvedMinor changes to buttons

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #13874
    GilbertW
    Participant

    Hello

    I would like to do some minor changes to the buttons.

    1. Change the line style from dash line to continuous line
    2. Set the background color of the button (as well in “normal” and in “hover over” mode)

    I use a child theme for my custom adaptations. Could you give me a CSS code snippet to override the current setting?

    Thanks in advance for your answer!

    #13881
    Althemist
    Keymaster

    Hi GilbertW,

    I am afraid this is not minor change and it can’t be easily changed with just a simple CSS snippet, as it’s using dynamically generated PHP/CSS file to control the buttons.

    The only way to change it would be hardcoded colors with “!important” and you’d not be able to change them in admin anymore.

    .vc_btn3.vc_btn3-style-outline, .vc_btn3.vc_btn3-style-outline-custom, .vc_btn3.vc_btn3-style-outline-custom:focus, .vc_btn3.vc_btn3-style-outline-custom:hover, .vc_btn3.vc_btn3-style-outline:focus, .vc_btn3.vc_btn3-style-outline:hover {
        border-style: solid !important;
    }
    
    a.button, button.wcv-button, input.button, .wcv-navigation ul.menu.horizontal li a, nav.woocommerce-MyAccount-navigation ul li a, button.button, a.button-inline, #submit_btn, #submit, .wpcf7-submit, .col2-set.addresses header a.edit, input.otw-submit, form.mc4wp-form input[type="submit"], .tribe-events-button, input[type="submit"] {
        border-color: #your-color !important;
        color: #your-color !important;
        background-color: #your-color !important;
    }
    
    a.button:hover, button.wcv-button:hover, input.button:hover, .wcv-navigation ul.menu.horizontal li a:hover, nav.woocommerce-MyAccount-navigation ul li a:hover, button.button:hover, a.button-inline:hover, #submit_btn:hover, #submit:hover, .wpcf7-submit:hover, .col2-set.addresses header a.edit:hover, input.otw-submit:hover, form.mc4wp-form input[type="submit"]:hover, .tribe-events-button:hover, input[type="submit"]:hover {
        border-color: #your-color !important;
        color: #your-color !important;
        background-color: #your-color !important;
    }

    Hope this helps.

    Regards,
    Dimitar

    #14092
    GilbertW
    Participant

    Hi Dimitar

    Thanks for your answer and sorry for the late reply. I added the CSS using the built-in CSS editor (editing style.css in the child theme didn’t work).

    Setting the color works OK with your code, but the border style not. It stays dashed. Any idea why?

    Thanks for your help!

    #14096
    GilbertW
    Participant

    Changed the status, as the buttons still dashed.

    #14113
    Althemist
    Keymaster

    Hi GilbertW,

    just add the “border-style: solid !important;” to the second and third rules in the CSS I gave you.

    Hope this helps.

    Regards,
    Dimitar

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in and have valid license to reply to this topic.

License required for any item belonging to this account
AlThemist

AlThemist

sales 13319, followers 699
Login and Registration Log in · Register