JetPack Subscribe widget

i would love to know how to do this as well.

I just came across this when looking for a quick-fix solution to this problem, so I thought I’d offer up my own.

If you read the code it generates, it looks something like this:

<input id="subscribe-field" type="text" onblur="if ( this.value == '' ) { this.value = 'Email Address'; }" onclick="if ( this.value == 'Email Address' ) { this.value = ''; }" value="email" style="width: 95%; padding: 1px 2px" name="email">

Because the styling is inline, it’ll override anything in a linked or inline stylesheet. I used jQuery to remove the styling:

<script>
     $(document).ready(function(){
         $('#subscribe-field').removeAttr("style");
     });
   </script>

And that fixed it! It would be great if this could be removed from the next version of Jetpack, as it’s rather a cumbersome workaround.

Hope that helps someone!

I have run into the same problem and been trying to fix for 2 days. I am wondering where the above fix is placed. I have entered it in a few places and not working so far.

I put it in my footer. You’ll need to have jQuery running, of course, but if it isn’t working maybe check that the script is executing and that it’s targeting the correct field? Keep in mind that this just removes the inline styling and you’ll probably want to style the items yourself in your css file.

If you send over a link, I can do a quick check to see why it isn’t working.

I am a amateur at this so I don’t even understand half of what you just typed. the page where this problem resides is https://allyouvideoworks.com/?page_id=2

I have 3 widgets on a right sidebar. the first is the jetpack subscribe that is giving me the problems, the second is just a text widget that is being driven by style.css and the last one is another Jetpack widget that seems to follow the style.css unlike the subscription widget.

Is it possible to just remove the styling from the subscription widget so it will follow style.css?

Thanks for the help btw:)

Try putting the javascript code above in your footer file, before the </body>. That should remove the styling—although note that it’s just a width and a padding setting, so if you want to do anything else it’ll need to be set in your stylesheet. This code will, however, remove that inline styling for you.

Cheers!

I just realized you’re probably referring to the widget title being black, which is a different problem entirely.

The fix for that is pure css—what you’re seeing is because the h4 contains a label.

<h4 class="widgettitle">
<label for="subscribe-field">Subscribe for Fresh Videos and News</label>
</h4>

So, in your css, labels are designated like so:

input, label, select, textarea {
    color: #333333;
    font-family: 'News Cycle',Arial,sans-serif;
    font-size: 16px;
    font-weight: 300;
}

and as such, those rules are overwriting your .sidebar h4 rules. If you write the following code

.sidebar h4 label {
    color: #FFFFFF;
    font-size: 14px;
}

and add it to your css, that will mostly likely solve the problem.

followed your above instructions and I am getting this

Warning: Cannot modify header information – headers already sent by (output started at /home/content/48/7248048/html/wp-content/plugins/jetpack/modules/subscriptions.php:2) in /home/content/48/7248048/html/wp-admin/theme-editor.php on line 103

I am assuming that the above code would go in my stylesheet. I placed it in there at the end of the styling for the sidebar area.

This is still an ongoing issue, with the Subscription widget CSS being overwritten.

Worse yet is that the instructions/feedback to users displays badly, and the User Count (if static) is ‘unplaced’…

PLEASE Jetpack Gurus… help us with this!