[SOLVED] Change Center Column & Footer Opacity
 

I'm trying to get the center column background color & Footer background color to have a opacity quality so the main wallpaper background image will show through.

Any ideas?

Kinda like this site; http://www.twelve-restaurant.co.uk

If you want the main background to show thru, set the background color to 'transparend' in all the locations that cover the background (i.e. post styling, center styling etc) If you want to make the center area have an opacity, you can do the following

Go to ATO->Style & edit CENTER COLUMN and in the section 'Content ABOVE the LOOP' add the following at the very end
next go to the section 'Content BELOW the LOOP' and add the following AS THE FIRST LINE
next go to ATO->Add HTML/CSS Inserts->CSS Inserts and add the following

@Juggledad

Almost perfect. The only problem is that it changes the opacity of the content in the center column, I need the background of the center column to have an opacity, while keeping the content at 100%.

Also, minor typo in your code.

div#mycventer {
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:0.6;
}


Thanks for helping me with this.

That's what I thought you wanted, which is why I first suggested you change the background's of the areas involved to transparent

The code changes everything in the center column to have the same opacity (ex. 60%).

I need the posts to be solid, no opacity.

and the background (ex. background: #d9d9d9;) to have an opacity.

The code that you wrote changes both the Background and Post Content to have the same opacity.

Sorry, I guess I wasn't clear in my original post.

Walt, the two suggestions were an eithor/or not both.

Let me see if I can rephrase the issue - you want to have a background image on the page. You want the image to be opaque under the center column and under the footer but 'full strength' behing teh sidebars.

Is that right?

(Remember, you will want an image that can repear if the page is taller than the image)

I think I'm confusing you. Let me start over.

No sidebars are being used.

I'm using pages.

layout width 100% with MIN width 800 and max width 1100.

I have a background image for the entire site that spans the browser window.
(ex;background: url(/wp-content/themes/atahualpa/images/tile-gray2.jpg) repeat top left;

I have a background color for the CENTER COLUMN ex#d9d9d9, this is what I want to have an opacity of 60%. Only the solid background color.

the same with the footer...

I have a background color for the FOOTER STYLE ex#d9d9d9, this is what I want to have an opacity of 60%. Only the solid background color.

What I dont want is the content in the Center Column & Footer (Type, Photos, Video) to have a 60% value, these need to be 100%.

This is another good example: http://singularityconcepts.com

See how the column backgrounds are transparent but the photos and type are solid. Thats the style I'm trying to achieve.

Sorry for the confusion and thanks for the patience.

Ah HA! they pulled off a clever hack. What they have done is used background images for the center area that are PNG's and the image itself is transparent. This will not work for a JPG and it may not work on all browsers. You will have to set the transparency in an image editing program.

Other than this, there isn't a way in CSS to do what you want (as far as I know). The page is a table with three rows: Header, Center and Footer.
The Center is made up of of a series of <div>'s each which can have several <div>'s within it (there is a <div> for the post, then one for the post header, the post kicker, the post itself and the post footer) and each of these areas can have settings.

The opacity setting is cumulative starting at hte innermose element and ending with the outermost, or put another way, a opacity on the outer div effects all the elements inside it.

Yes I think PNG's are required for this. For the effect that everyone wants (opacity in the background but none in the foreground) CSS alone appears to be useless

The PNG's worked perfectly for me.

Its probably safe to close this thread.