Need help? Check out our Support site, then

Confit Post, Page, and Sidebar Transparency

  1. I want to make the sidebar and post and page text areas more opaque. I found this post about changing the transparency of the site description and block quote text.

    #masthead .site-description, .entry-content blockquote {
    opacity: 0.9;

    I have used "inspect element" to try to find the right areas to which to apply the code, but have not been able to do so. I need help figuring out how to apply the code to the sidebar and page/post text areas.

    I am using test blog . I have CSS customization on my 'real' site.

    The blog I need help with is

  2. Hi, try this.

    For the article area. That last number "0.95", 1 would represent no opacity. Try playing with it to get the effect you want.

    .site-content article {
    background-color: rgba(255,255,255,0.95);

    Same thing for the sidebar.

    #page:before {
    background-color: rgba(255,255,255,0.95);
  3. Thanks mrdirby, this works great.

    Do you know if it is possible to address the sidebar code to a single page? I was able to point the site-content code to a particular page by adding the page ID:

    I could not get something similar to work for the sidebar.

  4. So you are saying this example isn't working? #page:before { }

    What are you trying to do exactly?

  5. fabianapsimoes

    Hey @analyticspro,

    Here goes an example of how to do it:

    .page-id-25 #secondary {
        color: red;

    The CSS in this example makes the text in the sidebar red, only for the "Contact" page. Observe that, in the Confit theme, the sidebar has both the actual sidebar and the header. Depending on what you want to do, it might be that you'll have to target more than just "#secondary". You may also use the ":before" pseudo-element that @mrdirby pointed out, for example:

    .page-id-25 #page:before {
        background: red;

    This will make the whole sidebar red in the "Contact" page. Hope this helps you :)

  6. Mrdirby - Initially, I was trying to set the transparency of the sidebar and article sections for the site overall. After seeing your code, I wanted to set the background color of the sidebar and article depending on the page. I got it working for the article, but not the sidebar. Thanks again for your help.

    Thanks fabianapsimoes, that works for the sidebar.

  7. If you are talking about the grey band down the left side of the site under the site title and widgets, you will need to do something like this:

    .page-id-25 #page:before {
    background-color: rgba(102, 255, 102, 0.95);

    You have to target the pages you want to change the color on by page id class, and you find that by visiting the page in your browser, then view the source code and in the opening body selector, you will find something like this:


    Precede that with a period ( . ) in the CSS and pattern it after the above. In the color declaration, the first three numbers (102, 255, 102) are the RGB color numbers, and the last number (0.95) is the opacity. 1 is completely opaque (solid). The smaller the number the more transparent the color.

  8. Thanks once again for your help with my site, Sacred Path.

  9. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic