Need help? Check out our Support site, then


PNG replacements not working properly

  1. This question is a continuation of http://en.forums.wordpress.com/topic/custom-design-upgrade-theme-limitations-on-color-changes?replies=4 from the themes forum.

    I decided to try overhauling the main text box (and eventually the sidebar) on the San Kloud theme. I created three replacement PNG files that were the same width and height as the originals. (On try two, I made them slightly narrower and saw no improvement.) The default PNG's disappeared when I went into the CSS editor but the top and bottom ones did not appear. The middle piece only appears sporadically with huge gaps in the middle. BTW: the middle piece I have up now is thicker than the original; the first attempt was a line like the default and I had the same issues.

    Here's what I've entered into the CSS editor. Any chance I can find out what's going wrong? Thank you (yet again).

    .format-standard .post-top {
    background: url('http://bumblepuppies.files.wordpress.com/2013/12/maintopfinal2.png') repeat scroll 0 0 transparent;
    }

    .post-middle {
    background: url('http://bumblepuppies.files.wordpress.com/2013/12/mainmiddlefinal2.png') repeat-y scroll left top transparent;
    }

    .post-bottom {
    background: url('http://bumblepuppies.files.wordpress.com/2013/12/mainbottomfinal2.png') no-repeat scroll left bottom transparent;
    }

    The blog I need help with is blacklightcandelabra.wordpress.com.

  2. This is happening because your images are wrong: a 540px high transparent PNG with a colored strip in the middle is still a 540px high image.

    For example, the top image is 540px in height, but only 121px are useful: the rest is useless transparency. The image has been inserted, but the "post-top" section is a lot shorter, so you only see some of the upper transparent part of the image, that is, nothing. If you have any doubts that the image is there, turn the "0 0" in the code to "0 -80px" and you'll see some of it. Or add this (to make the section longer):

    .post-top {
    min-height: 270px;
    }

    Similarly, the middle image is 540px in height, with just a 21px useful strip. The bg image of the "post-middle" section is set to repeat vertically, to cover the whole (variable) length of the posts. Your image doesn't "appear sporadically", it repeats vertically as it should, only most of it is transparent.

    In short, you need to crop the images to get rid of the useless top and bottom parts.

  3. Thanks for the response. I had double-checked the cropping before I posted here and I just went back to my media library to check again.

    According to my media library, the top piece is 586 x 122; the middle is 597 x 14 and the bottom is 586 X 55. The consistent 540 height sounds correct for what the images were before cropping, so I don't get why the pre-crop images re being inserted.

  4. This is interesting.

    I downloaded the cropped PNG's from my Media Library to my computer and re-uploaded them as new files to my Media Library. Once I changed the URL's, that worked. (And so did the min-height line you gave me, but with a different number.) I'm keeping the original error up on the blog for now because I suspect someone at WP will want to investigate why the uncropped images were being used.

    Again, thanks for all the help.

  5. You're welcome.

    You mean you used the "Edit Image" option of your blog to crop the images?

  6. Yes.

  7. Then there's nothing for WP to investigate: you used the URLs of the uncropped versions. When you upload an image, it gets a URL. If you crop it afterwards, the original URL will still be the original image. You need to click Update then copy the new URL that results for the cropped version.

  8. Ah, okay. I knew to click update but not to seek a new URL.

Topic Closed

This topic has been closed to new replies.

About this Topic