As you know from my last post, using padding, borders and margins to make my sidebar block elements appear properly caused a laundry list of problems because of the discrepancies between browsers. Do you want to format the basic look feel of the entire block element and the spacing between them? I’ve got an easy fix for you.

Just as Wordpress has a loop for displaying posts, I figured the same would be true with  the sidebars. Where is it located? Head into your wp-includes folder and you’ll see a little file called widgets.php. When we use dynamic sidebars within wordpress, this file is being called up to tell the browser how to display your widgets.

Scroll down a little bit and find the following code:

———————————————————

$defaults = array(
‘name’ => sprintf(__(’Sidebar %d’), $i ),
‘id’ => “sidebar-$i”,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => “</li>\n”,
‘before_title’ => ‘<h2 class=”widgettitle”>’,
‘after_title’ => “</h2>\n”,

———————————————————

There it is! That’s telling our dynamic sidebar what comes before and after the actual widget and the widget titles! All we have to do is insert a little bit of HTML code in the proper place and we’re all done.

I wanted some white space before each widget, so I made the following changes to the before_widget line:

———————————————————
‘before_widget’ => ‘<div id=”widgetspace”><br></div><li id=”%1$s” class=”widget %2$s”>’,
———————————————————

As you can see, I added a div called widgetspace and placed a line break in that div. I then headed over to my styles.css and changed the elements as I saw fit. This is what I did:

———————————————————
#widgetspace {
background: #FFFFFF;
line-height: 1em;
}
———————————————————

And that did the job. I was able to change my margins and paddings and borders to their original setting and the sidebars looked exactly as I wanted them too: with a bit of blank space between them, separating the various elements of the sidebar.

So if you’re experiencing the same problem, I hope I saved you some effort of trying to surf the net and find the answer yourself!