WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] change opacity of content window? (39 posts)

  1. heiddonism
    Member
    Posted 1 year ago #

    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.

  2. catacaustic
    Member
    Posted 1 year ago #

    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!

  3. heiddonism
    Member
    Posted 1 year ago #

    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?!

  4. heiddonism
    Member
    Posted 1 year ago #

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

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  6. heiddonism
    Member
    Posted 1 year ago #

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

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

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

    Edit: link fixed.

  8. heiddonism
    Member
    Posted 1 year ago #

    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.

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

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

    .post-content {
     background-image: url("path-to-image-in-speech-marks");
    }
  10. heiddonism
    Member
    Posted 1 year ago #

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

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  12. heiddonism
    Member
    Posted 1 year ago #

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

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    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?

  15. heiddonism
    Member
    Posted 1 year ago #

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

  16. heiddonism
    Member
    Posted 1 year ago #

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

  17. Andrew
    Forum Moderator
    Posted 1 year ago #

    Okay, maybe this;
    - Right click on the webpage with the problem (assuming you're using Windows)
    - Select 'View source'
    - Copy everything in the new pop-up window; that everything is called HTML
    - Go to PasteBin and paste your HTML into there.
    - Link us the PasteBin'd page.

  18. heiddonism
    Member
    Posted 1 year ago #

    Your patience is amazing:

    http://pastebin.com/9Lfbwwzj

  19. Andrew
    Forum Moderator
    Posted 1 year ago #

    Instead of this;

    background-image: url("path-to-image")opacity: 0.5;

    Try this;

    background-image: url("path-to-image");
  20. heiddonism
    Member
    Posted 1 year ago #

    Yeah sorry about that.

    I did (and just did again) enter the code exactly how you originally stated. And it didn't change anything.

    I've been trying to play around with other pieces I've seen on threads on this topic, and I've inadvertently copied the html after doing this. Sorry.

  21. Andrew
    Forum Moderator
    Posted 1 year ago #

    I think the issue may have something to do with the name of your file.
    Try naming your file without percentage symbols.

  22. heiddonism
    Member
    Posted 1 year ago #

    I removed the percentage symbol from the filename, reloaded it into the media library, copied the new url in...

    But no dice.

  23. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you try loading this URL as the "path-to-image";

    http://farm6.staticflickr.com/5245/5313945240_7cb6a4a35f_b.jpg

    Does that work?

  24. heiddonism
    Member
    Posted 1 year ago #

    Nope!

    Original theme styling prevails.

  25. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you make another Pastebin page of the updated webpage?

  26. heiddonism
    Member
    Posted 1 year ago #

  27. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you clear your browser's cache to see whether my gravatar is appearing behind your post's background?

  28. heiddonism
    Member
    Posted 1 year ago #

    Just cleared it now. Reloaded.

    Not a gravatar in sight.

  29. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you add this;

    !important

    after your background image URL so its like this;

    .post-content {
     background-image: url("http://farm6.staticflickr.com/5245/5313945240_7cb6a4a35f_b.jpg") !important;
    }
  30. heiddonism
    Member
    Posted 1 year ago #

    I think you just won.

    I have a gravatar.

    Will now attempt to use the opaque .png

Topic Closed

This topic has been closed to new replies.

About this Topic