How to make sidebar semi-transparent

Hi Kai,

Thanks for choosing Author!

That can be done with the following CSS:

.main-sidebar {
  background: rgba(0,0,0,0.5);
}

Copy and paste that code into the “Custom CSS” section in the Customizer (Appearance > Customize). Once added there, it should take affect right away.

Please note that making the sidebar’s background semi-transparent won’t have any obvious visual effect unless there is something else behind it to show that it is semi-transparent.

Cool! Thank you very much ! You guys are awesome! Resolved ??
Love your theme!

now one more question – how can i do that to white background of the pages/posts? Would you like me to start a new post for that?

<<sorry totally css clueless

You’re welcome, glad you like the theme ??

I’ll just post the answer here. This is the CSS you can use to make the Post/Page content background semi-transparent:

.entry article {
  background: rgba(255,255,255,0.5);
}

The background value says that the red, green, and blue values should all be the maximum 255, which makes it white. The final value (“a” for “alpha”) defines the opacity on a scale of 0-1. I’ve set it at 0.5, but you can change it to whatever value you’d like.

If you’re interested in trying some more CSS with Author, we have a growing library of CSS snippets you can copy and paste to customize your site you can find here: https://www.competethemes.com/help/author-css-snippets/

Hi Ben! Thanks for the quick replies, but the sidebar seems not to be working right ?? Page transparency works perfectly however.

I could have swore it worked for a while, but now it becomes semi-trsnsperent only in a smaller resided window when it moves to the top like mobile. here is the link

levadostudios.com

Ive deleted cache and tried on multiple PCs and it still comes back as solid
?? any suggestions?

Thank you !!!

The way the main background image is added, it only shows behind the main content area. In other words, the image isn’t behind the sidebar. Instead, there’s a gray background that is the same color as the sidebar behind it, which is why the transparency creates no discernible difference.

Here’s a quick vid to show how that works: https://pics.competethemes.com/2j0z1M2s2N2C

All that needs to be done is to reposition the main background, so it always shows behind the sidebar. That can be done with the following CSS:

#main-bg-image {
  left: 0 !important;
}

You are Epic!!! Resolved ! Thank you so much !

Haha no problem ??