Widening Your Sidebar

If you've been garden blogging for a while chances are that you have badges, awards, photos, widgets/gadgets or ads up and down your sidebar. Sometimes these items we use to decorate our garden blogs are too large to fit properly into the space they're allotted and so don't display properly. If this is the case and you just have to put up the picture of your cat doing his impersonation of Tina Turner there's a simple fix.

Make a note of the size(s) of the widget/badge/award/ad/photo you want to use. Either write down or remember the width of the largest item because we're going to modify the sidebar so that it fits without being cropped off. If you performed the modification that covered how to add color to your sidebar background this should be very easy.

Step #1: Backup & Save
The first thing you should always do when modifying your template is to download a copy of your template in the event that anything should go wrong. If you do something that you don't like or know how to fix you can always upload your template and go back to how you originally were. To do this go to Layout> Edit HTML then click Download Full Template. My favorite option is to create a test blog where you can perform these modifications first and then do them to your garden blog once you feel comfortable enough with the process. If you do something you can't recover from you can always delete your test blog and start over, an option that isn't really available with your real garden blog. I can't stress how important this is because there may come a time where you'll regret not doing this, trust me.

Step #2: Find your sidebar
The same area we modified before is the area we're looking for now. When you're at Edit HTML scroll down your template until you come across the sidebar wrapper. It looks like this:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

In this case the sidebar is 220 pixels wide so anything over that will be cropped off and won't display properly. Change the width of your sidebar to the same width of the largest item you want to add in your sidebar. Hit preview and if everything went well you should see the changes on your blog and if everything fits properly click save. Alternately if you have minimal items in your sidebar or you think it is too wide you can always lower the number to make your sidebar narrower.

Note
This works the best for templates like Minima that don't use any images to create the background or border of the sidebar. If you do this to templates like Rounders that use images to create the rounded corners you'll just throw off the margins and you'll have to resize and replace the little images that create the rounded corner effect. This isn't hard to do if you have a photo editor like Photoshop but it can be difficult for some.