WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Replacing Image in Child Theme - Will New Image, Same Name Work? (13 posts)

  1. questulent
    Member
    Posted 1 year ago #

    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!

  2. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Are you trying to add a background image somewhere?

  3. questulent
    Member
    Posted 1 year ago #

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

  4. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    The CSS should be as follows

    #strip {
     background-image: url(images/newStrip.png);
    }
  5. questulent
    Member
    Posted 1 year ago #

    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?

  6. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

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

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  8. questulent
    Member
    Posted 1 year ago #

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

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  10. questulent
    Member
    Posted 1 year ago #

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

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  13. questulent
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic