WordPress.org

Forums

Pinboard
backgrounds transparent? (8 posts)

  1. djsteveb
    Member
    Posted 1 year ago #

    I am wanting to make the post, body, header - just about all backgrounds transparent. I took the time to make a child them file, and copied just about all the background blocks over - making some color:none and some with an opacity of .4 - however I am starting to think that the background colors are set in the theme, and not in the style.css

    IS there a way to make all these elements transparent? Or would there have to be a theme update for that, as I see many of these selectors are in theme options, yet they only have colors, not an option for transparent or opacity..

    Help is definitely appreciated!
    After testing a dozen themes, this one is the closest to what I had envisioned.

  2. Brad Davis
    Member
    Posted 1 year ago #

    Can you provide a link to the site and list the areas that you want to be transparent so people can see and be able to better help you.

    Great that you took the time to make a child theme, the WordPress gods will shower you with kind thoughts! haha =)

  3. djsteveb
    Member
    Posted 1 year ago #

    I can't provide a link yet - it's still in dev stage.. but seriously, I am looking to make just about everything transparent, aside from the comment box, which I am hoping to hide / toggle like the "spun" theme has...

    Might be nice to have the header and foot become less transparent when hovering.. I am looking at a plugin right now that can make the entire post disappear as well - and have a toggle button to bring it back, hopefully that will work..

    Thanks for the kudos on the child theme thing, piecing that together and messing with copying some css is about the edge of my skills level at the moment, but I am trying to learn more and more..

  4. Brad Davis
    Member
    Posted 1 year ago #

    I took a quick look at the demo site and this should help get you started on your transparent quest:

    #wrapper,
    #access
    #comments,
    #respond,
    #sidebar-wide,
    #footer-area,
    #copyright,
    .entry {
      background: transparent;
    }

    I would recommend installing Firebug or using developer tools on Google Chrome to see how you can find the attributes you need to target. You will heaps on how a site is structures, your knowledge of CSS will get a boost and you will be able to figure out how to make more custom changes to any site.

  5. djsteveb
    Member
    Posted 1 year ago #

    Thanks for the heads up with this Brad!

    I tried doing some like this:

    #footer-area .tagcloud a:before {
    	background:#222;
    	opacity:0.4;
    }
    
    #copyright {
    	clear:both;
    	padding:1.4% 3.2%;
    	background:#111;
    	border-top:#333 1px solid;
    	border-top:rgba(255, 255, 255, .145) 1px solid;
    	color:#CCC;
    	font-weight:300;
    	opacity:0.4;
    }

    ----
    (added the opacity 0.4)
    to see if it was working, or I had the right things.. I do not think it is making any difference..

    and tried

    .entry-content a:hover img,
    #attachment-nav a:hover img {
      background: transparent;
    	opacity:0.4;
    }
    
    .entry {
      background: transparent;
    }

    But I think the theme options color choices are overriding what I add to style.css perhaps? I don't see any changes, even when using shift+refresh - of course I could be just screwing the whole style.css child theme thing totally wrong, or maybe on little thing somewhere as well - learning is fun!

  6. Brad Davis
    Member
    Posted 1 year ago #

    I just had a look at the top example that you added opacity to and you should see the dots in the tag cloud change and the color background in copyright change. If you are using Google Chrome make sure the browser is refreshing or you could try using adding !important as the theme might be loading over any changes you have made.

    To use !important it would look like:

    opacity: 0.4!important;
  7. djsteveb
    Member
    Posted 1 year ago #

    Hey brad, thanks for the top on the 1important thing - that seems to work to override the things that were being overridden that I was trying. Now to figure all these other parts out! Thanks again!

  8. Brad Davis
    Member
    Posted 1 year ago #

    Great to hear it helped you out! Get to know how to use Firebug and it will make the rest of your custom super easy! Here is a video by WordPress user, kristarella on how to use Firebug, it is a little old but you will get the idea on how to use it and how useful it will be.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic