I have an interesting design problem that requires adding another div tag to the sidebar. That div tag needs to contain all the widgets that the user adds to the site.

There may be another way to pull this off, but the only way I can figure this out is by adding a div tag (which I'm not sure how to). Here is a screenshot of the sidebar as designed in Photoshop:

The first rounded border can be applied as a background image, but the inner rounded stuff would require a separate div.

Any ideas on how to do this?

you could add the <div> in the code - you'll have to edit header.php for the left sidebar(s) and footer.php for teh right sidebar(s)

How about styling #left with the overall background color for the sidebar and then style .widget etc for the desired look?

Originally Posted by lmilesw

How about styling #left with the overall background color for the sidebar and then style .widget etc for the desired look?

I must admit I prefer this method better because it allows updating the theme without causing any problems.

The issue with it the rounded edges. By styling #left with a repeat pattern that contains the gray edge as well as the mustard one, I can't have rounded corners. If I did them with widgets, then a rounded corner would repeat with each widget added (in the screenshot the design calls for a solid color in between widgets)

If I create rounded corners in a separate divs placed above and below, then I can't have the pages without the sidebar cause you would see the top of the mustard area with the middle missing.

I can create the gray rounded corners in such divs cause they would be present on every page, but then the mustard area would have the square corners due to the repeating pattern.

Stuck between a rock and the hard spot, eh?

one other (slightly messier idea)
1) style the td#left with your grey curves
2) install the 'exec-php' plugin
3) add a text widget to the left sidebar called 'left inside'
4) add a new widget area to that text widget called 'my left sidebar'
5) put all widgets you would normally put in the left sidebar into this new widget area

now you can style the 'left inside' widget with the mustard

Thank you JD, I'll try that

Well, whaddaya know, in a stroke of genius I figured out a way to do it with nothing but CSS and png files =)



1. First I made a 6000 px tall top left rounded corner png file (in under 1200 bytes) and applied it to the sidebar left side.

2. Then I rounded the right top and bottom corners using CSS and added hex color fill for the rest.

3. Finally, the bottom left corner was rounded using a png image placed in a footer (pushed it outside of the footer using CSS - It loads on pages without a sidebar, but since it's white on white it's not visible)

4. Outer rounded corner was set as a background of %bar2

That left me with opportunity to style widgets independently.

Damn, I love a good CSS puzzle!