Stupid Theme Tricks: Taming pesky third party widgets

It happens to everyone. You’ve set up the perfect blog theme, gotten your sidebar(s) just the way you wanted and it’s time to add that last little snippet. And it doesn’t lay out properly. It may be Google AdSense, and Amazon affiliate widget or a Flickr badge, but whatever it is, it’s interfering with your layout.

Perhaps it’s drifting outside the column to the right. (This is what happened to me. The widget creator had added padding that forced the widget just outside my theme’s boundaries.) Maybe it’s too far to the left by just a hair. I have a solution.

Most likely this third party add-on was dropped into your sidebar using the Sidebar Widgets in your Presentation menu. If so, simply add the following…

<div style="margin-left: -15px;">
<YOUR WIDGET CODE HERE>
</div>

You may need to adjust the margin-left value to a positive number, or just a lesser number to fit your needs, but you’ll immediately see the widget (or whatever it’s called) slide to the left by 15px. Pretty easy, huh!

If you’ve hard coded your theme, just find the spot where you’ve added your third party code and place the <div> tag around it as seen above. As long as you don’t have a generic style set for DIV’s in your CSS file (and why would you?), it’ll work like a charm every time, without modifying the third party code, which can be a violation of some Terms of Service. (Can you sy G00gle anyone?)

---

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically each day to your feed reader. If you don't have a feed reader, you can always have these articles delivered to your email inbox every day. Click here to sign up.

the Spun Puppy | Powered by WordPress | ElegantBlue is a custom theme by Nathan Rice