Opacity Problem

by Honor October 21st 2010, 9:26 am

Hey all - I'm working on a new winter skin for BP. Here is the TEST site that I use:

http://mytestforum.ohmyforum.net

I have conjured up a CSS code to make the forum line semi-transparent. But it makes EVERYTHING transparent. What do I need to fix so it's just the forum line?

Code:: div#wrap { background-color:#000000; /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; }

I've also tried:

Code:: body { filter:alpha(opacity=80); -moz-opacity:0.80; -khtml-opacity: 0.80; opacity: 0.80; }

I need my forum/posts/logo/images/type etc to all be fully seen, but only the black rounded-cornered box slightly transparent. Help?

by ankillien October 21st 2010, 9:29 am

Hello,

Try this CSS code...

Code:: #wrap { background: rgba(0,0,0,0,0.5); }

This code won't work in IE.

by Honor October 21st 2010, 9:38 am

I am also using the

Code:: #wrap { -moz-border-radius : 10px; -webkit-border-radius : 10px; }

code - I tried to combine it and it's still acting funny. Plus most of my users use IE, so I need that code to work as well.

Oh PS - using PHPBB3

by ankillien October 21st 2010, 9:45 am

My code is for phpBb3 and it should work.

This would be it...

Code:: #wrap { background: rgba(0,0,0,0.5); -moz-border-radius : 10px; -webkit-border-radius : 10px; }

For IE, you have to use a transparent image as background. You can make a small semi transparent image and set it as background using this code...

Code:: #wrap { background: url(IMAGE URL HERE) repeat; }

by Honor October 21st 2010, 9:55 am

Okay that worked Smile

Can you tell me how the opacity in the code matches up to opacity in Photoshop? I need to get it as close as possible Smile

by Honor October 21st 2010, 9:59 am

Completed code (can't test it until I get out to a comp with IE on it)

Code:: #wrap { background: rgba(0,0,0,0.5); -moz-border-radius : 10px; -webkit-border-radius : 10px; } #wrap { background-image: url('http://i56.tinypic.com/33nvrig.png') repeat; }

by ankillien October 21st 2010, 10:06 am

In photoshop make the image with black color first (#000000) and then make it 50% opaque. It will match the opacity in the code.

Well, IE always has problem with transparency Razz

We can't expect it to be 100% perfect.

Please avoid double posting unless separated by 24 hours. Use the EDIT button to add info.

by Honor October 21st 2010, 2:11 pm

I still need something that will work in IE. As far as I can tell, the picture isn't coming up. Can someone with IE check the site linked above and tell me if you're getting a transparent forum line or a semi-transparent black forum line?

EDIT : It's official, the background image i created for the "transparent" look in IE is not working. Is that code correct? or is there another one?

by Guest October 21st 2010, 2:59 pm

Code:: * for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6;

by ankillien October 22nd 2010, 12:03 am

Honor wrote:I still need something that will work in IE. As far as I can tell, the picture isn't coming up. Can someone with IE check the site linked above and tell me if you're getting a transparent forum line or a semi-transparent black forum line?

EDIT : It's official, the background image i created for the "transparent" look in IE is not working. Is that code correct? or is there another one?

IE actually doesn't support transparency for PNG images. There is no CSS fix for this. Make a search for IE PNG fix in google.

by Honor October 22nd 2010, 8:40 am

Gangstar15 wrote:
Code:
* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6;

That's basically a copy/paste of what I started this thread out with. It works, but it makes EVERYTHING transparent if placed under wrap, including text and my banner.

ankillien wrote:
IE actually doesn't support transparency for PNG images. There is no CSS fix for this. Make a search for IE PNG fix in google.

Okay, understood. What I need then is the div name of the forum background line, so I can place the one code that DOES work strictly to that one div. #Wrap isn't it, since it seems to encompass everything within the Forum Line, including text and images. Is there a .bodyline { or a .forumline { or something along those lines that simply designates the background of the forum?

I know we're so close to the answer... and the background I'm trying to find won't work with a completely transparent background for IE users. It's gonna be ugly to try and read. And I really don't like the straight black either.

by Honor October 23rd 2010, 1:18 pm

Officially solved. I found a code generator for some pretty cool effects, including a drop shadow Smile

It gave me the code for all browsers that accept CSS3. Here's the ending code:

Code:: #wrap { -moz-border-radius : 10px; -webkit-border-radius : 10px; background-color: #000000; background-color: rgba(0, 0, 0, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99000000',EndColorStr='#99000000'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99000000',EndColorStr='#99000000')"; /* IE8 */

Here's the website I found (for posterity's sake): http://css3please.com/

I'm going to try the drop shadow effect now Smile

Once more, my test site to see it in action: http://mytestforum.ohmyforum.net