[Resolved] Set all buttons and forms to round border-radius

Home Forums Support [Resolved] Set all buttons and forms to round border-radius

Home Forums Support Set all buttons and forms to round border-radius

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #912614
    toasterpc

    Hello,

    At last, it seems I’m almost ready for launch πŸ™‚

    Now, all I’m missing is to set every button and form element (text, numbers, etc.) to a single border-radius parameter.

    Is there any way to set this with a filter?

    #912655
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this CSS:

    input,
    select, 
    textarea,
    .wp-block-button .wp-block-button__link, 
    a.button, 
    a.button:visited, 
    button, 
    html input[type=button], 
    input[type=reset], 
    input[type=submit],
    .woocommerce #respond input#submit, 
    .woocommerce a.button, 
    .woocommerce button.button, 
    .woocommerce input.button {
        border-radius: 5px;
    }

    Let me know πŸ™‚

    #913753
    toasterpc

    That worked great! Thank you.

    By the way, would there be a way to apply the same roundness to the WooCommerce quantity buttons and tables?

    #913790
    Tom
    Lead Developer
    Lead Developer

    For the quantity buttons, try this:

    .do-quantity-buttons form .quantity:not(.buttons-added):before, 
    .woocommerce form .quantity.buttons-added .minus {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    
    .do-quantity-buttons form .quantity:not(.buttons-added):after, 
    .woocommerce form .quantity.buttons-added .plus {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    Which tables exactly?

    #913801
    toasterpc
    #914488
    Tom
    Lead Developer
    Lead Developer

    That’s much harder, as the borders are all over the place. You could try this:

    .woocommerce div.product form.cart .table-striped {
        border: 1px solid #ddd;
        border-radius: 30px;
    }
    
    th {
        border: 0;
    }
    #914771
    toasterpc

    Alright, that worked.

    Thank you!

    It seems that both the tables and buttons within the checkout page still won’t budge, though.

    The buttons inside sidebar widgets,too.

    #914852
    Tom
    Lead Developer
    Lead Developer

    I just adjusted your CSS above to work on the checkout as well: https://generatepress.com/forums/topic/set-all-buttons-and-forms-to-round-border-radius/#post-912655

    Your buttons in the sidebar look rounded to me?

    Let me know πŸ™‚

    #914856
    toasterpc

    Alright!

    That worked wonders!

    (Widget must have been a cache fiddle…)

    Seriously, thanks for the help Tom.

    #915407
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.