Jump to content


Photo
- - - - -

Semi-Transparent Content Background


Best Answer Rob , 23 December 2012 - 09:20 PM

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

Go to the full post


  • Please log in to reply
15 replies to this topic

#1 raezerj

raezerj

    Advanced Member

  • Members
  • 81 posts
  • Country: Country Flag

Posted 23 December 2012 - 07:23 PM

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



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 December 2012 - 07:45 PM

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. 



#3 raezerj

raezerj

    Advanced Member

  • Members
  • 81 posts
  • Country: Country Flag

Posted 23 December 2012 - 08:16 PM

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

 


#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 December 2012 - 08:23 PM

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.



#5 raezerj

raezerj

    Advanced Member

  • Members
  • 81 posts
  • Country: Country Flag

Posted 23 December 2012 - 08:44 PM

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?



#6 batman

batman

    Bat Learning

  • Members

  • 2165 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 23 December 2012 - 08:47 PM

HI

Clean your cache and refreh I see with firefox and safari

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



#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 December 2012 - 08:51 PM

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.



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 December 2012 - 08:53 PM

Also, try adding this to the CSS Rules:

Please Login or Register to see this Hidden Content



#9 raezerj

raezerj

    Advanced Member

  • Members
  • 81 posts
  • Country: Country Flag

Posted 23 December 2012 - 09:10 PM

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



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 December 2012 - 09:20 PM   Best Answer

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



#11 raezerj

raezerj

    Advanced Member

  • Members
  • 81 posts
  • Country: Country Flag

Posted 23 December 2012 - 09:23 PM

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



#12 raezerj

raezerj

    Advanced Member

  • Members
  • 81 posts
  • Country: Country Flag

Posted 23 December 2012 - 09:25 PM

Ah! My error. It works!



#13 raezerj

raezerj

    Advanced Member

  • Members
  • 81 posts
  • Country: Country Flag

Posted 23 December 2012 - 09:28 PM

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!



#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 December 2012 - 09:31 PM

Glad that worked.

 

Happy Holidays!


  • raezerj likes this

#15 benz_admin

benz_admin

    Advanced Member

  • Members
  • 65 posts
  • Country: Country Flag

Posted 05 February 2013 - 05:39 PM

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



#16 benz_admin

benz_admin

    Advanced Member

  • Members
  • 65 posts
  • Country: Country Flag

Posted 05 February 2013 - 05:58 PM

i forgot the link of the page....

 

Please Login or Register to see this Hidden Content