transparency

Any questions about styling and customising the layout, changing the number of columns, changing the number of sliding images and so on.

transparency

Postby urs » Fri Jan 06, 2012 8:57 pm

So I fixed the background on my sliding door theme with a custom image and i fixed the image so when you scroll all the other stuff on top moves only. is there a way to make the scrolling "window" part transparent so i can see my background image a little bit?
urs
I'm a regular
 
Posts: 5
Joined: Fri Jan 06, 2012 8:53 pm

Re: transparency

Postby haninnka » Tue Jan 10, 2012 8:12 pm

Hi,
this topic is disscused here http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ and here http://lea.verou.me/rgba.php/ . I used for my website dennisworship.com the rgba option
Code: Select all
background: rgba(0, 0, 0, 0.5)

the first three numbers are for the RGB color and the forth number is for transparency. But not all browsers support that so there should be a fallback option.
Code: Select all
background: #000;
background: rgba(0, 0, 0, 0.5);

good luck :)
haninnka
I'm new here
 
Posts: 3
Joined: Sun Nov 27, 2011 4:36 pm

Re: transparency

Postby Chevrock » Fri Feb 03, 2012 1:48 pm

Please help, I am new to working with css. I get the function of the code

background: #000;
background: rgba(0, 0, 0, 0.5);

I simply do not get where to place the code on my style sheet.
Chevrock
I'm a regular
 
Posts: 6
Joined: Tue Jan 31, 2012 11:53 pm

Re: transparency

Postby urs » Thu Apr 05, 2012 8:43 pm

I agree with Chevrock, i can't figure out where to place the code....
urs
I'm a regular
 
Posts: 5
Joined: Fri Jan 06, 2012 8:53 pm

Re: transparency

Postby urs » Thu Apr 05, 2012 10:03 pm

ok guys, with the above information i came up with how to make the background transparent....go to your style.css file and scroll down to the "Structure" section. A few lines below that, you will find a "#wrapper" heading. Under the wrapper heading you will see this:

#wrapper {
margin-top: 20px;
padding: 0 20px;
position: relative;
background: #000;

replace the above with this:

#wrapper {
margin-top: 20px;
padding: 0 20px;
position: relative;
background: #000;
background: rgba(0, 0, 0, 0.7);

You can adjust the 4th value on the last line to change the amount of transparency....I used 0.7 and it looked great. My website is www.upperroomstudios.org.
urs
I'm a regular
 
Posts: 5
Joined: Fri Jan 06, 2012 8:53 pm

Re: transparency

Postby Chevrock » Sun Sep 23, 2012 3:09 pm

replace the above with this:

#wrapper {
margin-top: 20px;
padding: 0 20px;
position: relative;
background: #000;
background: rgba(0, 0, 0, 0.7);


I have not be able to get this to work with 3.0.8. Any suggestions?
Chevrock
I'm a regular
 
Posts: 6
Joined: Tue Jan 31, 2012 11:53 pm

Re: transparency

Postby wayne » Wed Oct 03, 2012 1:24 pm

nice
wayne
Site Admin
 
Posts: 727
Joined: Tue Apr 08, 2008 7:02 pm

Re: transparency

Postby vladan » Sat Oct 13, 2012 1:48 am

Hi,

Would there be something else I'm missing (sorry just a beginner). These codes don't change anything on my page???
Cheers,
Vladan
vladan
I'm new here
 
Posts: 2
Joined: Sat Oct 13, 2012 1:46 am

Re: transparency

Postby vladan » Sat Oct 13, 2012 4:03 am

Hi,
My text looks like this, doesn't have last 2 lines as per your example???
is that wrong

#wrapper {
margin-top: 20px;
padding: 0 20px;
position: relative;

cheers,
Vladan
vladan
I'm new here
 
Posts: 2
Joined: Sat Oct 13, 2012 1:46 am

Re: transparency

Postby aband » Thu Oct 18, 2012 3:10 pm

Ok so I have to admit, being an amateur, I didnt create a 'child theme' page. So i made my changes to the site and loved them and then today I updated the new Sliding doors update and bang...the transparancy and the colour I had applied etc has gone.....annoying, but silly of me! So I cut and paste the code on this discussion again, like last time, but this time it doesn't change the white solid background that has appeared, just like others have said, the wrapper code doesnt seem to affect the background colour or transparancy on 3.0.8......HELP! My site is looking under the weather.....
aband
I'm new here
 
Posts: 1
Joined: Thu Oct 18, 2012 3:05 pm

Next

Return to Advanced - Customising the theme