Customize Jetpack & Feedburner Email Widget

jetpackfeedburner

I’ve done a lot of tutorials that are specific to Blogger(BLOGGER EMAIL GADGET) and how to customize those widgets. Today’s tutorial will be a bit specific because it will only work for people who have a self-hosted WordPress blog and are using the Jetpack or Feedburner subscription widget. Not everyone uses these email subscription services, but I’ve found that MOST people do. I’ve also noticed that a lot of them look rather plan and not formatted to match the theme. Here is what we’re going to be working on today:

jetpack

It’s a simple tutorial because all you need to do is pick out a color for your submit button and add in your CSS. Here is a link where you can get a color code: http://www.huecode.com/

Jetpack CSS

Now if you want your button or input box to be taller or shorter when you add the CSS above, just adjust the numbers for padding (right now they are set to 6 for the button and 7 for the input box). I’ve also noticed that certain themes will have the button formatted to match the theme nicely, but it still doesn’t stretch the full width. Below is the CSS you would use if you don’t want to change the color/look of your submit button and just want it to be longer/taller.

Feedburner CSS

Below is the CSS you would use if you don’t want to change the color/look of your submit button and just want it to be longer/taller.

If CSS isn’t working…

The majority of problems with this tutorial appear to be that people aren’t using the default Jetpack/Feedburner widgets. If you are pasting in a subscription form that is not from the feedburner website, the code may not work and if you are not using the specific Jetpack widget(not a text widget), the code may not work.

Why? The CSS above uses specific class names: .FeedburnerEmailWidget and .jetpack_subscription_widget. If the HTML for your subscription form doesn’t have those class names, the CSS will not work. All is not lost though. If you’re confused and want to know what class names you should use for the CSS, just let me know in the comments and leave a link to your blog.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

