Confit Post, Page, and Sidebar Transparency

  • Author
    Posts
  • #1401204

    analyticspro
    Member

    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.

    https://en.forums.wordpress.com/topic/tagline-and-quotations-are-too-light-in-color-how-do-i-change-them-confit

    #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 http://clsanalytics.wordpress.com/ . I have CSS customization on my ‘real’ site.

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

    #1401312

    mrdirby
    Member

    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);
    }

    #1401361

    analyticspro
    Member

    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:

    .site-content.page-id-1

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

    #1401362

    mrdirby
    Member

    So you are saying this example isn’t working?

    .site-content.page-id-1 #page:before { }

    What are you trying to do exactly?

    #1401370

    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 :)

    #1401393

    analyticspro
    Member

    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.

    #1401399

    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:

    page-id-35

    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.

    #1401406

    analyticspro
    Member

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

    #1401407

    You are welcome.

The topic ‘Confit Post, Page, and Sidebar Transparency’ is closed to new replies.