Transparency issues

[teers]

Can someone give me a detailed explanation on how to make the board here transparent slightly?

starwarsgalaxyrising.proboards.com/

[Tumbleweed]

Try this in your global headers:


<style type="text/css">
.bordercolor, .windowbg, .windowbg2, .titlebg, .catbg, .welcomebg, .newstitlebg, .menubg{
background: rgb(90, 89, 59) transparent;
background: rgba(90, 89, 59, 0.3);
/*For IE*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#337b6d63, endColorstr=#337b6d63);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#337b6d63, endColorstr=#337b6d63)";
}
</style>

The fist two parts is for most all browsers except IE.

What you'll need to do is convert your hex color to RGB colors. You can do that here:
www.javascripter.net/faq/hextorgb.htm

That'll be the 90, 89, 59 you need to change in both lines. The last bit (0.3) is how transparent you want. 0.0 is totally transparent and it goes up to .9 which would be opague.

The last two lines  are for IE. The first two numbers, 33(below in blue) are for how transparent you want it in IE. 00 is totally transparent and 99 is totally opague. The last bit in red is the hexadecimal color. Notice there are 4 parts you need to change. That is because you can make a gradient if you want and I was too lazy to change it. lol

startColorstr=#337b6d63


I may have forgotten a class in there. Let me know if something isn't working.

If you don't want a board/thread highlight color you can just leave that blank in the skins. It does look pretty bad with the semi-transparent forum.

[teers]

It doesn't make it transparent like >.< it only messes with my sidebars.

[Tumbleweed]

Oh I'm so  sorry. You have a V5 forum. No, that won't work at all so remove that please. Actually, I'm currently trying to work that out myself on my own V5 copy and in all honestly, I'm not having any luck so far.  In fact, I'm almost thinking to use semi-transparent images.  If I figure it out, I'll reply back. Did you try posting in the V5 board?

[teers]

Yah, it didn't work.

[Tumbleweed]

Editing (2/4/2013) because I wanted to mention, I'm still trying to work this out. I missing something important so I'd hold off using what I posted until I figure it out. As it stands the opacity would have to be set to 0.0 on many of those, otherwise it is doubling up that 0.2 making things more opague. The layered backgrounds are causing me grief in some instances, like the posts and profile area. Need to find the most simple way using the least amount of classes. I know there is something I'm missing and just can't work it out.


This was posted before my edit above:
All right, I think I have it figured out as seen here:

pai.freemessageboards.com/

The only thing I don't have there is the banner area and I don't have the hover over highlight on boards/threads. I imagine you can fix the highlight in your styles and colors part by not adding in an highlight color, but I've not tried this yet.

Edit: Whoops, looks like I need to find a few more of the classes/id's for the posting page. 

At the very end of your style sheet (Admin > Themes > Colors&Styles > and click the style sheet tab) add this:

/*changing opacity*/
#navigation-menu{
background: rgb(123, 109, 99) transparent;
background: rgba(123, 109, 99, 0.2);
}
#navigation-menu > ul li a.state-active {
background: rgb(123, 109, 99) transparent;
background: rgba(123, 109, 99, 0.2);
}
.container > .title-bar > {
background: rgb(123, 109, 99) transparent;
background: rgba(123, 109, 99, 0.5);
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
.container > .content {
background: rgb(123, 109, 99) transparent;
background: rgba(123, 109, 99, 0.5);
border: 1px solid #000000;
}
div#navigation-tree{
background: rgb(123, 109, 99) transparent;
background: rgba(123, 109, 99, 0.5);
border: 1px solid #000000;
}
.recent-threads-button{
background: rgb(123, 109, 99) transparent;
background: rgba(123, 109, 99, 0.5);
border: 1px solid #000000;
}
div.container.theads{
background: rgb(123, 109, 99) transparent;
background: rgba(123, 109, 99, 0.5);
border: 1px solid #000000;
}
.controls{
background: rgb(123, 109, 99) transparent;
background: rgba(123, 109, 99, 0.5);
border: 1px solid #000000;
}
.container > .control-bar{
background: rgb(123, 109, 99) transparent;
background: rgba(123, 109, 99, 0.5);
border: 1px solid #000000;
}
.container > .title-bar > .controls li a {
background: rgba(123, 109, 99, 0.5);
}

Oh, if you are used to using hex color you can convert them here:
www.javascripter.net/faq/hextorgb.htm

That 0.5 is how transparent you want it. Goes from 0.0 is totally transparent and 0.9 is totally opaque. Notice I added some borders in there. I'll let you play with that and decide if you want to add border, etc.