Prose Theme – Subscribe and Post Comment Buttons

Community Forums Forums Design Tips and Tricks Prose Theme – Subscribe and Post Comment Buttons

This topic is: resolved

This topic contains 13 replies, has 3 voices, and was last updated by  wendycholbi 1 year, 3 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #36576

    pjblogger
    Participant
    Post count: 27

    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.

     

    • This topic was modified 1 year, 4 months ago by  Anita.
    • This topic was modified 1 year, 4 months ago by  Anita.
    #36581

    Anita
    Participant
    Post count: 7356

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #36599

    pjblogger
    Participant
    Post count: 27

    I am using the Prose Theme

    http://www.parentjob.com

    #36600

    Anita
    Participant
    Post count: 7356

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #36604

    pjblogger
    Participant
    Post count: 27

    Ok

    #36605

    wendycholbi
    Participant
    Post count: 120

    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):

    [css]

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

    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

    • This reply was modified 1 year, 4 months ago by  wendycholbi. Reason: Every time I use a URL inside a code snippet, the post editor ADDS CODE THAT TURNS THE URL INTO A LINK AND IT SCREWS UP THE CODE
    • This reply was modified 1 year, 4 months ago by  wendycholbi. Reason: Every time I use a URL inside a code snippet, the post editor ADDS CODE THAT TURNS THE URL INTO A LINK AND IT SCREWS UP THE CODE
    #36623

    pjblogger
    Participant
    Post count: 27

    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.

    #36647

    wendycholbi
    Participant
    Post count: 120

    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:

    [css]

    /**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;
    }[/css]

    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″:

    [css]

    /**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;
    }[/css]

     


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

    #36764

    pjblogger
    Participant
    Post count: 27

    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

    #36771

    wendycholbi
    Participant
    Post count: 120

    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

    #36785

    pjblogger
    Participant
    Post count: 27

    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.

     

     

     

     

     

    #36794

    wendycholbi
    Participant
    Post count: 120

    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:

    [css]

    /**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;
    }[/css]


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

    #36804

    pjblogger
    Participant
    Post count: 27

    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.

    #37294

    wendycholbi
    Participant
    Post count: 120

    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

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.