Opacity ?

[Patrick [ASE]]

If i upload a plain colour image as a table background, what would be the code i need to make it opaque ?
Is it something to do with moz ?

I know the delete post confirmation box border is opaque, but can't find how it's done

[Shrike]

To make it opaque (I'm assuming it's already being set as semi-transparent and you want to override it?) simply use opacity: 1.0;. Works in everything but IE 8 and below.

Edit 2: Wait, "a plain color image"? Why not just use background-color?

[Patrick [ASE]]

I want to make the table bg's opaque, not override the opaque
I'd be happy with a BG colour if that can be opaque, thought it only worked with images

just need to know where i can find the setting in the template, and be able to modify it, or to add an opaque code if needed

[Shrike]

Nov 24, 2012 13:09:35 GMT -8 Patrick [ASE] said:

I want to make the table bg's opaque, not override the opaque
I'd be happy with a BG colour if that can be opaque, thought it only worked with images

just need to know where i can find the setting in the template, and be able to modify it, or to add an opaque code if needed

Can you provide a screenshot of what part it is you want to change? I'm not sure what you mean by an opaque code: normal background colours are opaque, you can use opacity to make them semi-transparent (semi-opaque).

[Patrick [ASE]]

Generally all the table/container backgrounds so the forum BG can be seen, but not transparent, it should look like the border of the participated popup (when you view on the right browser)

[Shrike]

Nov 24, 2012 13:49:57 GMT -8 Patrick [ASE] said:

Generally all the table/container backgrounds so the forum BG can be seen, but not transparent, it should look like the border of the participated popup (when you view on the right browser)

Well, one thing I was thinking of was using a feature of the "LESS" CSS extension that the V5 stylesheet uses where you can provide a colour and it will give it a specific/more/less opacity so the colours are faded. This way, you could tweak the actual colours using the Easy Theme Creator and only need to touch the stylesheet for it if you wanted to adjust the opacity.

The one thing about this is that it'd work best if we could use the main background colours which are the subtle green/red in this screenshot. Would that be okay to do?

[Patrick [ASE]]

www.w3schools.com/css/css_image_transparency.asp

I know the codes on there are old, but look at example 3, now imagine that the transparent box with text is the forum tables, and the flowers are the forum background
Once the colour of the transparency/opacity and colour is set, i doubt if i'll change that, so not bothered about the method, but i want to preserve the ability to change borders in theme creators
i don't mind if the colour is an image or a solid colour

The transparency should affect all table cell backgrounds

[Shrike]

Sorry about the wait, I've been busy with other things for a while, I think I've got what you were looking for. This will all be going to the bottom of the theme stylesheet (Themes > Colors and styles > Stylesheet tab).

This first part will have the main semi-transparent background that we'll be seeing the forum background through. Most browsers can use the rgba part to set the colour. For the out-of-date browsers that don't, I've used the handy feature detection that PB have included to allow you to set a semi-transparent image as the background. If you don't need to use an image, remove that line (second one) to stop it from causing problems with non-existent images.

.container > .content {background-color: rgba(255,255,255,0.5);}
body.no-rgba .container > .content {background-image: url("http://i.imgur.com/rNFFA.png");}

Now, as far as I could find, there are then two areas which have another background colour on top: the posts and any small inner containers like the mini-profiles (which actually have their own, pretty much identical class). I figured they would look better being slightly more opaque than the background we set above, much like how every other post here has a slightly darker background. The same thing of using rgba and an optional semi-transparent background image like above applies. One thing to bear in mind is that the semi-transparent background will go on-top of the previous one, so use smaller values.

.posts .post {background-color: transparent;}
.posts .post.even, .content-box, .mini-profile {background-color: rgba(0,0,0,0.1);}
body.no-rgba .posts .post.even, body.no-rgba .content-box, body.no-rgba .mini-profile {background-image: url("http://i.imgur.com/BcPFj.png");}

If you want them all to be transparent and just show the same background as the first part did, use this instead:

.posts .post, .posts .post.even, .content-box, .mini-profile {background-color: transparent;}

Hopefully this fits the bill for what you wanted. Let me know if it doesn't or if my instructions don't make sense.

EDIT: I've added some semi-transparent images that match the rgba values I've used as examples, feel free to use them. If you want to change the color/opacity of the background, you can do that with the rgba values but you'll need to make new images. You don't need the images for the code to work, they are only there as a fallback for obsolete browsers.