Add opacity to sidebar and content boxes

  • Hi,

    I’m trying to add opacity to my sidebar and content boxes in TwentyFifteen Theme. Basically, so I can just see the background behind the text box. Without affecting the opacity of the text itself.

    I tried a whole bunch of codes in my child theme through trawling google but had no luck so far.

    Could any of you kind people help me?

    https://www.tellauction.com

Viewing 3 replies - 1 through 3 (of 3 total)

  • There is quite a lot to get this right, in my opinion. Firstly, add this code here. Remember to add it into your child theme’s style.css file (it seems like you know this already)

    This will adjust the background so that it covers the whole page and does not repeat which will look ugly when I give you the rest of the code:

    body.custom-background {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

    This next bit will add the opacity to the sidebar that you want (the red bit)

    .sidebar {
  background-color: rgba(255, 255, 255, 0);
}

body::before, .site-header {
  background-color: rgba(217, 79, 79, 0.9);
}

    Finally, this bit of code will adjust the background of the page on the right (the white bit)

    article {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

    I think that is about it, if you copy all 3 bits of code into your child theme’s style.css file, it should work fine.

    Thread Starter tellauction

    (@tellauction)

    You, my good sir are a genius. Worked perfectly.

    Many thanks!!

    Glad to be of help, it looks nice now, well done

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Add opacity to sidebar and content boxes’ is closed to new replies.