15 replies to this topic

[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! :-)

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

[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?

 

 

[Rob]

Well, this bit...

Please Login or Register to see this Hidden Content

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.

[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: 

Please Login or Register to see this Hidden Content

 

 

To be clear, am using

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

 

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

[batman]

HI

Clean your cache and refreh I see with firefox and safari

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

[Rob]

Also, try adding this to the CSS Rules:

Please Login or Register to see this Hidden Content

[raezerj]

Hi - thanks for your help.

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

Please Login or Register to see this Hidden Content

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 :-)

[Rob]

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

[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

[raezerj]

Ah! My error. It works!

[raezerj]

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

 

 

Please Login or Register to see this Hidden Content

Thanks a million, Rob!

[Rob]

Glad that worked.

 

Happy Holidays!

[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

[benz_admin]

i forgot the link of the page....

 

Please Login or Register to see this Hidden Content