Community Forums › Forums › Archived Forums › Design Tips and Tricks › Prose Theme – Subscribe and Post Comment Buttons
Tagged: Replacing Comment Button
- This topic has 13 replies, 3 voices, and was last updated 10 years, 11 months ago by wendycholbi.
-
AuthorPosts
-
April 20, 2013 at 11:00 am #36576April 20, 2013 at 12:31 pm #36581AnitaKeymaster
Please post a link to your website? What theme are you using?
Love coffee, chocolate and my Bella!
April 20, 2013 at 1:52 pm #36599pjbloggerMemberI am using the Prose Theme
April 20, 2013 at 1:59 pm #36600AnitaKeymasterI 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.
Love coffee, chocolate and my Bella!
April 20, 2013 at 2:17 pm #36604pjbloggerMemberOk
April 20, 2013 at 2:37 pm #36605wendycholbiMemberFor 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
April 20, 2013 at 6:00 pm #36623pjbloggerMemberHi 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.
April 20, 2013 at 9:11 pm #36647wendycholbiMemberD'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
April 21, 2013 at 4:03 pm #36764pjbloggerMemberThanks 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
April 21, 2013 at 6:05 pm #36771wendycholbiMemberI 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
April 21, 2013 at 7:45 pm #36785pjbloggerMemberIt 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.
April 21, 2013 at 8:32 pm #36794wendycholbiMemberNice 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
April 21, 2013 at 9:40 pm #36804pjbloggerMemberNow 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.
April 23, 2013 at 7:05 pm #37294wendycholbiMemberYour 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.