Customize Wysija Newsletter Subscribe Plugin Design

Every website owner want traffic to their website or blog here try many methods but if you really want users come back then write quality content that readers have trust on your website Newsletter is great way to sent latest updates to user directly to their email account much you have user much you get traffic and revenue if you running website for it.

There are many of plugin you can find for newsletter also you can use free best service from Google feedburner it will send email directly to user whenever new post come but will less or no customization on newsletter everyone searching alternative here Wysija comes.

Wysija Newsletter is great plugin for WordPress Website if you are using this I’m sure like me you suffered from it’s basic design and really want to change and customize design & look so here is some CSS got from official website and edited created by me.

About Plugin:

Create newsletters, post notifications and auto responders. Drop your posts, images, social icons in your newsletter. Change fonts and colors on the fly. Manage all your subscribers. A new and simple newsletter solution for WordPress.

Now How to customize plugin here is code just copy and paste into your theme stylesheet.css file.

First Change Wysija Plugin Background you can change image to color:

.widget_wysija_cont {

background: url(images/sub.png) no-repeat;

}

Then Change Label where Email is written:

.widget_wysija_cont p label {
font-size: 14px;
font-weight: bold;
color: rgb(79, 59, 231);
padding: 0px 0px 0px 46px;
}

After that we comes to main part Email Box:

.widget_wysija input[name="wysija[user][email]"] {
padding-top: 0px;
margin-left: 18px;
width: 220px;
border: 1px solid #dedede;
color: #999;
padding: 7px 0px 8px 10px;
}

Now change Subscribe Button.as well as On mouse over color

.wysija-submit-field {
margin-left: 80px;
cursor: pointer;
width: 86px;
height: 27px;
overflow: hidden;
border: 1px solid;
color: white;
background: #333;
font-weight: bold;
}

.wysija-submit-field:hover {
background: #359BED;
}

Hope you like my tutorial subscribe us for latest posts or need help regarding this plugin you can ask us.