Hi there,
I am trying to get rounded corners for the “What’s new” widget on the Home Page (http://mmswimming.ca/)
I entered this inline HTML code for the widget (working before, just added the border-radius settings):
<div style="padding: 10px;background-color:#3155b7; border-radius: 3px; color: #ffffff;" class="panel-widget-style"><div class="textwidget"><p style="margin-left: 15px; font-size: 120%;"> <strong>What's New</strong> <p style="margin-top: 20px;"> <ul> <li style="margin-left: -15px; font-size:95%;">Our regular swimming season kicks off on Sep 27th - don't forget to sign up!</li> <li style="margin-left: -15px; font-size:95%;">The Board needs a President - feel free to volunteer</li> <li style="margin-left: -15px; font-size:95%;">2016 Provincials and Nationals are being held in Toronto at Etobicoke and at the Para Pan Complex</li> <li style="margin-left: -15px; font-size:95%;">And stay tuned for our next Social Event!</li> </ul> </div></div>
Changes don’t commit after clicking “Done” for the code and “Update” for the Page (and after refreshing the live page).
This Custom CSS code works but it changes ALL my widget boxes in the code:
.panel-widget-style {
border-radius: 3px; }
What am I doing wrong?
Can anybody assist?
Appreciated.
Martin Perez
Mississauga, ON Canada
Hi Martin
Thanks for reaching out.
Try this. Remove all of the inline CSS you’ve inserted, remove all row and widget attributes too. Go back to default. Then, edit the widget concerned and enter a class name into the widget class field:
Next, go to Appearance > Custom CSS and insert:
/* Custom Page Builder Styles */ .rounded-corners { border-radius: 3px; }Let me know how that goes. If necessary I’ll make further adjustments as required.
Wow Andrew – it worked like a charm!
I never noticed every widget had that “class” field – very useful.
Many thanks!
Cheers,
Martin
Super :) Glad to hear that did the trick.
All the best with your site.