CSS Help for Styling the WP Sidebar Widget

HTML & CSS
1

I’ve made all the sidebar widget of my wordpress blog to be contained in rounded corner rectangle box using the following CSS code.

border: 1px solid #D3D8E0;
border-radius: 9px;

However, now I realized not all the widgets need a rounded border so what is the CSS code should I use to override the rounded corner CSS code?

Would appreciate any help advice.

Thank you.

2

Hi affiliateTT, welcome to SitePoint.

The thing to do is give a class to the container, and then apply the styles to that class only. E.g.

<div class="widget">
  ...widget stuff here...
</div>

In your CSS file:

.widget {
  border: 1px solid #D3D8E0;
  border-radius: 9px;
}
3

Thanks Ralph. I thought about your code before.

However, since 90% of my widgets need to be inside rounded corner box, I thought it is easier to make all of them to be in this way first and only apply exceptional case to those which are not.

I just couldn’t figure out what CSS code should I use to override the global setting.

Any idea? Or you have better way to do it.

Many thanks again.

4

O, in that case, just add a special class to those that don’t have rounded corners:

{border-radius: 0;}

Just make sure the selector for these widgets has greater weight than for the rounded widgets. E.g.

<div id="sidebar">
  <div>
  </div>
  <div class="square">
  </div>
</div>

#sidebar div {border-radius: 9px;}
#sidebar div.square {border-radius: 0;}
5

Thanks Ralph, it works.

Couldn’t believe it was that easy! :blush:

6

No worries! Glad to be of help. :slight_smile: