Semi-transparent style?

[josephu]

I have a mainly transparent theme going on right now with my vbulletin, I have a background image that shows through on most aspects, Ive simply done this by typing transparent in all the color fields, Now Im thinking that semi-transparent would be the way to go, is there an easy way to adjust transparency? You know insteading of typing the rgb code or hex code or "transparent" could I type something else?

[LifesGreatestGift]

Use the following style elements

opacity:0.4; /* For most browsers */
filter:alpha(opacity=40); /* For IE */

You can add this to your elements in their CSS or directly to most elements by adding in

style="opacity:0.4;filter:alpha(opacity=40);"

Examples above are 40% opacity.

[josephu]

Well, I think I need to take a break, Ive been doing this non stop for hours, I cant figure out where and what to achieve the effect I want, I went to stylevars>(whatever) and typed in what you suggested in various variations to no avail. I went to 'edit templates' and couldnt figure it out either. If you have the patience to help me, could you please tell me exactly what and exactly where to type this opacity commands? Ill take a little break and come back to it. thanks

[LifesGreatestGift]

Well, I can help you our a$ much as you need if you'd like.

[josephu]

ok, Im back at it, the background of my artcles is transparent allowing the bodys background image to shine through, I like this effect, I just want to make it a little less transparent to offer a little more distinction between article and background. also Id like to adjust this transparency in a few more areas as well, I know you told me what code to use, but where do I put it? In stylevars under the area I wish to make semi-transparent? (i.e. navbar background)

[LifesGreatestGift]

you'd be better off adding it to additional.css and applying it to the class of the object you want to affect. for example

.navbar {
opacity:0.4; /* For most browsers */
filter:alpha(opacity=40); /* For IE */
}

but change navbar to the object you'd like to affect, and change the opacity to the level you'd like.

[josephu]

So you suggest navigating to additional css, typing the following exactly (assuming I want to apply this effect to "navbar")

.navbar {
opacity:0.4; /* For most browsers */
filter:alpha(opacity=40); /* For IE */
}


- type that exactly?

and then what about other areas? Im not sure on all the names (should I navigate to stylevars just to find out the correct name?) Do I just type for example

.body_background {
opacity:0.4; /* For most browsers */
filter:alpha(opacity=40); /* For IE */
}

to apply this to the bodys background?

each time changing the ".XXXX" to the area I wish to apply this effect to?

[LifesGreatestGift]

You've got the general idea.

You need to download and install Firebug for Firefox so you can see the elements of the page and the different class names so you know what you need to change. I offer personal assistance if you'd like me to take care of it for you. Just send me a PM.

[josephu]

Ok thank you

--------------- Added [DATE]1292801283[/DATE] at [TIME]1292801283[/TIME] ---------------

When I add the opacity code to my additional css, it still doesnt quite work, its just transparent, do I need to navigate to style vars and delete the word "transparent" from the area in wich I intend to apply opacity to? or do I need to supply a base color to make opaque (white maybe)? If I need to supply a color do I do it in additional css in the same "paragraph" as my opacity code

i.e.
.body_background {
background-color:#b0c4de;
""then the opacity code""?

If Im asking for too much information on a free forum, just let me know

[setishock]

You can use translucent filters. I find them all over the net. Couple of friends made some for me that are white and translucent to varying degrees. (The 50 and 75 percent) If you can navigate photoshop or gimp you can make them yourself. Either of those I'm a dud at so please don't ask me. LOL Saydam2 came from a long since abandoned theme that used to be here.
I parked mine in a junk album for testing and used the url the album provides. Once I get it like I want it I move the images to a folder and ftp them up. I just change the url to point to the new location and I'm done.