Prose Theme – Subscribe and Post Comment Buttons

[pjblogger]

I really want to change the subscribe and post comment buttons by replacing them with custom made button images. I am having trouble with coding. Please, someone help.

Thank you so much for your time.

 

[AnitaC]

Please post a link to your website? What theme are you using?

---

Need help with customization or troubleshooting? Reach out to me.

[pjblogger]

I am using the Prose Theme

http://www.parentjob.com

[AnitaC]

I am going to edit your title on this to remove the Help because that really doesn't work - I am going to replace it with PROSE because I will need someone else to assist with this. It's easier to have the theme name in the title.

---

Need help with customization or troubleshooting? Reach out to me.

[pjblogger]

Ok

[wendycholbi]

For the Post Comment button in the comment form, try this:

1. Upload your custom image to your Media Library

2. Add this snippet to Genesis --> Custom Code --> Custom CSS (replacing IMAGE-URL-HERE with the URL of the image in your Media Library, and changing the sample image dimensions to the actual dimensions of your image):

/**Replace Post Comment button with custom image**/
#commentform #submit, #commentform #submit:hover {
background: url(IMAGE-URL-HERE);
height: 40px;
width: 100px;
}

I think that should do it.

The subscribe button will be similar code, you just need to find the right selector to pick out that specific button. If you need help finding that selector, you can use Firebug or post a link to a page on your site where the button is showing up (since right now your site is in maintenance/under construction mode).

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[pjblogger]

Hi Wendy, You're a genius! The code worked to insert my image; however, the original text is still there and clicking the button results in an error page.

Do you have any suggestions?

Thanks

Also, I disabled the Coming Soon mode so that you can take a look.

[wendycholbi]

D'oh, I should have remembered that the Post Comment text would show up, since the image is in the background. Here's an amended code snippet (same as above, substitute the image URL and put in the correct height and width:

/**Replace Post Comment button with custom image**/
#commentform #submit, #commentform #submit:hover {
background: url(IMAGE-URL-HERE) top left no-repeat;
color: transparent;
height: 40px;
width: 100px;
}

I submitted a test comment, and did not see an error message, and my comment appeared on the page (visible only to me, because it says it's awaiting moderation -- you may have gotten an email about that). So the comment form appeared to work normally for me. When you clicked the image, were you logged in? Did you fill in the name and email fields?

And here's a similar code snippet for the Subscribe button in your sidebar widget (again, substitute the image URL, height, and width). This code will only affect one particular widget, the one with the id "blog_subscription-2":

/**Replace sidebar Subscribe button with custom image**/
#blog_subscription-2 #submit, #blog_subscription-2 #submit:hover {
background: url(IMAGE-URL-HERE) top left no-repeat;
color: transparent;
height: 40px;
width: 100px;
}

 

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[pjblogger]

Thanks for testing my comment form, but I realize that I was causing the error by not entering information (how embarrassing!).

I entered the updated codes. The Comment button only moved down slightly, and the Subscribe button is so stubborn, it didn't change one bit.

Can you please take a look?

Thank you sincerely

[wendycholbi]

I can see that the CSS for the Post Comment button is missing a semicolon after the word "transparent". If you add that semicolon in, the Post Comment button should show up correctly.

For the Subscribe button, I don't see any of the custom CSS being applied, even though I can see that you've added it to your Genesis --> Custom Code --> Custom CSS. Hmm.

Can you please un-minify your CSS by going to Genesis -->Design Settings --> General Settings (very bottom of the page) and un-checking the "Minify CSS?" checkbox (generally it is a good idea to not minify while you're testing and tweaking, then once you are ready for launch, go ahead and minify to speed up your page load time).

If you're using any caching plugins/services, temporarily turn them off or at least purge the caches.

If un-minifying the CSS doesn't have any effect on the Subscribe button, leave it un-minified and post back here, and I will take another look and see if you need a different selector.

Fingers crossed!

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[pjblogger]

It worked!!! I am super excited and have a new appreciation for the semicolon.

I un-minified as you suggested. Also, I don't have many plug-ins, and I don't think any of them are for caching.  I hope this does the trick for the Subscribe button.

Thank you for your time.

 

 

 

 

 

[wendycholbi]

Nice work with the Post Comment button!

For the Subscribe button, I got the selector wrong (I made an assumption that it was the same as the Post Comment button, which it's not). Try this:

/**Replace sidebar Subscribe button with custom image**/
#blog_subscription-2 input[type="submit"], #blog_subscription-2 input:hover[type="submit"] {
background: url(IMAGE-URL-HERE) top left no-repeat;
color: transparent;
height: 74px;
width: 72px;
}

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[pjblogger]

Now I'm REALLY excited like Tom Cruise jumping on Oprah's couch excited.  Big thanks to you, Wendy, for your time, patience, and selflessness. With all the craziness in this world, it's good to know that there are still people out there willing to help others.

[wendycholbi]

Your response is going into my permanent archive of awesome. Thank you. A lot.

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[Author]

Posts