Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] Change Center Column & Footer Opacity


  #1  
Old Sep 23, 2009, 12:59 PM
Walt
 
20 posts · Sep 2009
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
  #2  
Old Sep 24, 2009, 04:03 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
HTML Code:
<div id='mycenter'>
next go to the section 'Content BELOW the LOOP' and add the following AS THE FIRST LINE
HTML Code:
<div id='mycenter'>
next go to ATO->Add HTML/CSS Inserts->CSS Inserts and add the following
HTML Code:
div#mycenter {
	filter:alpha(opacity=60);
       -moz-opacity:.60;
	opacity:0.6;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Sep 25, 2009 at 02:38 AM. Reason: fixed typo in code
  #3  
Old Sep 24, 2009, 07:59 AM
Walt
 
20 posts · Sep 2009
@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.
  #4  
Old Sep 24, 2009, 12:32 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
That's what I thought you wanted, which is why I first suggested you change the background's of the areas involved to transparent
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Sep 24, 2009, 02:04 PM
Walt
 
20 posts · Sep 2009
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.
  #6  
Old Sep 24, 2009, 05:42 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Sep 24, 2009, 07:44 PM
Walt
 
20 posts · Sep 2009
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.
  #8  
Old Sep 25, 2009, 04:16 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Sep 25, 2009, 06:26 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
  #10  
Old Sep 26, 2009, 11:04 AM
Walt
 
20 posts · Sep 2009
The PNG's worked perfectly for me.

Its probably safe to close this thread.

Bookmarks

Tags
center column, footer, opacity

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Style & edit center column with sorted posts by category calutateo Plugins & Atahualpa 0 Aug 14, 2009 10:43 AM
Change padding on bullet list in center column? lhanft Forum How-To 2 Jul 16, 2009 08:51 PM
[SOLVED] Change footer background on &quot;Page&quot; pages only Unca_Tim Post-Kicker, -Byline & -Footer 22 Jun 4, 2009 12:45 PM
[SOLVED] How to change 3 column to 2 column blog vots Atahualpa 3 Wordpress theme 3 May 4, 2009 03:58 PM
Center Column chiaxiong Atahualpa 3 Wordpress theme 1 Apr 8, 2009 06:28 PM


All times are GMT -6. The time now is 02:49 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.