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

you want to use 'opacity' (and it's varients) to the style pf the area you want effected

	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

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

what is the url?

chrismagwood.ca

I try adding stuff but it goes completely transparent, not semi?

add this to ATO->Add HTML/CSS Inserts/CSS Insert

div#wrapper {
	filter: alpha(opacity=40);
	-moz-opacity:.40;
	opacity:.40;
	}

and see if that is what you want

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

well I played for a while, but I can't get it to work

Oh well.... Thanks for your help !

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.

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.

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:

<div class="transparency"></div><div class="content">

In "footer.php" right after "</table><!-- / layout -->" add:

</div><!-- / content -->

Within the ATA Admin Panel

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

position: relative;
overflow: hidden;

In "Add HTML/CSS Inserts" in the box "CSS Inserts" add:

.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.

Nice solution. But I got another problem: when I make a comment and submitted, the whole header is gone.

How come?