Round Widget Edges?

Hello! I recently added a white backdrop to my widgets so they are more visible, but some of the widgets and some are square which isn’t very pretty to look at.

What could I do to modify & curve the edges of individual widgets?

You can see this throughout my site but it’s especially noticeable with the footer widgets.

Hi Cassidy,

Thanks for reaching out.
You need to add the background color to the widget elements and remove the background color of the widget. The example code has given below, you need to add it into the Theme Options > CSS.

.widget ul li
{
    background-color:#ffffff !important;
}
.widget > ul, .widget > div
{
    background-color: transparent !important;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

Thanks! This worked like a charm.

Additionally, is there any way to add padding to extend the width of the widget so there is more space around the text? I just want to make the buttons wider.

Hi Cassidy,

Yes, you can add padding in your CSS, see an example below:

.widget ul li {
    background-color:#ffffff !important;
    padding-left: 15px;
    padding-right: 15px;
}

Just change the value of the padding, to know more about padding, please check this out:

Hope that helps.

Thank you.

Thank you!!

Hi Cassidy,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.