Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)
-   -   can i make the the container semi transparent? (http://forum.bytesforall.com/showthread.php?t=5050)

jenny Dec 29, 2009 03:05 PM

can i make the the container semi transparent?
 
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

juggledad Dec 29, 2009 03:34 PM

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

jenny Dec 29, 2009 03:52 PM

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

juggledad Dec 29, 2009 04:14 PM

what is the url?

jenny Dec 29, 2009 04:16 PM

chrismagwood.ca

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

juggledad Dec 29, 2009 04:42 PM

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

jenny Dec 29, 2009 04:51 PM

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

juggledad Dec 29, 2009 05:57 PM

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

jenny Dec 29, 2009 06:18 PM

Oh well.... Thanks for your help !

lmilesw Dec 29, 2009 11:42 PM

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.

juggledad Dec 30, 2009 03:39 AM

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.

Rashell Dec 31, 2009 06:22 PM

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.

wll Jan 30, 2010 03:31 AM

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

How come?


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

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