[SOLVED] Transparent border around sidebar widgets?
 

I'd like my sidebar widgets to float independently, and not be connected visually to the main content area or header. (See pic below.)

I think I can do this virtually with a wide margin in the center column and a clever background image. But I'm not sure how to do additional transparent buffers in between the widgets.

Any suggestions?

http://animatusstudio.com/workshops/...le-sidebar.jpg

I'm experimenting right now. Like I thought, I was able to get space between the center and sidebar with margins and semi-transparent background image.

http://animatusstudio.com/test3/

But I'm not sure how to build in some space between each widget.

Also, is there a way to do a transparent border around my page menu items? You can see the thick black border around my menu links, and I'd prefer that to be transparent.

This is where learning to use a tool like Firebug is necessary. As an example to put space between widget areas you would make #right transparent and then style .widget to make the widgets look as you want.

For the menu you will probably have to make the menu transparent and put margins between the menu li items.

How do I "make the menu transparent"? I know how to change the hex code to any color I like, but what's the code for transparent?

I tried opacity:0.0

Also tried background-color: none

Neither seemed to work on the menu background, one actually made the whole menu disappear.

The code for transparent is transparent. w3schools.com is a good source for CSS code.

Not being able to style the Widget Content Box is throwing me off. I can give the widget a background color or image, but can't give the contents a margin. The words are right on the edge.

Thanks for the "transparent" tip. There's so many variations on CSS, and I'm a copy-paste coder, so didn't know what to do there.

I just remembered another blog design I did, where I compromised with a single image that acts as a long vertical background for the whole sidebar.

http://farmerbarney.com

I say compromise, because if I were to keep adding widgets, they'd end up falling off the bottom edge of the "paper" image.

I accomplished that with an HTML insert:

Reactivating this link to see if anyone has further suggestions for my sidebar. I've tried a lot of trial and error, but I don't see a way to give my sidebar boxes some nice margins.

http://animatusstudio.com/test3/

And I think I'll delete the top menu, instead of integrating it into this design.

Your sidebar boxes have huge margins. If you are talking about padding you could use

That was it! I added that code to the html/css area, which worked, then tried adding just a padding line to the widget area styling, which worked also.