Using an image instead of text for Read More link

[wickedsimple]

I would like to use a graphic for the Read More link. I have used this code and the graphic does appear, however the text "Continue Reading" that I have to put in the Genesis Featured Featured Post widget still appears under it:

http://www.analisamendmentblog.com

This is the code I used to place the image:

a.more-link {
background-image: url(http://www.analisamendmentblog.com/wp-content/uploads/2014/08/keepreading.png);
}

See screenshot for place on widget where I put Continue Reading. If I delete that, then the graphic doesn't appear either.

Thanks!

http://www.analisamendmentblog.com

[Tony @ AlphaBlossom]

Hi,

You have to do a couple extra things...try adding this to your theme's style.css file:

a.more-link {
    background: url("http://www.analisamendmentblog.com/wp-content/uploads/2014/08/keepreading.png") no-repeat scroll 2px center rgba(0, 0, 0, 0);
    display: block;
    height: 25px;
    margin: 10px auto 0;
    text-indent: -9999px;
    width: 170px;
}

That will get you going in the right direction...you can play with changing "block" to "inline-block" if you want the button to continue right after the text (instead of on a new line), add "float: right;" if you want it to the right, etc.

Let me know if you need any help getting it exactly how you want.

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[wickedsimple]

Brilliant! Thank you for your quick reply - that worked! The graphic is only a placeholder graphic for now as I still have to design the logo and other elements. So I'll wait to play around with the spacing until I have the final graphic done.

I REALLY appreciate your help!!

Donna

[Tony @ AlphaBlossom]

Hi Donna,

Glad I could help! Have a great night.

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts