Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #15409

    Is there a way to replace the default image in the related posts area? The grey box is unappealing and I’d like to replace the default with something else but I can’t seem to find how/where to do this.

    Can anyone point me in the direction to change this?

    #87390

    Hi ChristiMc,

    It’s hard to filter that, because if we try to remove that gray box, it will also remove the gray border in other related product’s images. However, we can do an alternate solution to that, for the product that doesn’t have an image, you can upload some default image with a size of 300x300px. This way, related product images would look more consistent, and enhances the overall design of your site. :)

    Regards,

    Ismael

    #87391

    Hello Ismael and thanks for responding to my inquiry. Just to be clear, I’m not talking about related “products” just the related “posts” feature in a blog post.

    I have a default related products image that is 300px x 300px and that works fine.

    If you look at this post: http://www.navigatinggrief.com/new/grief-101 and scroll down the page, you’ll see the related post rectangle that is a dark grey/black box. I want to replace that box with something more appealing.

    Can this be done?

    #87392

    Hi ChristiMc,

    Sorry about that, Yes, it can be done. Kindly go to wp-content/themes/abundance/css/minimal-skin.css and find this line of code(line 522):

    background:url("../images/skin-minimal/magnify_light.png") no-repeat scroll center center #333;

    and replace the #333 with another color like #ccc. You can use this as a reference http://www.w3schools.com/html/html_colors.asp

    Hope this helps. :)

    Regards,

    Ismael

    #87393

    Ok, now we’re closer. However, I want to replace the box with an image, not another color. I’ve tried replacing the magnify_light.png file with my custom image already in that line of CSS code but that means the magnifying glass no longer appears.

    So, do you have any other suggestions for me to replace the grey box with an actual image for the related post default image while still keeping the magnifying glass that appears on top of it?

    #87394

    Hi ChristiMc,

    I just want to verify something, you want to replace the gray box, not only the color, but you want to replace it with an image, without removing the magnifying glass. Having 2 images at the same element as a background is not possible. However, there is a way to do it, but you will be merging the two images (the custom box and the magnifying glass). You will need to use an image editor like adobe photoshop and open the custom box image and get the magnifying glass image an put it inside the custom box image and save it.

    The merged image, let’s just call it newimage.png. Place this image inside images > skin-minimal folder (where the magnifying glass is placed). Then replace the code above with this code:

    background:url("../images/skin-minimal/newimage.png") no-repeat scroll center center #333;

    Hope this helps. :)

    Cheers,

    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Change Related Posts Default Image’ is closed to new replies.