transparent backgrounds

[jonnyrose]

I would like to remove the white header & body backgrounds (or make them fully transparent) so that my site's main background image is not covered up. Is this possible? Where in the code should I look?

I would also like to make the content posts & widget backgrounds slightly transparent if possible.

A graphical mockup of the basic design i'm after is on my homepage at http://www.jonnyrose.com - and the current Suffusion design is at http://www.jonnyrose.com/wordpress

Many thanks for any advice!

[sayontan]

You can use the "Custom Styles" option under "Custom CSS, JavaScript and RSS". Depending on whether you want the background to be completely transparent or just translucent put in:

Code: Select all

#wrapper { /* For transparent backgrounds */
        background: transparent;
}

#wrapper { /* For translucent backgrounds */
   background-color: #222222;
   filter: alpha(opacity=70);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
}


For posts replace "#wrapper" in the above with ".post" and for widgets use "div.suf-widget".

[rikiller]

This works great if you want the whole wrapper transparent and everything on top of it.
But what about if you use a different header image and don't want that to have opacity? I've tried a few things, but I can't nut it out.
So basically I'd like to have the wrapper, posts/pages, widgets transparent with a solid header.
Please help

[sayontan]

Not sure if I understand your problem. You could always use a separate header foreground / background image or a color gradient (the theme supports all of these using the options under Header Customization).

[rikiller]

I use a separate header background image. But what happens, because the wrapper is transparent, the header background is also transparent. I want to take any transparency away from the header so that it doesn't go through to the background image.

[sayontan]

... Unless you are referring to the sidebar widgets' headers, in which case you can set them up with something like:

.dbx-handle {
background-image: url(your_url);
}

[rikiller]

The main header.
#header-container {}

[sayontan]

While there are issues doing this through CSS alone given the page layout structure, here is what you might try - create a translucent image in a solid color. So create a small black image and add an alpha channel to it with opacity as you desire. Then set this image as the background for your #wrapper. You don't have to define any other alpha / opacity settings.

[rikiller]

Yep that works.
How do I add it to pages/posts and widget content backgrounds?

[rikiller]

nm.. sorted. Cheerz