I would suggest that you use Custom CSS to customize the look of that button. Try adding your own styles to your theme stylesheet, or to your custom CSS editor under Appearance > Edit CSS in your dashboard. You can target the submi button with the following CSS:
.jetpack_subscription_widget input[type="submit"] {
/* Your custom CSS rules here */
}
Can you help me with the code please?
I used this for my search form and would like to use the same look for my subscribe button and input.
/* ===================== searchform ===================== */
#search { width: 260px; height: 35px; float: right; margin-right: 5px; display: inline; }
#s { background: url(images/bg-search.png) no-repeat; border: none; width: 170px; height: 32px; color: #777; font-size: 90%; display: inline; float: left; }
#searchform { float: right; padding-top: 5px; padding-right: 0px; }
#searchform, #searchform div { position: relative; }
#searchsubmit { background: url(images/search-btn.png) no-repeat; height: 32px; width: 68px; border: none; text-indent: -999%; display: block; float: left; }
form#searchform input#s { padding: 0 10px; width: 150px;}
Your search submit button is probably controlled by this rule:
form#searchform input#s { padding: 0 10px; width: 150px;}
You can use the exact same rules, and apply them to the submit button as well, like so:
form#searchform input#s, .jetpack_subscription_widget input[type="submit"] { padding: 0 10px; width: 150px;}
I would need to see your site to understand all the rules you added to the search button, but you should be able to customize the whole subscription form by yourself by using your browser’s web inspector, or the Firebug add-on if you use Firefox.
My code won’t work since your theme doesn’t add any CSS class to the widgets. I played a bit with CSS, and the search icon and “GO” image looked a bit weird to me:
http://i.wpne.ws/PPJA
I think it would look better if you were to use a simple background, like so:
#subscribe-blog-blog_subscription-2 input[type="submit"] {
background: #666;
border: none;
color: #fff;
height: 32px;
padding: 0 15px;
}
Here is the end result:
http://i.wpne.ws/POtO
It worked! Thank you.
One more thing, if I want the subscriber to see a thank you page after subscribing, would I have to create a page and implement it into my css?
The subscription form actually already includes a small message letting people know how to confirm their subscription after filling out the form.
You can customize the display of the message via CSS.
Redirecting subscribers to a thank you page, however, is not possible with the Jetpack plugin. You would have to use a different plugin for that.
I cant seem to get the code to work, im a newbie but have a slight understanding of .css.
I would like to change the subscribe button to the one I have with my other widget to fit them theme
website
http://www.thedentalroom.co.uk
#mc_embed_signup {
background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
#mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 0}
#mc_embed_signup h2 {font-weight:bold; padding:0; margin:0px 0; font-size:1.4em;}
#mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 0px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
#mc_embed_signup .button:hover {background-color:#777;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}
#mc_embed_signup .clear {clear:none; display:inline;}
#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup input.email {display:block; padding:8px 0; margin:0 4% 10px 0; text-indent:5px; width:58%; min-width:130px;}
#mc_embed_signup input.button {display:block; width:35%; margin:0 0 10px 0; min-width:90px;}
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
</style>
this is the .css for the style I want.
@dentalroom Try adding #subscribe-blog-blog_subscription-2 input[type="submit"] to all the rules to apply the form styles to the Jetpack Subscription widget as well.
Thankyou very much, much appreciated.!
