WordPress.org

Ready to get started?Download WordPress

Forums

Override #page.hfeed.site to make content appear not opaque (12 posts)

  1. rileybetka
    Member
    Posted 1 year ago #

    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: http://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: http://www.wordpress.org
    Author: Riley Betka
    Author URI: http://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!

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    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.

  3. paulwpxp
    Font hero
    Posted 1 year ago #

    ..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.

  4. rileybetka
    Member
    Posted 1 year ago #

    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: http://www.wordpress.org
    Author: Riley Betka
    Author URI: http://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

  5. paulwpxp
    Font hero
    Posted 1 year ago #

    what browser you tested on ?

  6. rileybetka
    Member
    Posted 1 year ago #

    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

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  8. rileybetka
    Member
    Posted 1 year ago #

    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!

  9. paulwpxp
    Font hero
    Posted 1 year ago #

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

  10. rileybetka
    Member
    Posted 1 year ago #

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

  11. rileybetka
    Member
    Posted 1 year ago #

    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...

  12. rileybetka
    Member
    Posted 1 year ago #

    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('http://www.daily-mash.com/wordpress2/wp-content/uploads/opaqueblack.png');
    background-repeat: repeat;
    }
    div.entry-content {
    background-color: transparent;
    background-image: url('http://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!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.