Sean Davis

Upload the image to your media library. Once it’s uploaded, go to its edit page. The “File URL” will display for you. Use that.

If you’re using a modern web browser, hover over the container’s you’d like to target, right click, choose the browser’s inspector tools, and you can see all of the HTML with its corresponding CSS.

You can create a child theme and in the stylesheet of your child theme, change:

…just the post links to another color with:

.post a {
    color: #00f;
}

…or all links with:

a {
    color: #00f;
}

No worries at all.

The first thing to do is dismiss the idea that you need to edit something that already exists. Right now you’re using a theme for your WordPress install and it’s responsible for handling the display of your content as well as its style.

The issue is that themes need to be updated by the theme creators when things need to be fixed, changed, new features added, etc. WordPress has a built-in system for handling these updates. You’d get an update nag in your WordPress dashboard that’ll prompt you to click a link or two to update your theme when the time comes. When you do that, your site [very quickly] gets placed in a maintenance mode, your theme is deleted, the updated version of your theme is put in its place, and your site is taken out of maintenance mode.

With that being the update process, any edits you make to your theme are only safe as long as the theme will never be updated. That’s not a change you want to take. That’s where child themes come in. Child themes are individual themes that are designed to inherit the functionality of a parent theme while being protected from parent theme updates.

The child theme link I’ve posted will tell you how to make a child theme. When you get it set up, you’ll have to create a style.css file for your child theme. Here’s a head start for the contents of that file…

/*
 Theme Name:   iaintnosaint child theme
 Theme URI:    http://iaintnosaint.com/
 Description:  Custom child theme for iaintnosaint.com
 Author:       Your Name
 Author URI:   http://iaintnosaint.com/
 Template:     theme_folder_name_exact_match
 Version:      1.0.0
*/

@import url("../theme_folder_name_exact_match/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

I’ve placed “theme_folder_name_exact_match” in two different parts of that code. It (the 5 words and 4 underscores… that’s it) needs to be replaced with the exact name of your parent theme’s directory folder. It’s a paid theme so I can’t download it and see myself. If the folder is called “woodpecker-theme”, that’s what you need to put in those two places.

This child theme will now act as its own theme but inherit the functionality of Woodpecker. With that in place, you will make all CSS edits in the child theme’s stylesheet underneath the “Theme customization starts here” lines.

And that’s the place where you’ll place…

.post a {
    color: #DD4747;
}

It’s hard to say. I don’t know the contents of the child theme. If it’s a barebones child theme, it shouldn’t add anything to the site… just adopt the functionality of its parent. So make sure this child theme is meant for your edits and is not supposed to create a different design.

As for the text box, that should work as I explained.

Can you link to either the theme download or your site?

Create a child theme (or download one if the theme author provides it) and copy the home.php file from Leaf into the root of your child theme.

In the new file from your chile theme, find this line:

</div><!-- #iview -->

Directly beneath it, you can place whatever HTML you’d like there…. like:

<div class="custom-text">
	<h3>Your New Text Box Headline</h3>
	<p>Your new text box paragraph.</p>
</div>

No problem!