WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] change opacity of content window?

[Resolved] change opacity of content window?

  • Can anybody explain simply how I might change the opacity of the window behind blog posts and the sidebar?(To let a slight image of the background through).

    (I’ve found that themes already able to do this through the customisation menus aren’t that aesthetically pleasing).

    Let me state:

    I am new to WP (and blogging/blog design).
    I understand from days of reading (& futile attempts) that I will have to edit css or php. And I don’t know how to find the elements simply as I have not worked with these before.
    The site I’m building is hosted locally so is not visible yet.

    I am currently running the free Custom Community theme.

Viewing 15 replies - 1 through 15 (of 38 total)
  • catacaustic

    @catacaustic

    very awesome

    The easy way to find out the element that you need is to use FireFox as your browser and insall FireBug in it. This will give you a full-featured debugging console that will also show you exactly where each element is, and give you the relevant CSS styles that are set for that. From there, you can create a child theme (highly recommended to stop your updates being over-written on any future updates) and make your changes in there.

    You are in for a pretty big learning curve as it’s not easy to be a complet beginner with this, but please stick with it. It does get easier as you get more experience with it!

    Hey catacaustic thanks for replying.
    After browsing other threads I’d already installed Firebug and used the ‘pointer’ feature to have a play around and try and figure out which element it is that I want to change. Unfortunately you’re right in asserting that I have a pretty steep learning curve as, having no previous experience, I’ve been hoping that the elements would look extremely similar to elements posted in other threads on this same topic for modifying the css. In the end they looked too different, I ended up more confused, and to be honest I’m too scared to try and modify anything without explicit direction.

    Without wanting to sound like one of those whiny forum posters who don’t try to think before posting, I’ve been browsing trying to figure this out for a few days now but to no avail. (No coding experience of course).

    To be honest I’m posting in the old ‘hit & hope’ tradition that there might be someone familiar with this theme who sees the post and can write something along the lines of: “Easy mate, look for this example are of code, insert ‘this’ here” etc.

    Any generous Custom Community theme experienced life savers out there?!

    Using Firebug, clicking on the grey background surrounding posts I get this highlighted:

    <div class="post-content span11">

    But this doesn’t look like the colour information I’ve seen in other threads describing how to add opacity to elements of a theme…

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Have you tried;

    .post-content {
     opacity: 0.5;
    }

    ?
    Don’t rely too much on finding the exact code. The CSS selectors may be different for each theme, but the styles are the same.

    Wow, that made the whole post semi transparent.

    Could you suggest what I could insert to make just the grey bubble behind the post’s text semi-transparent?

    (Leaving the text fully opaque).

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Use a background image that has the opacity you want, instead of the actual CSS opacity style.

    Edit: link fixed.

    I tried inserting a 24 by 24 px png into the background of posts using the theme options, and tiling it x+y as I had seen suggested for other themes.

    But it didn’t change anything.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Try again but this time use CSS background-image;
    E.g,

    .post-content {
     background-image: url("path-to-image-in-speech-marks");
    }

    Would I need to make the image I use greater than a certain size?

    (just tried the 24 by 24 png with no change, but I assume its probably too small to be seen).

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    In CSS, the background image will repeat in both X and Y axis automatically unless specified otherwise. You can make a 1px by 1px image if you want.

    OK…When I inserted that code linking my image the post background remained the themes original block grey.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    May you provide a link to the webpage with the issue?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Sorry, forgot you were working locally.

    Can you provide the HTML and CSS of the problematic webpage into jsFiddle and then link us the jsFiddle page?

    I’d love to but I’m hosting this locally on my laptop until I learn to get this set up how we want and get our content up..

    I think you’ve just asked me to exceed my technical specifications!

    (Sorry mate, I do appreciate you trying to help. But being a nuffy at this I can follow prompts to enter pieces of code into the theme option area. Otherwise I wouldn’t know which section to copy or how to use the jFiddle page!).

Viewing 15 replies - 1 through 15 (of 38 total)
  • The topic ‘[Resolved] change opacity of content window?’ is closed to new replies.
Skip to toolbar