SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    example.PNG

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi Talimore. Welcome to SitePoint.

    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. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi Talimore. Welcome to SitePoint.

    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.
    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

    Thanks again!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    #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;
    }
    Code:
    <input id="subscribe" type="submit" name="jetpack_subscriptions_widget" value="Subscribe">
    Instead of using an id, you could also just do this:

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

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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:

    Code:
    #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;
    }
    Code:
    <input id="subscribe" type="submit" name="jetpack_subscriptions_widget" value="Subscribe">
    Instead of using an id, you could also just do this:

    Code:
    #searchsubmit, #subscribe-blog input[type="submit"] {
      ... etc.
    }
    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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Talimore View Post
    where do I find the code for that widget in order to give it a class.
    O well, if it's hard to find, then just go with the CSS-only option. In style.css change this:

    Code:
    #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

    Code:
    #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:

    Code:
    #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. #7
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Finally got it working! Thanks for all your help!

    BTW Congrats on the 10,000 posts!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Talimore View Post
    Finally got it working! Thanks for all your help!
    Glad that helped.

    Off Topic:

    Huh, didn't even notice the post count.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •