WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Subscription widget button appearance (3 posts)

  1. John
    Member
    Posted 11 months ago #

    Hello!

    I have been using the Jetpack subscription widget in my sidebar on my website, however the button that people click to subscribe is a very simple gray rectangular button (not exactly super attractive).

    However, my theme has some great buttons that I use in my sidebar too. I'm curious, how can I replace the default subscribe button with a different nicer looking one?

    I'll post my website below so that you can see an example of the button I'd like to use in the sidebar:

    Website: http://www.lifebyjohn.com/test

    Thanks!

    http://wordpress.org/extend/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 11 months ago #

    To customize the look of the subscription widget, you can add the following CSS to your theme stylesheet, or to your custom CSS editor under Appearance > Edit CSS in your dashboard:

    #sidebar .jetpack_subscription_widget input[type="submit"]
    
    .buttons a{
    	margin-right:30px;
    }
    #sidebar .jetpack_subscription_widget input[type="submit"] {
    	background-image: linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
    	background-image: -o-linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
    	background-image: -moz-linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
    	background-image: -webkit-linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
    	background-image: -ms-linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
    	background-image: -webkit-gradient(
    		linear,
    		left top,
    		left bottom,
    		color-stop(0, #b5e0f7),
    		color-stop(1, #76c7f1)
    	);
    	border:1px solid #1172c1;
    
    	color:#1172c1 !important;
    
    	display:inline-block;
    	height:32px;
    	font:13px/32px 'PTSansBold', arial, helvetica, sans-serif;
    	text-transform:uppercase;
    	text-align:center;
    	text-shadow:0 1px 0 #fff;
    	padding:0 20px;
    	-webkit-border-radius: 2px;
    	-moz-border-radius: 2px;
    	border-radius: 2px;
    	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    }
    
    #sidebar .jetpack_subscription_widget input[type="submit"]:hover{
    	color:#1172c1 !important;
    	background-image: linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
    	background-image: -o-linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
    	background-image: -moz-linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
    	background-image: -webkit-linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
    	background-image: -ms-linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
    
    	background-image: -webkit-gradient(
    		linear,
    		left top,
    		left bottom,
    		color-stop(0, #76c7f1),
    		color-stop(1, #b5e0f7)
    	);
    	border:1px solid #1172c1;
    }

    This CSS actually already exists in your theme stylesheet, but you need to apply it to the Subscription button as well. I targeted that button with the following CSS:
    #sidebar .jetpack_subscription_widget input[type="submit"]

  3. John
    Member
    Posted 11 months ago #

    This worked perfectly, and I appreciate the time you put into making the color come out right. I truly appreciate it!

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.