transparent backgrounds

[jonnyrose]

Thanks for the great help guys! That worked perfectly.

One more question - now that the background is transparent, how do I remove the wrapper outline? (the single pixel line around the whole page)

page in progress is at http://www.jonnyrose.com/wordpress

cheers
jonny

[sayontan]

Set "border: none;" for the #wrapper element

[touchedbyanangel]

First I want to say that I think this theme is great. Thank you, Sayontan, for making something that even I can figure out.(for the most part) I've been "building my blog for several days now. I go between this forum and WP forums to try and get answers to some questions. I usually find ideas or other answers while I'm looking for the answer to something else. Today I was looking for "how to change backgrounds on separate pages" and I came across a question about transparent backgrounds and how to leave the HEADER solid. Here was part of your answer:

***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.***

I did what you said and now my whole page is transparent, which is fine. My header looks good transparent. But I would like to know if there is a way to avoid making individual widgets transparent. I have a picture that would look better if it was not transparent. My video's are transparent too. Also, my original question, how can I make separate backgrounds on separate pages. Ex: Home, About, etc. Thanks for your help and I'm sorry I wrote so much.

[sayontan]

Is this an example of what you are looking for? I did this by simply defining "background: transparent" for #wrapper. The colors for the widgets stayed at their defaults.

There is no way to change backgrounds for different pages without making PHP changes.

[touchedbyanangel]

Hi Sayontan. Thanks for answering so fast. Here is my page. http://dancing-spirit.net/blog/?page_id=83 On this particular page you can see the you tube video is transparent and in the sidebar I just want the 1 picture to be solid. I'm happy with the rest of the page.

[sayontan]

As I mentioned in the post you referenced, there are some issues controlling the transparency of the page components with the "opacity" parameter when applied to #wrapper. You might consider removing the opacity altogether and simply put in this:

Code: Select all

#wrapper {
        background: transparent;
}


If you really want the translucence, use a 1x1 gif with the required opacity as the background. If you want your posts to be translucent add:

Code: Select all

.post {
        opacity: 0.7;
}


If you want your widgets to be translucent do:

Code: Select all

.suf-widget {
        opacity: 0.7;
}


[touchedbyanangel]

OK. I'll play around with it. Thank you for your help.

[hydrawyvern]

I would like only to make the center content area transparent...when i use the below code it makes the entire area transparent...How do I leave the header and footer as they are, but only make the center content area transparent?

#wrapper {
background: transparent;
}

Many Thanks...

[hydrawyvern]

ok i figured out how to make the header not transparent, how do I add a black background to the footer? it is transparent now which I do not want.

Many thanks, any help would be greatly appreciated...

[hydrawyvern]

nevermind....thanks again!!!!