How To: Semi-Transparency

[sireesanwar.livejournal.com]

Theme: All
How To: Set the Opacity of an Element (Make a color on your journal appear slightly transparent)

I've often wonder how you would accomplish this look:


Option 1: As it turns out there is a simple way to do this.
Black:
background-color: rgba(0, 0, 0, 0.6) ;
This is based on the RGB color scale so (0, 0, 0) is black. When you add the 0.6 you are adding the transparency. 0.9 is rather dark but 0.1 is super light almost completely transparent.

White:
background-color: rgba(255, 255, 255, 0.6) ;

Red:
background-color: rgba(255, 0, 0, 0.6) ;
To find or customize a color for transparency you can check programs like PhotoShop or Paint Shop and when you have the color for painting they usually give you the numbers for RGB or you can use this RGB Color Chart.

Option 2: Another other option is this:
background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;
The unfortunate part about using this code for the header links is it will also make the text semi-transparent.

Option 3: Using an image background that was created to have an opacity or semi-transparency already built into it. This only works some of the time as some browsers don't support it. The image should be a png. To do this you would want this coding:
background: url(http://i51.tinypic.com/2ds4v49.jpg) repeat;
Below are a black and white semi-transparent image. You can't fully tell here for the white one but it does work.


Option 4: You want complete transparency of an item like the background to the sidebar. Note: The above sidebar is set to transparent but the actual components are not. So under the sidebar coding it we are using the below code:
background-color: transparent !important;
For the components "sbarbody" and "sbarbody2" the background color is set to white.

I hope this helps you in your semi-transparent endeavors.

Comments

[sireesanwar.livejournal.com]

What is the community? Letting me look always helps.

I'm actually thinking some of this transparency isn't what you want... what you want is this...

background-color: transparent !important;

This will remove a background color. Let me know if you need help. I do work on layouts for people on occasion and I just can't stand it when people aren't getting what they want out of LJ. ;-)

[leandralocke.livejournal.com]

Hey :)

I did some more reading on the whole custom CSS thing and tried a few things, but it seems like I can't get any of the edited codes to work in the "custom css" box. So this means I'll have to export the entire style sheet and upload it somewhere? At least that's what I understood from what I read about other editing. Oddly enough it does work with the header code and no external style sheet.

The comm is oceania_rp. Basically I'd want either the "maincontent" or maybe even some other elements transparent so that I can see more of that background.

So first question: do I really have to upload the entire stylesheet somewhere?
And if yes, do I need to adjust all of the classes in it or can I just include those that need changing and LJ will automatically use the rest from the default LJ style?

Thanks for your offer to help already. MUCH appreciated :)

[sireesanwar.livejournal.com]

Did you have a specific layout you were trying to upload or were you just messing with it to see what you could come up with?

I am not sure. It is possible your settings are off somewhere...

Are you looking to do something like this...
http://workshop-rees.livejournal.com/

The sidebar is at the top. I can put it on the side.

[leandralocke.livejournal.com]

Oh my gosh, that looks pretty amazing. I would just need to adjust some of the fonts (i.e. the entry headline) but I'm sure I could figure that out by myself. I actually do like the sidebar on top. Just pondering on which elements to include in it. Would this be something to just paste into the custom css box or something to upload as external style sheet?

When I was trying things earlier I just added the code for the specific class into that box, but nothing changed.

This (http://i43.tinypic.com/2w5sm7r.jpg) is what my settings look like.

Oh btw, THAT pasted code does work. The image is just empty right now. But this one works.

[sireesanwar.livejournal.com]

No problem. You can adjust anything you want. Just be careful not to delete anything but what you want to change because if one ; is missing the whole thing falls apart and it is next to impossible to find. ;-)

So I'm going to upload the coding to that comm workshop_rees because that is where I test stuff.

You are going to want those questions to be Yes, No, No. Then you can copy and paste the code from the comm to your custom stylesheet box and it should work.

[leandralocke.livejournal.com]

Excellent! Thank you so much.

if I do have problems adjusting something I want, can I get back to you? I did find a good overview/tutorial thing, so that should help, but I might get stuck here and there. Like I said, I'm pretty much a total noob.

Also what about the header code that I already have in my box? Will something like this be in the new code as well or can I just add this bit somewhere?

[sireesanwar.livejournal.com]

Just ask me and I'll do my best to help.

It is incorporated.

[sireesanwar.livejournal.com]

I only have the sidebar equipped for links, blurb, and tags in that order. If you want a different set up I'd have to make some adjustments.

[leandralocke.livejournal.com]

I'll have a look first and then get back to you. Though those trhee should actually be sufficient and okay in that order. Thanks :)