CSS Styling for Widgets

When I was working on my new theme, it only had one sidebar. I added the second but then things didn’t seem to line up quite right in my widgets. With a little css styling though, I got them all looking good. First, in the widget, add:

<div class=”whatevernameyouwant”>Then all your code and the closing </div>

Then in your css file, I usually just put mine at the bottom, so I know what I’ve added, add this:

.whatevernameyouwant {

width: 150px;

margin: 2px auto;

margin-left: 9px;

padding: 1px;

text-align: center;

}

You can add whatever kinds of adjustments you want in there. The margin-left: 9px; was what centered this widget. Some of them took much more.

Also, you can change the width of widgets that don’t quite fit your sidebar. Many of them can be changed right in the widget code (see image). If not, add some code like above and set your width and height in the css.

If you have a widget that refuses to clear the one above it, you can try adding <p></p> around it. Or adding <div></div> around it, or around both widgets. Then there is the magical clear both which solves any number of clearing issues. That would go at the bottom of a widget like so: <div class=”cboth”></div> (nothing in between the <div></div>). In your css add this:

.cboth {

clear: both

}

Hope this helps, someday I might tackle the issue of actually making your widgets validate. I’m obsessive about valid code and was real surprised when I tackled my blog and found out how many plugins and widgets don’t validate!