Images in a child theme

[Dave Nash]

Greetings All,
I'm cruising for a "learning experience" today. I have a child theme set up on my website. To date, I've had little use for it. Today, I've found something I'd like it to do. And after a few tries, and some searching / confusion courtesy of Google and the a page on Child Themes from the WP Codex, I thought I'd turn to my friends (ie: "the experts") for help.

I know by many standards, this is pretty easy stuff. And - that I probably have the right idea, and may even be fairly close. But after several attempts, I haven't managed to stick the landing. So here's what I've got:

My website is: http://www.nashionalgraphics.com

On the Navigation Bar, you'll see some social media icons on the right side that appear "greyed out". I want to replace them with color icons, and I want them to stay that way whenever I update my theme. (Yay! I get to use my child theme for something! )  I have already uploaded the .png files for these three images to my web host via FTP. They are currently residing at the bottom of my ... /wp-content/themes folder.

~ so ~

I broke out my "style.css" file and began experimenting. Courtesy of some of Nick's guidance from some time back, I had the savvy to open my Developer panel and find the Inspector utility. This enabled me to identify the name of the object/div that I want to edit. (BTW - I'm using Firefox for my browser.)

So - after identifying the "object of my desire"... I threw down several versions of the text below:

First, just taking the markup from  the div and pasting it into my style.css, and then changing the path and existing file name to the new path and new file name....


<div id="social-icons">

    <a target="_blank" href="http://twitter.com/nashionalgraphx"> <img src="http://www.nashionalgraphics.com/wp-content/themes/twitter_color.png" alt="Twitter"></img></a>

    <a target="_blank" href="http://feeds.feedburner.com/NashionalGraphics"><img src="http://www.nashionalgraphics.com/wp-content/themes/rss_color.png" alt="Rss"></img></a>

    <a target="_blank" href="http://www.facebook.com/nashionalgraphics"><img src="http://www.nashionalgraphics.com/wp-content/themes/facebook_color.png" alt="Facebook"></img></a>

</div>


And then I tried some variations of...


#social-icons { image source: http://www.nashionalgraphics.com/wp-content/themes/twitter_color.png;

img src="http://www.nashionalgraphics.com/wp-content/themes/rss_color.png";

img src="http://www.nashionalgraphics.com/wp-content/themes/facebook_color.png";}


This "hashtag / div name" format worked fine for me in another instance when the theme I was working with had a "Child Theme Editor" built into the Theme section of the Dashboard. It was a feature unique to that theme. My current theme sports no such luxury. I'm guessing I need a little more meat here in the nature of a function or a condition. I'm just not sure how to phrase it correctly. Then again, I may be further off than that.

Anybody up for some hand-holding here? Any help would be appreciated.

Thanks much,

Dave Nash

[Bobbie Wilson]

Hi Dave,

Way to go for trying out child themes!

What you've shown us in your email is HTML code, which can't go into the style.css. What you'll need to do, is create a new header.php file in your child theme, copy the code in your parent theme's header.php and change the source of the images there.

Also, it's a good idea to load the images in the child theme folder, in a folder named "images" or "img" so that what you add is easier to keep track of.

Let us know if you need more help.

Bobbie

--
You received this message because you are subscribed to the Google Groups "WordPress Austin" group.
To post to this group, send email to wordpres...@googlegroups.com
To unsubscribe from this group, send email to wordpress-aust...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/wordpress-austin?hl=en
 
Our meeting information is available at http://www.meetup.com/austinwordpress/
---
You received this message because you are subscribed to the Google Groups "WordPress Austin" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wordpress-aust...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.