Oct 3, 2008

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.

3 comments:

  1. The other option is to adjust the width of the item you're posting into the sidebar. I do this every month with the slideshow I create for GBBD.

    As I'm using the HTML widget to post the slideshow, I can easily find the 2 width specifiers and adjust these to the sidebar's width.

    I'm happy to do a fuller post on how to do this if you'd like me to.

    ReplyDelete
  2. VP, that is a good point. Although sometimes you can't widen the width of the item in question if it has been created by someone else. Where possible I think widening the width of the sidebar wrapper works best. For example on your sidebar you have pictures for water aid and knitting scarves for Pakistan. On my browser both of them look like they're too large for the sidebar.

    But if you'd like to do a fuller post that would be awesome. Send me an e-mail if you'd like to publish it here.

    ReplyDelete
  3. That's interesting because they look fine in my browser. Does that also mean that widening the sidebar may not do the trick for some browsers too?

    The 2 examples you mention should have been shrunk to fit automatically by Blogger. And it says it's doing so when the pictures are loaded.

    I've shrunk the sizes of the Slideshow and the Cake Quiz. The Hatometer widget is as supplied.

    I've added a How To article on my 'To Do' list. Can't guarantee when it'll be done though as we've got prime gardening weather here at the moment!

    ReplyDelete

I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.