Styling Jetpack Subscribe button

  • I’ve added the Jetpack Subscribe button to my Independent Publisher blog, but I can’t seem to control the styling — something is overriding the widget’s settings, so that the button is bright green, unlike anything else in my sidebar. Also I can’t get it to right-align, though that’s a little less annoying.

    Ideally I’d love to have the button styled the same as the other buttons in that sidebar, and left-aligned like them as well. Help?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Raam Dev

    (@raamdev)

    Hi @absentfriends,

    It looks like the other buttons in your sidebar are actually <a> elements and not <button> elements. You’ll need to target your CSS styling at the button element like this: https://github.com/raamdev/independent-publisher/blob/79ec16dc83fd02b25db2b736aaad6e7b72e56c6b/style.css#L316-L345

    Depending on the other CSS on your site, you may need to add the !important property to force your styles to override the default: https://www.w3schools.com/css/css_important.asp

    Thread Starter absentfriends

    (@absentfriends)

    Thanks for the response! I should be clear that I’m not hand-coding this CSS. I am far from a power user of CSS or WordPress. I’m just using the block editor for widgets. I used that editor to add buttons — it chose the styling, and apparently misled me about whether I was actually adding buttons rather than links. Okay. I like they way they look and work just fine, so I don’t need to do anything to them.

    I also used that block editor to add the Jetpack subscribe widget. What I’m finding here is that some of the settings I choose in that editor — such as the widget’s button background color and text color — aren’t respected by the theme. Adding “!important” to the “additional CSS” section didn’t help, not that I expected it to.

    I just deleted and re-added the subscribe widget, and adjusted the settings on it so that the button has white text on a black background, is placed beneath the email text field, and is identical in width to that field. This is exactly what the block editor preview shows me:

    Then, when I publish that widget on the site, I see a button with white text on a green background, taking up like 90% of the width of the text field, and right-aligned:

    Sorry if this is a dopey question, but how can I persuade Independent Publisher to behave in the way that the widget block editor expects it to?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Styling Jetpack Subscribe button’ is closed to new replies.