The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Opacity Problem

View previous topic View next topic Go down

Solved Opacity Problem

Post by Honor on October 21st 2010, 6:26 pm

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?

Honor
Forumember

Female Posts : 172
Reputation : 17
Language : English
Location : Bouncing off the Walls

http://blueplanet.road2us.com

Back to top Go down

Solved Re: Opacity Problem

Post by ankillien on October 21st 2010, 6:29 pm

Hello,

Try this CSS code...

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

This code won't work in IE.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Opacity Problem

Post by Honor on October 21st 2010, 6:38 pm

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

Honor
Forumember

Female Posts : 172
Reputation : 17
Language : English
Location : Bouncing off the Walls

http://blueplanet.road2us.com

Back to top Go down

Solved Re: Opacity Problem

Post by ankillien on October 21st 2010, 6:45 pm

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;
}

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Opacity Problem

Post by Honor on October 21st 2010, 6:55 pm

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

Honor
Forumember

Female Posts : 172
Reputation : 17
Language : English
Location : Bouncing off the Walls

http://blueplanet.road2us.com

Back to top Go down

Solved Re: Opacity Problem

Post by Honor on October 21st 2010, 6:59 pm

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;
}

Honor
Forumember

Female Posts : 172
Reputation : 17
Language : English
Location : Bouncing off the Walls

http://blueplanet.road2us.com

Back to top Go down

Solved Re: Opacity Problem

Post by ankillien on October 21st 2010, 7:06 pm

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.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Opacity Problem

Post by Honor on October 21st 2010, 11: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?

Honor
Forumember

Female Posts : 172
Reputation : 17
Language : English
Location : Bouncing off the Walls

http://blueplanet.road2us.com

Back to top Go down

Solved Re: Opacity Problem

Post by Guest on October 21st 2010, 11:59 pm

Code:

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

Guest
Guest


Back to top Go down

Solved Re: Opacity Problem

Post by ankillien on October 22nd 2010, 9: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.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Opacity Problem

Post by Honor on October 22nd 2010, 5:40 pm

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

Honor
Forumember

Female Posts : 172
Reputation : 17
Language : English
Location : Bouncing off the Walls

http://blueplanet.road2us.com

Back to top Go down

Solved Re: Opacity Problem

Post by Honor on October 23rd 2010, 10: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

Honor
Forumember

Female Posts : 172
Reputation : 17
Language : English
Location : Bouncing off the Walls

http://blueplanet.road2us.com

Back to top Go down

Solved Re: Opacity Problem

Post by Guest on October 24th 2010, 1:53 am

Solved Locked

Guest
Guest


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum