Customize Wysija Newsletter Subscribe Plugin Design

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
Loading...

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.

wysija
Image credit @ wysija newsletter

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.

personal technology columnist, author and founder of wRock.org, a widely read tech and how-to blog since 2009. Wants to explore and share interesting Tips, Tutorials and More. Also WordPress Theme Designer @ here. Contact: Contact

One thought on “Customize Wysija Newsletter Subscribe Plugin Design

  1. Great tutorial. Really nice and helpfull!

    I’m however missing one specific topic and that’s how to style the placeholder. This as I’m having trouble styling it. My theme developer also did not manage to get this fixed and Mailpoet states it doesn’t have any propetary css. Nevertheless something seems to be blocking the general code below or even more specific rules to function correctly.

    Any thought on why this might occur? And how to solve such a styling issue?


    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #888;
    font-family: Oswald, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size:12px;
    }

    input:-moz-placeholder, textarea:-moz-placeholder {
    color: #888;
    font-family: Oswald, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size:12px;
    }

    input::-moz-placeholder, textarea::-moz-placeholder {
    color: #888;
    font-family: Oswald, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 12px;
    }

    input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #888;
    font-family: Oswald, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 12px;
    }

    /* Mailpoet widget 'floating title while title is disabled' fix */

    .widget_wysija .fLabel {
    display: none;
    }

Leave a Reply

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