My Drupal Blog

OK, so here's the situation:
You've done a nice Drupal theme design in Photoshop, or the like, which incorporates a sidebar containing some kind of background image, maybe rounded corners, maybe a left–to-right gradient – you get the picture. Now this is great if the content fits within the sidebar image comfortably, but what if you want to add more content, or a user increases the default text size thereby increasing the area covered by the sidebar content? The result will be content which effectively spills over the background image and messes up your lovely sidebar design. What you could really do with is a sidebar which contains a background image that re-sizes automatically to fit the content…

Here's one solution (I'll outline another solution in Part 2).

Solution 1 - The Sidebar Sideways Sliding Door

Basically, the first solution takes the famous A List Apart sliding doors of CSS method and turns it on its side.

Without recapping the entire article, the basic theory is that you have two images, and one effectively slides under the other as the content area changes in size. This makes it appear as if the sidebar is dynamically resizing to fit the content.

In our sidebar's case we can achieve the same thing using one image for the top of the sidebar and another for the bottom. The sidebar_top.jpg image will stay on top and the sidebar_bot.jpg image will slide underneath.

There are two steps to incorporate this effect:

• Step 1: Create the images
• Step 2: Edit the page.tpl.php file and the style.css file

Step 1: Create the images

Firstly, we take our original sidebar image and split it to create two images – sidebar_top.jpg and sidebar_bot.jpg.