Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

can i make the the container semi transparent?


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Dec 29, 2009, 03:05 PM
jenny
 
9 posts · Dec 2009
I have managed to put an image in the body style. Is it possible to make the "layout container style" and side bars semi- transparent? I tried writing transparent and it worked but i don't know the code for making it semi transparent?

Also is there a website that has all that code stuff so i don;t have to pester you all!

thanks

Jen
  #2  
Old Dec 29, 2009, 03:34 PM
juggledad's Avatar
juggledad
 
21,937 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
you want to use 'opacity' (and it's varients) to the style pf the area you want effected
HTML Code:
	filter: alpha(opacity=40);
	-moz-opacity:.40;
	opacity:.40;
When looking for CSS syntax I just go a google search 'CSS xxxx' where xxxx is the item I want info about
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Dec 29, 2009, 03:52 PM
jenny
 
9 posts · Dec 2009
Hmm. kinda get it? but not working?

right now in the layout container style it looks like:

padding: 0; border: solid 4px #030300; ; background: #EBDF33;

where should i place these and do i use them all?:
filter: alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;

i tried putting "opacity:.40;" in there and it does make it transparent. but it does it to everything including the header image. is here a way to make the command only effect the centre column and maybe the side bars?

thanks again!

Jen
  #4  
Old Dec 29, 2009, 04:14 PM
juggledad's Avatar
juggledad
 
21,937 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
what is the url?
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #5  
Old Dec 29, 2009, 04:16 PM
jenny
 
9 posts · Dec 2009
chrismagwood.ca

I try adding stuff but it goes completely transparent, not semi?
  #6  
Old Dec 29, 2009, 04:42 PM
juggledad's Avatar
juggledad
 
21,937 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
add this to ATO->Add HTML/CSS Inserts/CSS Insert
HTML Code:
div#wrapper {
	filter: alpha(opacity=40);
	-moz-opacity:.40;
	opacity:.40;
	}
and see if that is what you want
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #7  
Old Dec 29, 2009, 04:51 PM
jenny
 
9 posts · Dec 2009
Close. I tried it. But it made the header transparent also. I would like the header to stay solid and the body go transparent.

Jen

I
  #8  
Old Dec 29, 2009, 05:57 PM
juggledad's Avatar
juggledad
 
21,937 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
well I played for a while, but I can't get it to work
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #9  
Old Dec 29, 2009, 06:18 PM
jenny
 
9 posts · Dec 2009
Oh well.... Thanks for your help !
  #10  
Old Dec 29, 2009, 11:42 PM
lmilesw's Avatar
lmilesw
 
10,047 posts · Jul 2009
Central New York State USA
The way I used to make a semi transparent background was to create a 4px square gif image with 2 clear and 2 black pixels. Then you just tile this on the background and you will have 50% transparency. I have attached a 200px square so you can see what it looks like and a 4px square png file you could use if you care to try it.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by lmilesw; Sep 1, 2013 at 02:14 PM.
  #11  
Old Dec 30, 2009, 03:39 AM
juggledad's Avatar
juggledad
 
21,937 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
lmilesw - what she want's here is to lay down an image, then have the page transparent except for teh header area. The problem is with the box model of CSS - you have a
body
wrapper
container
table
tr/td/header
div/div/div <- stuff in the header
tr/tdheader
tr/middle
tr/middle
tr/footer
tr/footer
table
container
wrapper
body
it seems that if you give an element, say the container, opacity, then all the elements inside it are opaqued by that amount. ie, set container 'opacity: .40; then the header will also be opaqued by that amount - you can still opaque the header, but you start at 40% opaqued already, so your range goes from 40% to 100%.

She might be able to do what she wants by having the image on the container, then an image in the header with it fully opaque, then background colorss on the middle and footer and make them opaque.
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jan 1, 2010 at 05:03 AM.
  #12  
Old Dec 31, 2009, 06:22 PM
Rashell's Avatar
Rashell
 
67 posts · May 2009
You can try this. It makes the background for the body container semi-transparent while all the other elements are opaque. It won't lighten your sidebar so I'm not sure if it'll get you where you want to go...

In your source files


In your "header.php" right after "<div id="container">" add:

Code:
<div class="transparency"></div><div class="content">
In "footer.php" right after "</table><!-- / layout -->" add:

Code:
</div><!-- / content -->

Within the ATA Admin Panel


In "Style & Configure Layout" in the box "Layout Container Style" add:

Code:
position: relative;
overflow: hidden;
In "Add HTML/CSS Inserts" in the box "CSS Inserts" add:

Code:
.transparency  {  
     opacity:0.5;  
     filter:alpha(opacity=50);  
     -moz-opacity:0.5;  
     background-color:#ffffff;  
     width:1024px;  
     height:15000px;  
     position:absolute;  
     top:0px;  
     left:0px;  
     z-index:-1;  
}  
   
.content  { position:relative; }
leave the "position & z-index" statements alone. You can configure the others to suit your needs.

Last edited by Rashell; Dec 31, 2009 at 06:28 PM.
  #13  
Old Jan 30, 2010, 03:31 AM
wll
 
12 posts · Jan 2010
Nice solution. But I got another problem: when I make a comment and submitted, the whole header is gone.

How come?

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Making Page Menu Bar transparent? Hedgie Page & Category Menu Bars 10 May 19, 2014 06:28 AM
[SOLVED] Transparent page menu - none of the threads work for me.. maguai Page & Category Menu Bars 1 Jul 27, 2009 11:04 AM
Transparent Menu Item Instead of A Background Color oz1 Page & Category Menu Bars 1 Jun 29, 2009 05:19 AM
Tranparent GIF image not showing as transparent in table chrisgare Atahualpa 3 Wordpress theme 1 Apr 16, 2009 04:03 PM
HELP! How do I make the HEADER area transparent? Whatsthatcat? Header configuration & styling 1 Mar 30, 2009 05:07 PM


All times are GMT -6. The time now is 05:52 AM.


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