Jump to content
raezerj

Semi-Transparent Content Background

Recommended Posts

raezerj    0
raezerj

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
Rob    547
Rob

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. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
raezerj    0
raezerj

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
raezerj    0
raezerj

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
batman    389
batman

HI

Clean your cache and refreh I see with firefox and safari

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


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

Also, try adding this to the CSS Rules:

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

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
raezerj    0
raezerj

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
raezerj    0
raezerj

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
raezerj    0
raezerj

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
Rob    547
Rob

Glad that worked.

 

Happy Holidays!

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
benz_admin    0
benz_admin

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×