Support » Themes and Templates » Replacing Image in Child Theme – Will New Image, Same Name Work?

  • Resolved questulent

    (@questulent)


    Hi,

    I’m working on moving a previously modified WordPress theme to a child theme for ease of future updating. The site can be see at http://www.simplysomething.co.za. I’d like my child theme to replace an image in the existing parent theme.

    I’ve created a new image, strip-bg.png with the same filename, size, dimensions as the original in the parent theme, created an /images folder in my child theme (same name and place as in the parent theme) and put my new strip-bg.png into this directory.

    I’m hoping this is all I have to do, since this seems the kind of elegance child themes promise … but it doesn’t seem to be showing up. SO … is simply creating a replacement image sufficient, or do I also have to update the CSS or PHP somewhere in my child theme to point to the child theme’s image?

    Thanks!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Are you trying to add a background image somewhere?

    I’m trying to replace a background image – the grey one used in the horizontal bar towards the bottom of the home page.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    The CSS should be as follows

    #strip {
     background-image: url(images/newStrip.png);
    }

    Thanks @andrew – you’ve confirmed that I could easily create a new image (with a new name) and modify the css in my child theme’s style.css to point to it.

    But what I’m asking is whether I can simply duplicate the image in my child theme and modify it WITHOUT needing to change any CSS. Do you know if this is possible?

    It’s not that I’m worried about modifying CSS – and in this case it’s not much – but it seems the strength of child themes is needing to modify as little as possible, and I’m trying to understand why this isn’t working in this instance… Any ideas?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    You don’t need to duplicate the folder, but you can change the original newStrip image where the parent theme references it.

    Try clearing your browser (and any other) caches…the old image may well be cached.

    @andrew – I don’t want to alter the original image in the parent theme as that kinda negates the idea/efficacy of child themes, doesn’t it? It’ll just get replaced next time I update the parent theme…

    @wpyogi – Have tried emptying cache, and am running safari with cache disabled now – still no luck.

    Am I missing something about child themes here? I understood that files in the child theme file structure are treated as replacements for their duplicates in the parent theme – does this not apply to images?

    Sorry, I didn’t totally understand your question (though clearing the browser cache still goes 🙂 ) — yes, as Andrew said, you do need to add some CSS code to the child theme stylesheet:

    #strip { background-image: url(images/strip-bg.png); }

    Just make sure the file name in the above is exactly the same as your image’s name.

    Could you explain why? This exact CSS is already in the parent theme’s style.css and my new image’s name is exactly the same as the original parent theme’s image name – strip-bg.png – intentionally, because I thought that would mean the new image simply “replaced” the old one when the child theme was loaded…

    The file path from the parent theme stylesheet goes to the old image. When a theme pulls styles from a parent stylesheet, it merely reads the styles – it does not “move” or somehow “copy” those styles to the child theme stylesheet. With CSS it’s all about the “cascade…” and what styles take precedence — which is based on location and specificity.

    To finish that a bit better — when the parent stylesheet is read for that background, the file path says “go to the images folder that is right next to this file and find the strip-bg.png image.” So in this case it finds the old one.

    Ahhhh … OK. That makes things a lot clearer.
    Thanks for taking the time to explain WPyogi 🙂

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Replacing Image in Child Theme – Will New Image, Same Name Work?’ is closed to new replies.