By METZGERR on

Cheerio folks,

I'm styling on my new theme and want to add some opacity (=transparency) to the text-area via CSS to my background.

Maybe I'm just not seeing the wood for the trees - or it's because it's 3am...

Take a look here: http://presscut.org.www80.your-server.de/2008/contact

The corresponding CSS extracts:

#content 
{
	width: 510px;
	margin: 0 0 0 160px;
	float: left;
	padding-left: 10px;
	background: #fff;
	position:relative;
	-moz-opacity:0.2; -khtml-opacity:0.2; opacity:0.2;
	filter:alpha(opacity=20);
}

and

.node .content{
	color: #000;
	padding: 5px;
	padding-left:0px;
	text-align: left;	
	opacity: 1;
	filter: alpha(opacity=100);
}

Hope you guys can help me,
thanks in advance!

/oliver

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

Since you have CSS caching enabled (not a good thing when developing the theme/look) you need to clear the Drupal CSS cache.

METZGERR’s picture

METZGERR commented

Optimize CSS files: if enabled my bg is not shown, however the opacity is still there

nevets’s picture

nevets commented

Looking closer it looks like the opacity is working (at least as seen in style.css). Not sure what you expect to be different, one issue might be that .node .content has no background color (it's transparent).

METZGERR’s picture

METZGERR commented

well, my fault - i didnt adress my problem right: the opacity IS working, however I do not want to have the text getting transparent as well... it isnt readable atm.

--> I just want to have the bg transparent NOT the text.

Thanks!

drooppi’s picture

drooppi commented

Seems like you're really applying the opacity to your text / the whole content. Create a different CSS instruction for background in your theme's CSS-file or look for it (there might already be one, edit appropriately).

drooppi

unxposed’s picture

unxposed commented

The opacity is being applied to everything inside the area you've applied opacity to, which makes sense.... Maybe you should use a transparent png that repeats as the background image. That's what I'd do.

METZGERR’s picture

METZGERR commented

solved it now with edited background, not the coolest way but still - it works now ;)

xabooth’s picture

xabooth commented

Ah, basically the way the works is anything below the background will have the same 20% opacity. I've worked around this by absolutely positioning another div below the content that I wanted transparent. I just recently used this on my blog www.xalking.com on the navigation.
It might not be ideal for large amounts of text, as it would have to scale, might take some tweaking to work well with that, but otherwise your css is fine :)
- Alexa -