August 16, 2012 at 3:29 am #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?August 16, 2012 at 6:23 am #87390
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. :)
IsmaelAugust 17, 2012 at 2:06 pm #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?August 18, 2012 at 6:29 am #87392
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. :)
IsmaelAugust 18, 2012 at 5:05 pm #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?August 20, 2012 at 4:53 am #87394
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. :)
The topic ‘Change Related Posts Default Image’ is closed to new replies.