How do I make the Jetpack email subscription button match the rest of the theme?

  • Resolved cvasilevski

    (@cvasilevski)


    2 years, 9 months ago

    I have almost everything on my site how I want it, but I’m having trouble with the Email Subscription widget from Jetpack. The “Subscribe” button is black with black text. Why is this happening, and how do I fix it? Ideally, I’d like the button to match the formatting of the search button, where it’s black text on white, then and then when you hover, it’s white text on the site’s accent colour.

    Related question: How do I make the “title” attribute in the subscription widget match the way the headers are formatted in the other widgets?

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @cvasilevski,

    It looks like the markup that Jetpack is outputting for the button is trying to match the markup for buttons in Block Editor content, but it’s slightly different, causing the issue with the text color. You’ll need to add some custom CSS to make it work with the Lovecraft styles. Go to Appearance → Customize → Additional CSS (the menu labels might be different in your language) and add the code below:

    #subscribe-submit .wp-block-button__link { color: #fff; }

    The widget title doesn’t match the class set for widget titles in the theme settings, so you’ll have to add custom CSS to get that to work as well. Add the following:

    .widgettitle {
border-bottom: 2px solid #ca2017;
display: inline-block;
font-family: inherit;
font-size: 0.78em;
font-weight: 900;
letter-spacing: 1px;
margin: 0 0 20px;
padding-bottom: 3px;
text-transform: uppercase;
}

    Let me know if that does it.

    — Anders

    Thread Starter cvasilevski

    (@cvasilevski)

    I added in the CSS. The button is black with white text – not quite the same as the default buttons on the other site, but at least it’s readable now!

    The CSS for the Jetpack widget header is perfect. Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How do I make the Jetpack email subscription button match the rest of the theme?’ is closed to new replies.