Override #page.hfeed.site to make content appear not opaque

  • So I have my page set up mostly how I want (the main page anyway) – I figured out how to give the main content area and wrapper a cool opaque look. I did this with the #page.hfeed.site selector. I like the way that this looks for the most part but I would like to remove the opacity from the content of the actual posts if I can. I am wondering if there is a selector that I can use to over ride the settings for that portion of the page – I have tried .entry-content img, #content, #content-entry and nothing seems to work. I tried to make each individual part of the page opaque but I didn’t have much success – #page.hfeed.site seems to be the only one that makes it look (almost) how I want.
    this is a page you can look at: https://www.daily-mash.com/wordpress2/category/photos/

    and this is the css I have set up so far:
    /*
    Theme Name: Childtheme
    Description: Child theme for the TwentyTwelve theme
    Theme URI: https://www.www.ads-software.com
    Author: Riley Betka
    Author URI: https://www.daily-mash.com/
    Template: twentytwelve
    version: .1
    */
    @import url(“../twentytwelve/style.css”);
    #page.hfeed.site{
    background:#000;
    opacity:0.6;
    filter:alpha(opacity=60);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding:4px 12px;
    }

    Actually if there is a way that I can make just the images that I post not opaque that would be ideal.

    on a side note – does anyone know of a good place that has a list of all the selectors and what they actually apply to? I can’t seem to find a good place for this – thank you in advance for your help! Appreciate it!

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

  • You are doing it wrong making the whole content opacity less than 1.

    What you really want to do is to give the transparency to the background of the content like this

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

    The use of rgba allows you to have color with transparency applied to it and it’s all adjustable.

    ..a good place that has a list of all the selectors and what they actually apply to?

    There is no need for the list and the list will never happen because each site is different. What we need is the tool to figure it out, it’s available for most modern user under F12. Lots of folk use Firebug extension of Firefox.

    Thread Starter rileybetka

    (@rileybetka)

    That completely removed the color and the opacity from the place where I wanted it…

    /*
    Theme Name: Childtheme
    Description: Child theme for the TwentyTwelve theme
    Theme URI: https://www.www.ads-software.com
    Author: Riley Betka
    Author URI: https://www.daily-mash.com/
    Template: twentytwelve
    version: .1
    */
    @import url(“../twentytwelve/style.css”);
    .site {background-color: rgba(0, 0, 0, 0.6);}

    I have tried the rgba thing on some other elements and it never seems to work

    what browser you tested on ?

    Thread Starter rileybetka

    (@rileybetka)

    for some reason none of the ones that I use the . with make any changes. I have been using the web developer tool in Chrome to help identify which selector to use for which portion of the site but I haven’t had much luck with those . ones – even when chrome displays them that way

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Bottom line – Don’t use CSS opacity for translucency.

    It’s only worth using CSS opacity for elements that have no child elements, otherwise the child elements will inherit the opacity.

    Instead, use a background image with the opacity you want. Then apply, in CSS, the background image to the element you want. The image need only be 1px by 1px in dimension.

    Thread Starter rileybetka

    (@rileybetka)

    So I figured out how to make the content part non-opaque – the problem is that when I add in the #page.hfeed.site or div#main-wrapper selectors – they take presidence over the #div.entry-content that I have set up – is there a way to define which rules take priority over the others?? Thanks for the help!

    You are doing it wrong making the whole content opacity less than 1.

    Thread Starter rileybetka

    (@rileybetka)

    the background thing makes sense – I will try that – thanks for the help!

    Thread Starter rileybetka

    (@rileybetka)

    Do jpgs store opacity settings and show up see-through if you set the opacity in something like photoshop?? I had no idea they would actually appear opaque on a website…

    Thread Starter rileybetka

    (@rileybetka)

    Thanks Andrew – I was able to achieve what I wanted by using opaque pngs for the background using the following css

    div#page.hfeed.site{
    background-color: transparent;
    background-image: url(‘https://www.daily-mash.com/wordpress2/wp-content/uploads/opaqueblack.png’);
    background-repeat: repeat;
    }
    div.entry-content {
    background-color: transparent;
    background-image: url(‘https://www.daily-mash.com/wordpress2/wp-content/uploads/opaqueblack3.png’);
    background-repeat: repeat;
    }

    just thought I would post that in case anyone else needed help! Thanks again!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Override #page.hfeed.site to make content appear not opaque’ is closed to new replies.