70 thoughts on “Customize Jetpack & Feedburner Email Widget

  1. It didn’t work for me :/ I think I’m putting it in the wrong way. Is there something that needs to be added on the style sheet before?

  2. If you look at my home page, i have tried to install the plugin and then add the css code to style.css at the bottom. But there was no change. It’s not stretching nor changing color. Am i doing something wrong? Where exactly should i insert the CSS code. Looking forward to a fast reply.

    1. Are you using a custom form for your feedburner? It doesn’t look like the standard one which is why the CSS isn’t working. Looking at your code, none of your tags in that form have a unique ID. You need a unique ID that wraps around code so that CSS will apply specifically to that form. If you can edit the form, add this tag to the beginning:

      and this tag to the end:

      Then use this CSS:
      #feedburner input[type=text], #feedburner input[type=email] {
      color: #333;
      padding: 7px !important;
      }
      #feedburner input[type=”submit”] {
      background: BUTTON BACKGROUND;
      color: white;
      margin: 0;
      width: 100%;
      padding: 6px !important;
      height: auto;
      border: none;
      box-shadow: none;
      text-shadow: none;
      }
      #feedburner input[type=”submit”]:hover {
      background: BUTTON HOVER BACKGROUND;
      }

  3. Hello, I have the Feedburner form on both my sidebar and footer widget area, but when I put in the code into the CSS editor, nothing changed? Help? Thank you. :)

    1. You’re having the same problem that Denise is having in the comment above yours. The email form you are using isn’t the standard one. None of your tags in that form have a unique ID. You need a unique ID that wraps around code so that CSS will apply specifically to that form.

      See the above comment for the HTML changes that need to be made and lmk if you have any questions after that =)

      1. It’s working now, thank you! However, I’m not sure where to change the color of the ‘Submit’ button, and how to I reduce the space between the input box and button?

        1. There is a spot in the CSS that says:
          background: BUTTON BACKGROUND;

          you need to actually put a background color there.

          add this CSS to decrease margin:
          #feedburner input[type=text], #feedburner input[type=email]{
          margin-bottom: -5px;
          }

  4. Hey Stephanie!

    I’m in the process of setting up a new website (so please ignore the chaos currently!). I was able to adjust the “Submit/Subscribe” button but I can’t adjust the field where you put in your email and it is too wide. Any suggestions? I’ve been fiddling with the coding above but it hasn’t been working :) Thanks!

  5. Hello

    Oh to completely understand what you are talking about!

    So, I have installed “feedburner email widget”

    I have activated the plugin.

    I have inserted the code into the ‘styling options’ CSS styling box.

    I have been able to change the colours, but there is no space between the email input box and the submit button.

    I did read the comment above where you addressed decreasing a margin and I thought that I could just reverse that and I would increase the gap between the two. No…

    It’s like I have been deposited into another land. Yikes!

    x Kim

  6. Thank-you for this timely tutorial! It worked beautifully, except I can’t figure out how to change the actual color of the button. The BACKGROUND BUTTON color changes the color of the SUBSCRIBE font, but not the button itself. Thank-you so MUCH!

  7. Yeah, I tryed this but not working on my main.css which included every page, even dosen’t work on funtions.php inline css.
    So you must find this css, and must modified:
    publick_html/YOUR_WordpressFloder/wp-content/plugins/jetpack/modules/subscriptions/subscriptions.css.
    I think this is an important information.
    Unesley if you get a update from jetpack, you must add css agien.
    But i don’t know better solution now.

    1. You’d have to dive into your HTML and find your email input tag. Then add something like this to the input tag:
      value=”Enter Your Email” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”

  8. Hi Stephanie,

    I am so thankful for this code–I’ve been looking for weeks for a solution to stylizing that Jetpack subscription form! I added it to my site successfully, but the right side border of the email input box won’t show up. Can you help me fix this? Thank you so much!

    1. Of course! Just go back into your CSS and find this line (it’s the first line in that CSS box you used):
      .jetpack_subscription_widget input[type=text], .jetpack_subscription_widget input[type=email]

      then add this style to that:
      width: 90% !important;

  9. Hi,

    This tutorial is exactly what i have been looking for. Thank you so much! I tried adding the code to the CSS Stylesheet Editor and nothing changed. I was wondering what I did wrong. Thanks so much for your help!

  10. Hi i love this tuto and i would like the same style for blogger !
    is this possible to have the same style ? i would like to put the email adress above submit and i dont want to have the submit and adress next each other!
    here my code
    .FollowByEmail .follow-by-email-inner .follow-by-email-submit{
    background: BUTTON BACKGROUND;
    color: white;
    margin: 0;
    width: 500% !important;
    line-height: normal !important;
    padding-bottom: 10px !important;
    height: auto;
    border: none;
    box-shadow: none;
    text-shadow: none;
    }
    .FollowByEmail .follow-by-email-inner .follow-by-email-submit{
    color: #333;
    padding: 5px !important;
    }
    .FollowByEmail .follow-by-email-inner .follow-by-email-address{
    color: rgb(0,0,0);
    width: 140%;
    padding-bottom: 10px !important;
    height: 32px;
    font-size: 13px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    background: white;
    padding: 0 0 0 9px;
    }

  11. Thank you for the post. But I am looking for a colourful rich email subscription box for wordpress not for blogger.com. Could you suggest me one to grab for free.

    Thanks
    Vishnu

  12. Hi Stephanie,

    Thanks for posting! I’ve read through all of your comments about the colors, different subscription forms, etc,; however I still can’t get the code to work for some reason. I have the Jetpack subscription plug in ; however I also have feedburner as an option for readers but I don’t know how to change the form. I believe I just have a basic form, I didn’t do anything special when setting it up.

    I added the code to the main Style.css sheet as well as the subscriptions.css sheet. Any idea what I’m possibly doing wrong?

    Thanks!

  13. This seems to be exactly what I am after. Unfortunately, it doesn’t seem to take the changes into account :(. If you could be so kind and see what could be wrong with my blog (http://www.monkeyism.com/), I would be eternally grateful!

    I checked that the style.css loaded contains the changes. But they don’t seem to apply.

    Thanks in advance!

    1. Looks like the problem is you’re not using the default Jetpack form. Instead it looks like you’re pasting in code to a regular text widget. Which means that part in the CSS that says:
      .jetpack_subscription_widget
      isn’t in your widget code.

      Solution: Anywhere you see:
      .jetpack_subscription_widget
      in the CSS above, replace it with:
      #subscribe-blog-blog_subscription-2

  14. hello,
    i used some of your code and some of another code to make my jetpack email subscription look much better. thank you so much! (it’s my first website and i’m clueless). i choose a purple background color. it’s perfect on pages, but on posts, the color disappears & leaves a white box, do you have any idea why or what i should change or add to fix the issue? here’s the code i used:

    .entry-content .jetpack_subscription_widget {
    background: #f3e0ff;
    padding: 1em;
    color: #000;
    }

    .jetpack_subscription_widget input[type=text], .jetpack_subscription_widget input[type=email] {
    color: #333;
    padding: 7px !important;
    }
    .jetpack_subscription_widget input[type=”submit”] {
    width: 100%;
    padding: 6px !important;
    height: auto;
    }

  15. hi stephanie, thanks so much again for your help with the jetpack email subscription. can i ask you another question? i took off the coming soon page, and am looking at my site on my mobile phone and things are just crazy on there. one thing that i can’t figure out, is on my sidebar, i have a facebook widget that has a border on it. when i look at the mobile version of my site, the border is gone. do you have any ideas to fix it so the outline stays on a mobile version too? thank you :)

    1. I don’t see it since the coming soon page is up again, but it must be set in the CSS. Try going into your stylesheet and searching for mobile. There is probably a section of CSS for the mobile view that is changing that widget.

  16. Dear Stephanie,

    Thank you for your help. I have a WordPress blog with a Jetpack plugin for email subscriptions.

    I can’t seem to get the Subscribe button and the Email Address form box to line up with the RIGHT side instead of being centered in that widget panel in my desktop version. (Does this have to do with text-align? I’d rather not mess with the margins since they will just change on different screen sizes, but rather create a rule that always puts this to the right.)

    Any chance you can take a look at how I could add this correction to my CSS stylesheet?

    Thank you kindly,
    Amelia

    1. It actually has to do with the CSS style “float” find this CSS:
      .jetpack_subscription_widget input[type=”submit”]
      and change the float value to right

      Then find this CSS:
      .jetpack_subscription_widget input[type=text], .jetpack_subscription_widget input[type=email]
      and change that float value to right as well :)

  17. Hi there!

    The coding for this looks great… however, I cannot get it to work! I have wordpress and the default jetpack subscription widget activated… but it’s not changing! I’m probably doing something really silly wrong, but I can’t figure out what

    Thanks in advance!

  18. Hey this is again an amazing tutorial! It works great with the JetPack Widget but I can’t get the Feedburner Widget to work – it seems like the name is cw_feedburner-2 but if I change the name nothing changes.

    Also, how can I upload a custom background for these special widgets? Or is this too complicated? I tried adding a background code with the url – but it’s not overwriting my “normal” sidebar settings.

    Thank you so much for your time and help!
    Cheers,
    Danny

    1. You’re right that cw_feedburner-2 is the name of your Feedburner widget, but it’s an id and not a class. So instead of .cw_feedburner-2, you need #cw_feedburner-2. You also need a little extra CSS to override your current settings. See below:

      #cw_feedburner-2 input[type=text], #cw_feedburner-2 input[type=email] {
      color: #333;
      padding: 7px !important;
      float: none;
      margin: 0 0 10px;
      }
      #cw_feedburner-2 input[type=”submit”] {
      background: BUTTON BACKGROUND;
      color: white;
      margin: 0;
      width: 100%;
      padding: 6px !important;
      height: auto;
      border: none;
      box-shadow: none;
      text-shadow: none;
      display: block;
      }
      #cw_feedburner-2 input[type=”submit”]:hover {
      background: BUTTON HOVER BACKGROUND;
      }
      .input-group, .input-group-btn {
      display: block;
      width: 100%;
      }

      So you want a different background color instead of the grey? It’ll be tricky since you have images as the left and right border of the widget. This is what your widget CSS looks like right now:

      .sidebar .widget {
      background: url(‘http://bewitchedbookworms.com/wp_bewitched/wp-content/uploads/2015/05/sidebar-bg-left.png’) repeat-y left top, url(‘http://bewitchedbookworms.com/wp_bewitched/wp-content/uploads/2015/05/sidebar-bg-right.png’) repeat-y right top;
      background-color: #f4f4f4;
      border-radius: 10px;
      }

  19. Hi! This post helped me so much! I was just wondering if you know how to make the “Email + Submit” on the same line or in the same button (like your search bar??) Thanks again!

    1. Hi Casey,

      Try adding this CSS:

      #subscribe-blog-blog_subscription-2 {
      padding: 0 10px !important;
      }
      .jetpack_subscription_widget p#subscribe-submit {
      width: 15%;
      display: inline-block;
      vertical-align: top;
      }
      .jetpack_subscription_widget p#subscribe-email {
      width: 83%;
      display: inline-block;
      }

  20. I am trying to get my feedburner submit button longer because its cutting off the text. I cant seem to get it to work. I put the code you had in the css style sheet but that doesnt seem to work. I am using the Feedburner Form plugin I got from wordpress. Can you help?

    1. Hi Dana, I looked at your jetpack widget and it’s using the correct classes. If the styles aren’t showing up correctly it may because your theme already has styles applied and they’re overriding these new styles. You could try adding !important; to some of the CSS styles to force them to show up. Or go through your CSS files and look for styles related to the class .jetpack_subscription_widget