Archived

This topic is now archived and is closed to further replies.

  • 0

Semi-Transparent Content Background

Question

Posted · Report post

Hello,

 

Despite having read a few topics, I can't figure out how to make the content background semi-transparent. If I go to Website Setup in the Pagelines Menu and enter #FFFFFF in the Content Background (optional) setting, it's exactly what I would want, but is totally opaque. I've tried the following code in my Base Child Theme Style.css with and without a color specified in Content Background:

 
#page .content {background: rgba(255, 255, 255, .6);}

 

 
#content .content { background: rgba(255, 255, 255, 0); } 
 
#site .content {
background: rgba(255, 255, 255, 0.6);

 

 

Also, the background image is specified at the page level.

 

Can you help me sort this out? Thanks as always! :-)

Share this post


Link to post
Share on other sites

15 answers to this question

Posted · Report post

Okay, so replace the background-color:white: with background: rgba(255, 255, 255, 0.6);

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

Unfortunately, we're not permitted to provide CSS solutions any longer. 

 

On your homepage, I see nothing but semi-transparency with the Taj Mahal image showing through nicely. 

 

Is the problem the subsequent pages?  As it seems to my limited skills in this area, you're using the same background color and placing opacity levels above it.  If you have a white background and apply a white-semi-transparency over it, the original background will show through, so all you'll see is solid white. 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi - thanks for your response. The transparency for the Taj Mahal image was created in Photoshop, not CSS. I would like for the homepage to look like this, but without a solid background. Can you help? Am I misunderstanding something in the code above?

 

ag-homepage.png

 

Share this post


Link to post
Share on other sites

Posted · Report post

Well, this bit...

#content .content { background: rgba(255, 255, 255, 0); } 

Sets the opacity to none.  So it's a solid white.  Try changing 0 to 0.6

 

Please note that the code you're using is general, site-wide.  It will affect all your posts and pages.

 

You'll need something like .page-id-XX where XX represents the specific numeric value assigned to a post or page by WordPress. You can usually find this on the edit screen of the post or page.  You'd apply something like .page-id-XX as a prefix before the other CSS tags, making sure to change that XX.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks -- I had a typo in my first post and did use 0.6

 

You can see the site now with the code in my Base child theme: http://www.approachguides.com/

 

 
To be clear, am using
#content .content { background: rgba(255, 255, 255, 0.6); } 

 

It doesn't seem to work...any suggestions?

Share this post


Link to post
Share on other sites

Posted · Report post

HI

Clean your cache and refreh I see with firefox and safari

Captura%2520de%2520pantalla%25202012-12-

Share this post


Link to post
Share on other sites

Posted · Report post

Okay, first, transfer the code from the child theme to Dashboard > PageLines > Site Options > Custom Code > CSS Rules.

 

You're using a masthead, so may I presume this may be a LaunchPage? That's a special page and would have its own unique CSS.

Share this post


Link to post
Share on other sites

Posted · Report post

Also, try adding this to the CSS Rules:

.content-pad {
    background-color: white;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Hi - thanks for your help.

I added the code in the Custom CSS (it no longer resides in the child theme). 

#content .content { background: rgba(255, 255, 255, 0.6); }

.content-pad { background-color: white; }

We're back to the same result as when I enter #FFFFFF into the Content Background field under Website settings.

Is there any way to make this transparent? It's okay if it applies to the entire site...

Also, just to be clear, this is a regular page with only Branding, Nav Classic, and Masthead showing.

Thanks :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Doesn't work and it gives me an error:

 

PageLines Custom LESS/CSS error.

parse error: failed at `background-color: background: rgba(255, 255, 255, 0.6); ` line: 833

Share this post


Link to post
Share on other sites

Posted · Report post

Ah! My error. It works!

Share this post


Link to post
Share on other sites

Posted · Report post

For future users, this is the code that ultimately worked for me:

 

 

.content-pad { background: rgba(255, 255, 255, 0.6);
}

Thanks a million, Rob!

Share this post


Link to post
Share on other sites

Posted · Report post

Glad that worked.

 

Happy Holidays!

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi to all.

I would like to set transparent the content bakground.

I followed all your instructions but it doesn't work on my site.

 

I set on Dashboard > PageLines > Site Options > Custom Code > CSS Rules

this code:

 

#content .content { <span class="searchlite">background</span>: rgba(255, 255, 255, 0); }
.content-pad { <span class="searchlite">background</span>: rgba(255, 255, 255, 0);}

 

It works only for the footer area!!

Where I wronged??

Thanks

Share this post


Link to post
Share on other sites