This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Replies

14
  1. Andre Rump 11 years, 9 months ago

    So I found out that adding following lines to the custom-css makes the whole page area transparent. But also the content. Where or how can I specify the command for only the background?

    #main {
    zoom: 1;
    opacity: 0.1;
    }

  2. Andrew Misplon Staff 11 years, 9 months ago

    Hi Andre. Using RGBA is the way to go here:

    /* Vantage Boxed Layout Set Page Opacity */

#main {
background: rgba(200, 54, 54, 0.5); 
padding: 35px;
}

    Insert the above into Appearance > Custom CSS and change the first three numbers to your RGB values and then change 0.5 to whatever opacity you want.

  3. Andre Rump 11 years, 9 months ago

    Thank you for the fast reply!
    I did as you said but nothing changed. I can’t even change the color using this.. Is it possible that some parts of the CSS are blocked for the custom-css?

  4. Andre Rump 11 years, 9 months ago

    I created a transparent image as background. Effect is that the selected page color is behind the transparent image instead of the overall background. Is it possible to remove the page-background color attribute?

  5. Andrew Misplon Staff 11 years, 9 months ago

    Not that I know of. Setting the opacity of the main container, the method your originally tried has the issue of also changing the opacity of all the elements in that container. So the next solution is the one I sent through.

    With regards to your first reply, you can change the color of the Custom CSS I sent. 200, 54, 54 is the color value and 0.5 is the opacity. Using Photoshop or a color tool you can get the RGB color value. Alternatively send me the color and a link to your site and I’ll check it out.

  6. Andre Rump 11 years, 9 months ago

    This is the site: http://www.mankindsdead.com/news/

    The background is plain white (#ffffff), I put this in the custom-css:

    #main {
    background: rgba(255, 255, 255, 0.5);
    padding: 35px;
    }

  7. Andrew Misplon Staff 11 years, 9 months ago

    Try this:

    /* Vantage Boxed Layout Set Page Opacity */

#main {
background: rgba(255, 255, 255, 0.5) !important;
padding: 35px;
}
  8. Andre Rump 11 years, 9 months ago

    works perfectly, thanks a lot!

  9. Andrew Misplon Staff 11 years, 9 months ago

    Super, glad we could help.

  10. Andy Teel 11 years, 5 months ago

    how could one fake the effect of the page opacity showing the background image with slight blur.

  11. immsdk 11 years, 3 months ago

    Hi,

    I’m not on premium, since I’m out of money. But the shortcode works well, But (!!!!) the header area is not transparent.
    Only the background below the menu, not the header-menu area.

    How to work that out?

  12. immsdk 11 years, 3 months ago

    Found solution:

    https://siteorigin.com/thread/transparent-menu-bar-background-body-visible/

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread