WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] subscription button (7 posts)

  1. jason102178
    Member
    Posted 1 year ago #

    I was wondering how can i style the subscription button for jetpack, i have enabled the subscription widget and would like to change the default style...

    I was inspecting using firebug for firefox and i noticed that it doesnt have an id that would allow me to add it to my custom css.

    for example, in wordpress the post comment has an id of
    id="submit so in my css i would add #submit {
    to style the button

    http://wordpress.org/extend/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    While the button itself doesn't have a specific ID, the parent div container does. Try using the following CSS code:

    .jetpack_subscription_widget input[type="submit"] {
    /* Your CSS changes */
    }
  3. jason102178
    Member
    Posted 1 year ago #

    Thanks jerome that worked perfectly, I have one other question maybe you can help me with, i was able to style the buttons color ect

    But it doesnt have like a hover effect like i want just yet, so i was wondering what the proper code would be to implement this

    i tried adding something like this

    .jetpack_subscription_widget :hover{opacity:0.8} input[type="submit"] ;

    and it changed the whole widget the text and box to have hover effect and not just the button.

    any suggestions

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    The :hover can be applied to the input field, like so:

    .jetpack_subscription_widget input[type="submit"]:hover {
    /* Your CSS changes */
    }
  5. jason102178
    Member
    Posted 1 year ago #

    thanks again jermy it worked

  6. embou
    Member
    Posted 9 months ago #

    Hi, I'd like to use the Jetpack Blog Subscriptions sidebar widget, but it takes a lot of real estate in the side bar with the large "subscribe" button and large gap between the email field and the button. I'd like to make the button smaller and place it at the right edge of the email field. I am just starting to learn how to use wordpress and don't know much about CSS. Is there an easy code that would make the above modifications that I could paste somewhere? And if so, exactly where would I paste it?

    Thanks so much for any help.

  7. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 9 months ago #

    @embou Could you please start your own thread, as per the Forum Welcome?
    http://wordpress.org/support/plugin/jetpack#postform

    it might also be useful if you could let us know your site URL so we can help you style that widget.

    Thank you!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.