TwentyFourteen Make Contant-background and Sibear Semi-transparent

  • Hi how do I make the twentyfourteen theme give me a transparent content-background (not transparent content), and also do the same for the side bar. basicaly I want to have a colorful grpahic background that can be seen behind everything.

    I tried this:

    /*You can make a transparent background color only for CONTENT background by using rgba color value in CSS rather than using opacity.
    RGBA stands for Red, Green, Blue, Alpha Channel.
    The first step. You have to find the id or class CSS selector of your content background element.
    If your content background is declared as <div class=”content”> then in your style.css, try to do this :
    It’ll make the background color has opacity 70%, but the contents inside (text and images) are still at 100%.*/

    div.page{
    background-color: rgba(0.7, 0.7, 0.7, 0.7);
    /* rgb = 0 0 0 is black color */
    /* a = 0.7 is 70% of alpha channel */
    }

    and even changed the div ID to “main-content” and again to “page”, but it didn’t work.

    This is what I want:

    It’ll make the background color has opacity 70%, but the contents inside (text and images) are still at 100%.

Viewing 4 replies - 1 through 4 (of 4 total)
  • bs-2010

    (@bradenschlueter)

    I’m also trying to achieve this effect. The only things I’ve been able to do have turned down the opacity for everything on the page instead of just the background. Any help would be great.

    Nick Halsey

    (@celloexpressions)

    Using background-color will work, but you’ll need to set it on every element that has a background color for it to work.

    With Twenty Fourteen, you can use:

    .site {
background-color: rgba(255,255,255,.7);
}

    as a start. That should make all of the white content margins semi-transparent. For the left sidebar, you could try:

    .site:before {
    background-color: rgba(0,0,0,.7);
}

    Note that there are several problems with the code that you pasted.

    hi nick, I’m having a similar problem
    Im trying to change the opacity of the sidebar… i don’t want it 100 percent transparent but would like to still see the color of the sidebar while being able to see my themes background image. can you help??
    thanks

    – isaiahinsomnia.com

    I am having the same problem but I am completely new to WordPress and CSS. Would someone mind giving me step by step instructions on what to put and where? I have managed to set up a child theme for twentyfourteen theme. Here is my website https://www.michaelstarkey.net Thanks so much for your time and assistance!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘TwentyFourteen Make Contant-background and Sibear Semi-transparent’ is closed to new replies.