Widget "Subscribe by e-mail" has an ugly button I can't figure out how to format(pic)

CMS & WordPress
1

I formatted the search button just fine but can’t find the right CSS to format this subscribe button. Here is a picture of what I am talking about:

If anyone knows how to format this, I would greatly appreciate the help. Note: This is the widget from the newly updated JetPack Application Wordpress offers.

2

Hi Talimore. Welcome to SitePoint. :slight_smile:

If you right click on that subscribe button and click Inspect Element (in Chrome or Safari, or Firefox if you have Firebug installed) you’ll immediately see the styles that apply to that button and where they are set. although it looks like the default browser button, so you may need to create a new style for it. If nothing else, you can add a class to that button to target it, although you really should be able to use the same styles as for the other button. If you post a live link, we can give more info on how to apply those styles.

3

Hello Ralph, and thank you for your reply and welcome message! I was trying to use Firebug to determine it’s style but just couldn’t figure it out. Here is the link: http://www.nihonnation.com We haven’t officialy launched yet so I was hesitant on sending an unfinished webpage to people :smiley:

Thanks again!

4

That submit buton doesn’t have a class or id of its own, but if you put one one it (say #subscribe), it could share the relevant styles with #searchsubmit:

#searchsubmit, #subscribe {
  background: none repeat scroll 0 0 #999999;
  border: 1px solid #666666;
  border-radius: 2px 2px 2px 2px;
  color: #FFFFFF;
  font: bold 9px/1 helvetica,arial,sans-serif;
  padding: 6px 5px 4px;
  text-align: center;
  text-transform: uppercase;
  width: 50px;
}

<input id="subscribe" type="submit" name="jetpack_subscriptions_widget" value="Subscribe">

Instead of using an id, you could also just do this:

#searchsubmit, #subscribe-blog input[type="submit"] {
  ... etc.
}
5

Thanks again for the reply, only problem is where do I find the code for that widget in order to give it a class. Silly Wordpress is the hardest thing to find stuff :smiley:

6

O well, if it’s hard to find, then just go with the CSS-only option. In style.css change this:


#searchsubmit {
  background: none repeat scroll 0 0 #999999;
  border: 1px solid #666666;
  border-radius: 2px 2px 2px 2px;
  color: #FFFFFF;
  font: bold 9px/1 helvetica,arial,sans-serif;
  padding: 6px 5px 4px;
  text-align: center;
  text-transform: uppercase;
  width: 50px;
}

to this


#searchsubmit, #subscribe-blog input[type="submit"] {
  background: none repeat scroll 0 0 #999999;
  border: 1px solid #666666;
  border-radius: 2px 2px 2px 2px;
  color: #FFFFFF;
  font: bold 9px/1 helvetica,arial,sans-serif;
  padding: 6px 5px 4px;
  text-align: center;
  text-transform: uppercase;
  width: 50px;
}

The only problem you’ll see is that the submit button is not wide enough, so ideally, break things up like this:

#searchsubmit, #subscribe-blog input[type="submit"] {
  background: none repeat scroll 0 0 #999999;
  border: 1px solid #666666;
  border-radius: 2px 2px 2px 2px;
  color: #FFFFFF;
  font: bold 9px/1 helvetica,arial,sans-serif;
  padding: 6px 5px 4px;
  text-align: center;
  text-transform: uppercase;
}

#searchsubmit {
  width: 50px;
}

#subscribe-blog input[type="submit"] {
  width: 70px;
}
7

Finally got it working! Thanks for all your help!

BTW Congrats on the 10,000 posts!

8

Glad that helped. :slight_smile:

Off Topic:

Huh, didn’t even notice the post count.