1 post tagged “sidebar”

Based on the response I received from a recent comment I left on Crankypants' blob, I realized not everyone knows that you can successfully add more than one widget to your sidebar.  It's really easy to do, and I figured I'd throw up a quick post to help guide you.  Don't worry, even if you don't know any HTML you can follow this guide to have a way to put up 2, 3, even 4 widgets (depending on how big they are) in your sidebar.

Here's the key - Your sidebar is basically a box sized to fit about one widget.  If you add a second widget (by adding the code for it below your first in the widget edit box), you may find it gets cut off, or worse yet, doesn't appear at all.  The problem is the widget is outside the dimensions of the default box.  The solution?  Change the size of your box.

In order to make your sidebar taller, so you can fit more widgets in, you want to define a box big enough for all your widgets.  Before your first widget, paste the following line:

<div style="height: 900px;">

and then after your last widget, paste the following line:

</div>

What this does is create a box 900 pixels tall in the sidebar - this is bigger than your original sidebar, and will allow you to fit in multiple widgets inside it, one after another (e.g. in my sidebar, I have a Creative Commons link, a last.fm widget, and then a KVOX music widget).  You can change the "900" to any number you choose to fine-tune for your choice of widgets.  If you're still cutting off a widget, make it bigger.  You can also make it smaller if you don't require so much space.

Things to consider:

• You may think having 4 widgets is cool (and yes, they probably are), but remember that every time someone loads your page, they will be loading your widgets.  The longer it takes to load the widgets, the longer it takes to load the page.  You're also requiring someone's browser to use more RAM to display your page, which means you could slow their system down if you go overboard.
• This will NOT increase the width of your sidebar, which is limited to 140 pixels.  Using widgets wider than this will either cut them off on one side or keep them from working properly (or both).
  
• If you have a short post, increasing your sidebar's length may affect the length of your page for your post.  This may mean you have blank space in between the end of your entry and the bottom of the page.  This is the reason you don't want to make your sidebar 2000 pixels long when you only have 2 widgets in there.

Good luck adding your widgets!  If you come across a cool one, post a link to your vox homepage (where we can find your widget displayed) in the comments below, so everyone else can ooh and aah at your widget prowess!