Add an Image link over the Banner help

Hi Andrew,

The blog button can be achieved by going adding in the following HTML and CSS:

HTML (in header.php), directly AFTER <div id=”masthead”>:

<div class="headerblogbutton">
<a href="https://warriormoms.net/academy-2/warrior-wisdom"><img src="https://warriormoms.net/wp-content/uploads/2011/01/BLOG-Button.png" /></a>
</div>

CSS:

Add both these to your stylesheet:

#masthead {
position: relative;
}

.headerblogbutton {
position: absolute;
right: 0;
bottom: 22px;
}

Above, you can see we gave the button an absolute position (which only works if we made the #masthead relatively positioned).

You see a white outline around the button, so I would swap it to a transparent png or gif to get rid of it.

Adding the full verses on hover will be a little more work than just an alt tag as they are both part of the background image. Ideally, you’ll need to split these up in their own elements for them to display alternative content when hovered. If you do this, don’t use alt tags (as these are not visible to humans), but use ‘title’ instead. Another way would be to bring in some javascript or a html scroller or something for the hover effect.

Hope this helps.

Phil

Phil- That worked great for the Blog button, Thank you! I’m going to start looking more into the hover now.

So I’ve taken the text off of the image for the header, and found a great plugin to handle the mouse-over effect they wanted. However now I just can’t figure out how I can add text over the top of the header so that the text looks as though it is just part of the header itself, in the white area. To the left it needs to say Ephesians 6:10-18, in a bold black, while to the right it needs to say Galatians 5:22-23.
Once I can just get the text up there it should use the plugin I’ve found to handle the description popup that they’d love to see.
Everything I have tried simply moves the placement around on the header itself, rather than just implementing this text over the top. I could also create a transparent png file I guess, but REALLY have no idea where to start on that.
Anyone have any ideas?

I went ahead and made two new png files in case tossing them over the header simlilar to the blog button above may be easier…
https://warriormoms.net/wp-content/uploads/2011/01/eph.png for the left side and https://warriormoms.net/wp-content/uploads/2011/01/gal.png for the right side.

I’ve got the images somewhat there now, but they still aren’t working. I can’t seem to figure out how to place them correctly over the top of the header so that this will work correctly.
If you look at the top you will see one of the images, and when you mouseover it it literally moves the entire site down…?
I need this image to be placed towards the bottom of the header.

Also while messing with this and a few other settings I have accidentally embeded a facebook logo onto the home page just below the header, can anyone tell me how to remove this as well?