Content background transparency

  • Author
    Posts
  • #1555017

    I am using the reddle theme on my blog and want to be able to change the content background from solid white to a transparent version so the background image of the page shows through. I have the Custom design upgrade installed, but cant work out what css syntax I need to change that.

    The blog I need help with is cervezazenith.wordpress.com.

    #1555081

    Hi there, you can do this by using RGB color declaration with an alpha channel transparency. Add the following to your custom CSS. The first three numbers, 255, 255, 255 are RGB value for white, and the last number, 0.7 is the opacity. 1 would be completely opaque and the closer to 0 you get , the more transparent. The first background declaration below is the fallback in case someone comes to your site and their browser does not support RGB alpha opacity.

    #page {
        background: #FFFFFF;
        background: rgba(255, 255, 255, 0.7);
    }
    #1555082

    Perfecto! Thanks so much, that’s brilliant.

    #1555084

    Ok, next question, if I wanted to do the same with the “Navigation and Footer Sidebars”, what syntax would that be? Is there some where I can find a list of these?

    #1555097

    Give the following a try. You can adjust the opacity in #access, #colophon as desired.

    #access, #colophon {
        background: #9B9B96;
        background: rgba(155, 155, 150, 0.6);
    }
    
    #page #supplementary .widget-area, #supplementary {
        background: #9B9B96;
        background: rgba(0, 0, 0, 0);
    }

    If you wish to take away the white background on the facebook like box widget, add the following as well.

    #facebook-likebox-2 iframe {
        background: rgba(0, 0, 0, 0) !important;
    }

The topic ‘Content background transparency’ is closed to new replies.