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.

One thing to keep in mind is that you can make the sidebar_bot image as long as you like depending upon how far you think it's going to need to slide (as the content changes in size).

Step 2: Edit the page.tpl.php file and the style.css file

Lets say we currently have the following code for our left sidebar in the page.tpl.php file of our Drupal theme

As we can only place one background image into one div we are going to need another wrapper div for the sidebar to hold the other image. So, we add the extra code

to our original code, giving us

Now we have a situation whereby two divs (sidebar_left and sbarleft_top) both wrap around our entire sidebar. The positioning of #sbarleft_top is inside of #sidebar_left in our code, meaning that whatever background image we place into #sbarleft_top will sit on top of whatever background image we place into #sidebar_left.

Having edited the page.tpl.php file, we now just need to add the following css to our Drupal theme's style.css file so that our background images show up in the right place

and that's it. You should now have a sidebar whose background images resize to hold the content. Stay tuned for another solution, coming soon in Part 2.